Mastering Angular + Ang 17 - 18 + Interview + E-commerce App

Build, Deploy & Get Job-Ready with Real-World App Skills & Interview Questions + Assignments, Angular 17

3928

5.0

(694 ratings)

Created by

Init Tech Labs

This course includes:

on-demand video
Access on mobile and TV
Full lifetime access
Certificate of completion
What you'll learn

Master Angular's architecture and its practical application.

Develop complex, scalable web apps with Angular.

Create responsive single-page applications (SPAs).

Excel in data binding for dynamic user experiences.

Facilitate seamless component communication.

Hands-on eStore project implementation.

Build a strong foundation for a frontend developer role.

Organize and structure Angular code effectively.

Course Content

19 sections

220 lectures

15 hr 29 min

Course Introduction

04:30

Preview

History of Angular

03:57

What is Angular and why use Angular?

05:22

Angular CLI

05:25

Understanding Project Structure

03:16

Introduction to Angular 17

02:44

First Component with Architecture

10:03

Displaying message dynamically (Interpolation)

02:44

Assignment - Display sum of two values

01:42

Property binding

04:17

Assignment - Property binding with image tag

01:31

Event binding with click event

03:03

Binding other mouse related events

03:39

Binding keyboard events

03:02

$event object

04:16

Assignment - Checking Shift key status

02:44

Two way binding (ngModel)

06:38

Assignment (Two-way Binding) - Get input field value on button click

02:36

Assignment - Creating counter example

03:24

Introduction

02:28

Component Creation Hook - ngOnChanges()

04:43

Understanding SimpleChanges Object

04:47

Component Creation Hook - ngOnInIt()

04:25

Detecting Custom Changes With ngDoCheck() hook

07:16

Understanding the ngAfterContentInit() hook

07:38

Checking The Content With ngAfterContentChecked() hook

03:12

Loading Content With ngAfterViewInit() hook

04:20

Checking The Component View With ngAfterViewChecked() hook

02:43

Destroying Component With ngDestroy() hook

03:40

Directives Introduction

01:52

Structural Directives (*ngIf)

03:04

Assignment - Implementing show & hide functionality with *ngIf

02:06

Structural Directives (*ngFor)

02:35

Assignment - Displaying list items on button click using *ngIf and *ngFor

02:49

Structural Directives (*ngSwitch)

03:22

Assignment - Implementing age validation functionality using *ngSwitch

02:55

Attribute Directives [ngClass]

05:55

Assignment - Light & Dark mode using [ngClass]

03:44

Attribute Directives [ngStyle]

03:02

Assignment - Changing the color of input field using [ngStyle]

07:25

Grouping elements with ng-container

03:36

HTML templates with ng-template

03:24

<ng-template> Vs <ng-container>

02:08

Assignment - (Displaying message if the input field remains empty)

03:56

Rendering templates with ngTemplateOutlet - Part 1

04:32

Rendering templates with ngTemplateOutlet - Part 2

03:01

Assignment - Portfolio Builder (Phase 1) - HTML

03:04

Assignment - Portfolio Builder (Phase 2) - CSS

04:45

Assignment - Portfolio Builder (Phase 3) - Binding

05:30

Introduction To Decorators

01:27

Class Decorators - @NgModule

03:03

Class Decorators - @Component

01:51

Property Decorators - @Input

03:51

Assignment @Input Decorator

03:13

Property Decorators - @Output

05:16

Assignment - Implementing parent-child data sharing using @Input & @Output

07:23

Property Decorators - Accessing Child Components With @ViewChild

09:08

Property Decorators - Accessing The Projected Content With @ContentChild

05:00

Property Decorators - Binding Properties With @HostBinding

04:05

Method Decorators - Binding events with @HostListener

04:54

Assignment - Implementing Color Picker

05:21

Parameter Decorators

01:02

Pipes Introduction

03:15

Assignment - Implementing the built-in pipes

03:42

Understanding Slice Pipe

02:42

Assignment - Page navigation using slice pipe (Pt1)

05:01

Assignment - Page navigation using slice pipe (Pt2)

03:31

Understanding Number pipe

03:04

Assignment - Pound(lbs) to Kg Converter Using Number Pipe

04:13

Understanding JSON Pipe

01:39

Assignment - Displaying Table Data To JSON string

04:31

Creating Custom Pipes

04:20

Assignment - Custom Pipe for Sorting Numbers

05:40

Assignment - Creating Custom Pipe For Letter Count

03:08

Pure Vs. Impure Pipe

03:50

Using Impure Pipes

02:54

Routing Introduction

02:37

Understanding Router Module Structure

02:24

<router-outlet> - Creating a simple route

02:30

Creating a navigation link with "routerLink" Directive

01:54

Assignment - Creating a Navbar using routes

05:06

Passing Route Parameters - (Dynamic Routing)

04:08

Wildcard Routes - Displaying the 404 page

02:51

Understanding Nested Routes

02:50

Assignment - Creating a multi-level menu

02:47

Redirecting Routes

04:45

Understanding forRoot and forChild in routing

05:09

Understanding ActivatedRoute

05:02

Query Parameters In Routing

04:39

Assignment - Displaying Course Details And Fetching The Query Parameters

05:06

Introduction To Services

07:58

Dependency Injection

04:37

Providing Services

07:31

Injecting Tokens

04:45

Injecting String Tokens

02:20

Injection Token Object

03:07

Providing Value With “useValue”

02:47

Assignment - Provide A Constant Value As Dependency

02:37

Alias Provider - useExisting Property

02:34

Factory Provider - useFactory Property

03:29

"Providing Dependencies Using “deps” Property With useFactory"

05:05

useFactory Vs. useValue

03:11

Introduction to Angular Forms

02:37

Understanding ngForm directive

04:50

Assignment - Creating A Simple Submit And Reset Form

03:55

Template-driven form

04:54

Understanding FormControl

06:07

Understanding FormGroup

06:53

Dynamic Forms With FormArray

06:45

Understanding FormBuilder

02:16

Validating Form Controls

05:40

"Creating Multi Step Reactive Form With Bootstrap (Part 1) "

04:34

"Creating Multi Step Reactive Form With Bootstrap (Part 2)"

03:30

"Creating Multi Step Reactive Form With Bootstrap (Part 3)"

07:49

Tracking Form Control States (Dirty and Pristine Properties)

05:11

Multiple Validations On Password Field

04:28

Creating Custom Validators

05:47

Custom URL Validator

05:42

Introduction To Lazy Loading

01:52

Lazy Loading Of Modules

05:39

Preloading Of Modules

05:34

Relative Question - Preloading Vs. Lazy Loading

01:44

Understanding Observables & RxJS

06:15

Managing Observables & Subscribers

08:24

Unsubscribing an Observable

05:43

Understanding Async Pipe

06:22

Assignment - Fetching JSON Data With Async Pipe

04:40

RxJS {of} Operator

03:11

RxJS {from} Operator

02:42

RxJS {interval} Operator

03:03

RxJS {timer} Operator

03:44

Assignment - Implementing a loading spinner with timer operator

03:04

RxJS {empty} Operator

03:31

RxJS Pipeable Operators

04:02

RxJS {filter} Operator

03:30

RxJS {map} Operator

05:13

RxJS {mergeMap} Operator

03:49

Assignment - mergeMap() - Displaying the Courses Associated With User

02:35

RxJS { concatMap } Operator

04:55

RxJS { switchMap } Operator

04:30

Making HTTP Calls With HttpClient

04:45

Making HTTP Calls With Observable

02:36

Implementing HTTP POST Request

05:08

Modifying Data With PUT Request

04:33

Removing Data With DELETE Request

03:37

CRUD App#1 Displaying Products With GET Request

05:52

CRUD App#2 Adding Products With POST Request

06:20

CRUD App#3 Fetching Products Data Before Updating

06:55

CRUD App#4 Updating Products With PUT Request

03:27

Implementing CRUD Operation - (Mini-Project) - Part 5

03:51

Introduction to Signals

02:01

Creating Signal

03:34

Updating Signal Value

03:13

Mutating A Signal

02:45

To-do list assignment

05:33

Computed Signals

04:14

Understanding effect() function

04:57

Untracking Signals

04:59

Assignment - Updating The Cart using Signals

07:23

Introduction

01:35

eStore Project Creation

01:52

Installing Bootstrap

01:30

Beginning Header Component

03:38

Adding Search Bar

03:20

Category Dropdown In Search Bar

02:41

Login Link, Wishlist And Cart Icons

03:48

Category Navigation Bar

02:50

Creating Home Component

02:45

Reorganizing Header And Category Navigation Components Heirarchy

01:35

Creating Error 404 Page

02:34

Beginning Side Navigation Component

06:00

Fetching Data Into Side Navigation Component

05:34

Products component

01:59

Styling product card

03:39

Fetching data into products component

03:39

Creating ratings component

05:55

Installing MySQL

04:09

Creating Database

05:02

Creating Node Server

02:58

Configuring API Route

02:01

Configuring Nodemon

01:24

Connecting To MySQL

02:44

Data fetching with SQL query

02:01

Removing getConnection call

01:16

Creating routes with express

02:03

Configuring Routes with “express.Router()”

01:13

Creating workspace

00:58

Fetching Categories from server

03:47

Fetching Categories in Category navigation bar

01:51

Introducing state management

08:19

Populate header search categories

01:34

Define routes to fetch products

04:36

Fetching products in products component

02:27

Query parameters to Filter products by category

02:37

Add products store

06:06

Filter products from side navigation bar

03:07

Filter products from category navigation bar

01:48

Adding keywords in database

02:18

Find products using search box

04:46

Lazy loading home module and products gallery component

05:29

Creating product details component

11:23

Implementing Shopping Cart - Part 1

06:44

Implementing Shopping Cart - Part 2

04:52

Creating shopping cart component - Part 1

06:42

Creating shopping cart component - Part 2

03:28

Cart summary and session storage

04:40

User Signup API

06:24

Starting User Sign up form

07:59

Adding validations in user sign up form

07:03

Connect sign up form to API

06:48

User login API

05:49

User login form

05:58

Connect User login form to API

06:19

Create user drop down menu

09:38

Adding logout functionality

06:13

Display delivery address in checkout screen

07:21

API to save authenticated orders

09:07

Creating order service

08:03

Saving order from cart

06:12

API to get orders list

07:06

Requirements

Basic HTML and CSS knowledge, but it isn't mandatory!

Time, attention and dedication to learn & practice.

5.0

Course Rating

694 Reviews

HP
Hemang Pavar

February 5, 2025

"I love this course"