Certified Angular 17 Developer

TABLE OF CONTENT

Introduction

• Intro
• Angular CLI
• Understanding Project Structure
• NG17-Introduction to Angular 17
• Getting started with Angular 17
• Migrating to Angular 17

Angular Fundamentals

• First Component With Architecture
• Displaying Message Dynamically
• Assignment (Display sum of two values)
• Understanding the @NgModule
• NG17-Bootstrapping & Utilizing Standalone
• Property Binding
• Assignment (Property binding with image tag)
• Event Binding with Click Event
• Binding Other Mouse Related Events
• Binding Keyboard Events
• $event object
• Assignment (Checking shift key status)
• Two Way Binding (ngModel)
• Assignment (Two-way Binding) - Get input field value on button click
• Assignment (Creating counter example)

Angular Directives

• Directives Introduction
• Structural Directives (ngIf)
• Assignment - Implementing show & hide functionality with ngIf
• NG17-Control Flow Statements (@if & @else)
• Structural Directives (ngFor)
• Assignment - Displaying list items on button click using ngIf and ngFor
• NG17-Control Flow Statements @for loop
• Structural Directives (ngSwitch)
• Assignment - Implementing age validation functionality using ngSwitch
• Attribute Directives [ngClass]
• NG17-Control Flow Statements (@switch)
• Assignment - ngClass
• Attribute Directives - [ngStyle]
• Assignment - Changing the color of input field using [ngStyle]
• Grouping elements with ng-container
• HTML templates with ng-template
• ng-template vs ng-container
• Assignment - Displaying message if the input field remains empty
• Rendering templates with ngTemplateOutlet - Part 1
• Rendering templates with ngTemplateOutlet - Part 2
• Assignment - Portfolio Builder (Phase 1) - HTML
• Assignment - Portfolio Builder (Phase 2) - CSS
• Assignment - Portfolio Builder (Phase 3) - Binding

Component Life Cycle - Lifecycle Hooks

• Introduction
• Component Creation Hook - ngOnChanges()
• Understanding SimpleChanges Object
• Component Creation Hook - ngOnInit()
• Detecting Custom Changes With ngDoCheck() Hook
• Understanding the ngAfterContentInit() Hook
• Checking The Content With ngAfterContentChecked() Hook
• Loading Content With ngAfterViewInit() Hook
• Checking The Component View With ng AfterView Checked() Hook
• Destroying Component With ngDestroy() Hook

Decorators

• Introduction To Decorators
• Class Decorators - @NgModule
• Class Decorators - @Component
• Property Decorators - @Input
• Assignment @Input Decorator
• Property Decorators - @Output
• Assignment - Implementing Parent-Child Data Sharing using @Input & @Output
• Property Decorators - Accessing Child Components With @ViewChild
• Property Decorators - Accessing The Projected Content With @ContentChild
• Property Decorators - Binding Properties With @HostBinding
• Method Decorators - Binding Events With @HostListener
• Assignment - Implementing Color Picker
• Parameter Decorators

Angular Pipes

• Pipes - Introduction
• Assignment - Implementing the Built-In Pipes
• Understanding Slice Pipe
• Assignment - Page Navigation using Slice Pipe (Part 1)
• Assignment - Page Navigation using Slice Pipe (Part 2)
• Understanding Number Pipe
• Assignment - Pound(lbs) to Kg Converter Using Number Pipe
• Understanding JSON Pipe
• Assignment - Displaying Table Data To JSON String

Custom Pipes

• Creating Custom Pipes
• Assignment - Custom Pipe for Sorting Numbers
• Assignment - Creating Custom Pipe For Letter Count
• Pure Vs. Impure Pipe
• Using Impure Pipes

Angular Routing

• Routing - Introduction
• Understanding Router Module Structure
• - Creating a Simple Route
• Creating a Navigation Link with "routerLink" Directive
• Assignment - Creating a Navbar Using Routes
• Passing Route Parameters (Dynamic Routing)
• Wildcard Routes - Displaying the 404 Page
• Understanding Nested Routes
• Assignment - Creating a Multi-Level Menu
• Redirecting Routes
• Understanding forRoot and forChild in Routing
• Understanding ActivatedRoute
• Query Parameters In Routing
• Assignment - Displaying Course Details and Fetching the Query Parameters

Angular Services

• Introduction to Services
• Dependency Injection
• Providing Services

Angular Tokens

• Injecting Tokens
• Injecting String Tokens
• Injection Token Object
• Providing Value With "useValue"
• Assignment - Provide A Constant Value As Dependency
• Alias Provider - useExisting Property
• Factory Provider - useFactory Property
• Providing Dependencies Using "deps" Property With useFactory
• useFactory Vs. useValue

Angular Template Driven Forms

• Introduction to Angular Forms
• Understanding ngForm Directive
• Assignment - Creating A Simple Submit And Reset Form
• Template-Driven Form

Angular Reactive Forms

• Understanding FormControl
• Understanding FormGroup
• Dynamic Forms With FormArray
• Understanding FormBuilder
• Validating Form Controls
• Creating Multi Step Reactive Form With Bootstrap (Part 1)
• Creating Multi Step Reactive Form With Bootstrap (Part 2)
• Creating Multi Step Reactive Form With Bootstrap (Part 3)
• Tracking Form Control States (Dirty and Pristine Properties)
• Multiple Validations On Password Field

Custom Form Validators

• Creating Custom Validators
• Custom URL Validator

Route Guards

• Securing Routes With Route Guards
• CanDeactivate Route Guard
• CanActivateChild Route Guard
• Assignment - Login Authentication
• Loading Modules with CanLoad Route Guard
• CanMatch Guard

Lazy Loading

• Introduction to Lazy Loading
• Lazy Loading Of Modules
• Preloading Of Modules
• Relative Question - Preloading Vs. Lazy Loading
• NG17-Deferred Loading
• NG17-@defer with @placeholder
• NG17-@defer with @loading
• NG17-@defer with @error
• NG17-Working with Triggers (on idle)
• NG17-Working with Triggers (on viewport)
• NG17-Working with Triggers (on interaction)
• NG17-Working with Triggers (on hover)
• NG17-Working with Triggers (on immediate)
• NG17-Working with Triggers (on timer)
• NG17-Prefetching of @defer Blocks
• NG17-Defining Custom Triggers

Observables & RxJS

• Understanding Observables & RxJS
• Managing Observables & Subscribers
• Unsubscribing an Observable
• Understanding Async Pipe
• Assignment - Fetching JSON Data With Async Pipe

RxJS Operators

• RxJS {of} Operator
• RxJS {from} Operator
• RxJS {interval} Operator
• RxJS {timer} Operator
• Assignment - Implementing a Loading Spinner with Timer Operator
• RxJS {empty} Operator
• RxJS Pipeable Operators
• RxJS {filter} Operator
• RxJS {map} Operator
• RxJS {mergeMap} Operator
• Assignment - mergeMap() - Displaying the Courses Associated With User
• RxJS {concatMap} Operator
• RxJS {switchMap} Operator

Handling HTTP Calls With Angular

• Making HTTP Calls With HttpClient
• Making HTTP Calls With Observable
• Implementing HTTP POST Request
• Modifying Data With PUT Request
• Removing Data With DELETE Request
• CRUD App#1 Displaying Products With GET Request
• CRUD App#2 Adding Products With POST Request
• CRUD App#3 Fetching Products Data Before Updating
• CRUD App#4 Updating Products With PUT Request
• CRUD App#5 Deleting Products With DELETE Request

Signals - Angular 16

• Introduction to Signals
• Creating Signal
• Updating Signal Value
• Mutating A Signal
• To-Do List Assignment
• Computed Signals
• Understanding effect() Function
• Untracking Signals
• Assignment - Updating The Cart Using Signals

Angular - 17 [All Lectures Collection]

• Introduction to Angular 17
• Getting Started With Angular 17
• Bootstrapping & Utilizing Standalone
• Control Flow Statements @for Loop
• Control Flow Statements (@if & @else)
• Control Flow Statements (@switch)
• Deferred Loading
• @defer with @placeholder
• @defer with @loading
• @defer with @error
• Working with Triggers (on idle)
• Working with Triggers (on viewport)
• Working with Triggers (on interaction)
• Working with Triggers (on hover)
• Working with Triggers (on immediate)
• Working with Triggers (on timer)
• Prefetching of @defer Blocks
• Defining Custom Triggers

eStore Project

• Introduction
• eStore Project Creation
• Installing Bootstrap
• Beginning Header Component
• Adding Search Bar
• Category Dropdown in Search Bar
• Login Link, Wish-list, and Cart Icons
• Category Navigation Bar
• Creating Home Component
• Reorganizing Header and Category Navigation Components Hierarchy
• Creating Error 404 Page
• Side Navigation Component
• Fetching Data into Side Navigation Component
• Products Component
• Styling Product Card
• Fetching Data into Products Component
• Creating Ratings Component
• Installing MySQL
• Creating Database
• Creating Node Server
• Configuring API Route
• Configuring Nodemon
• Connecting To MySQL
• Data Fetching with SQL Query
• Removing getConnection() Call
• Creating Routes With Express
• Configuring Routes with "express.Router()"
• Creating Workspace
• Fetching Categories From Server
• Fetching Categories in Category Navigation Bar
• Introducing State Management
• Populate Header Search Categories
• Define Routes to Fetch Products
• Fetching Products in Products Component
• Query Parameters to Filter Products by Category
• Add Products Store
• Filter Products From Side Navigation Bar
• Filter Products From Category Navigation Bar
• Adding Keywords In Database
• Find Products Using Search Box
• Lazy Loading Home Module and Products Gallery Component
• Creating Product Details Component
• Implementing Shopping Cart - Part 1
• Implementing Shopping Cart - Part 2
• Creating Shopping Cart Component - Part 1
• Creating Shopping Cart Component - Part 2
• Cart Summary and Session Storage
• User Signup API
• Starting User Sign Up Form
• Adding Validations in User Sign Up Form
• Connect Sign Up Form to API
• User Login API + Introduction to JWT
• User Login Form
• Connect User Login Form to API
• Create User Drop Down Menu
• Adding Logout Functionality
• Display Delivery Address In Checkout Screen
• Creating API to Save Order
• Creating Order Service
• Saving Order From Cart
• API to Get Orders List
• Creating Past Orders Component
• Displaying Past Orders and Route Guard

Angular Testing

• Intro - Why Testing? Manual Vs Automated
• Unit Vs. Integrated Vs. End to End
• Jasmine & Karma - First Test
• Jasmine before() and after() Methods
• Unit Tests for Rating Component
• Spies and Mocks
• Unit Testing Forms
• Unit Testing Routes
• Unit Testing HTTP Services
• Integration Test
• Code Coverage