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
Apply for Certification
https://www.vskills.in/certification/angular-15-developer-certification-course