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

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

3289 Learners

(1973 ratings)

Created by

Init Tech Labs

This course includes:

on-demand video
Access on mobile and TV
Full lifetime access
Certificate of completion

0

0.00

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

1973 Reviews

Hemang Pavar
Hemang Pavar

February 5, 2025

"I love this course"