Angular 18 - 从初学者到专家 + 面试问题
Angular 18 - Beginner to Expert + Interview Questions
- 1 - Introduction
- 1 -Introduction to Angular v18 (Course Introduction)
- 2 -Angular CLI
- 3 -Understanding Project Structure
- 2 - Angular Fundamentals
- 1 -First Component with Architecture
- 2 -IQ - First Component with Architecture
- 3 -Displaying message dynamically (Interpolation)
- 4 -IQ - Interpolation
- 5 -Task - Display sum of two values
- 6 -Property binding
- 7 -IQ - Property Binding
- 8 -Task - Property binding with image tag
- 9 -Event binding with click event
- 10 -IQ - Event Binding
- 11 -Task - Creating Counter Example
- 12 -Binding other mouse related events
- 13 -Binding keyboard events
- 14 -$event object
- 15 -IQ - $event object
- 16 -Task - Checking Shift key status
- 17 -Task - Keydown to incrementdecrement counter
- 18 -Two way binding (ngModel)
- 19 -IQ - Two way binding (ngModel)
- 20 -Task (Two-way Binding) - Get input field value on button click
- 21 -Task - Simple Cart Calculation - Two way binding
- 3 - Angular Directives
- 1 -Directives Introduction
- 2 -Structural Directives (ngIf)
- 3 -IQ - ngIf directive
- 4 -Task - Implementing show & hide functionality with ngIf
- 5 -Structural Directives (ngFor)
- 6 -IQ - ngFor Directive
- 7 -Structural Directives (ngSwitch)
- 8 -IQ - ngSwitch directive
- 9 -Task Implementing age validation functionality
- 10 -Attribute Directives [ngClass]
- 11 -Task - Toggle functionality using ngClass
- 12 -Attribute Directives [ngStyle]
- 13 -Task [ngStyle] - Changing the color of input field
- 14 -Grouping elements with ng-container
- 15 -HTML templates with ng-template
- 16 -IQ - ng-template Vs. ng-container
- 17 -Task - Display msg if input remains empty (ng-container & ng-template)
- 18 -Rendering templates with ngTemplateOutlet - Part 1
- 19 -Rendering templates with ngTemplateOutlet - Part 2
- 20 -IQ - ngTemplateOutlet Directive
- 21 -Task - Portfolio Builder (Phase 1) - Defining Template
- 22 -Task - Portfolio Builder (Phase 2) - CSS
- 23 -Task - Portfolio Builder (Phase 3) - Binding
- 4 - Component Lifecycle
- 1 -Introduction
- 2 -Component Creation Hook - ngOnChanges()
- 3 -IQ - ngOnChanges()
- 4 -Understanding SimpleChanges Object
- 5 -IQ - SimpleChanges Object
- 6 -Component Creation Hook - ngOnInIt()
- 7 -IQ - ngOnInit()
- 8 -Detecting Custom Changes With ngDoCheck() hook
- 9 -IQ - ngDoCheck()
- 10 -Understanding the ngAfterContentInit() hook
- 11 -IQ - ngAfterContentInit()
- 12 -Checking The Content With ngAfterContentChecked() hook
- 13 -Loading Content With ngAfterViewInit() hook
- 14 -IQ - ngAfterViewInit()
- 15 -Checking The Component View With ngAfterViewChecked() hook
- 16 -Destroying Component With ngDestroy() hook
- 5 - Decorators
- 1 -Introduction To Decorators
- 2 -Class Decorators @NgModule
- 3 -Class Decorators - @Component Decorator
- 4 -Property Decorators - @Input() decorator
- 5 -IQ - @Input() decorator
- 6 -Task - @Input() Decorator
- 7 -Property Decorators - @Output decorator
- 8 -IQ - @Output decorator
- 9 -Task - Using @Input and @Output Together
- 10 -Property Decorators - Accessing Child Components With @ViewChild
- 11 -IQ - @ViewChild decorator
- 12 -Property Decorators - Accessing The Projected Content With @ContentChild
- 13 -IQ - @ContentChild() Decorator
- 14 -Property Decorators - Binding Properties With @HostBinding
- 15 -Method Decorators - Binding Methods To Events With @HostListener
- 16 -Task - Implementing Color Picker
- 17 -Parameter Decorators
- 6 - Angular Pipes
- 1 -Pipes Introduction
- 2 -Task - Implementing the built-in pipes
- 3 -Understanding Slice Pipe
- 4 -Task - Page navigation using slice pipe (Part-1)
- 5 -Task - Page navigation using slice pipe (Part-2)
- 6 -Understanding Number pipe
- 7 -Task - Pound to Kg Converter Using Number Pipe
- 8 -Understanding JSON Pipe
- 9 -Displaying Table Data To JSON string
- 7 - Custom Pipes
- 1 -Creating Custom Pipes
- 2 -IQ - Custom Pipes
- 3 -Task - Creating Custom Pipe For Sorting Numbers
- 4 -Task - Creating Custom Pipe For Letter Count
- 5 -Pure Vs Impure Pipe
- 6 -Using Impure Pipes
- 8 - Angular Routing
- 1 -Routing Introduction
- 2 -Creating a simple route - router-outlet
- 3 -IQ - router-outlet
- 4 -Creating A Navigation Link With “routerLink” Directive
- 5 -IQ - routerLink Directive
- 6 -Creating A NavBar Using Routes
- 7 -Passing Route Parameters (Dynamic Routing)
- 8 -IQ - Dynamic Routing
- 9 -Wildcard Routes - Displaying The ‘404’ Page
- 10 -IQ - Wildcard Routes
- 11 -Understanding Nested Routes
- 12 -IQ - Nested Routes
- 13 -Task - Creating a multi-level menu
- 14 -Redirecting Routes
- 15 -IQ - Redirecting Routes
- 16 -Understanding ActivatedRoute
- 17 -IQ - ActivatedRoute
- 18 -Query Parameters In Routing
- 19 -IQ - Query Parameters In Routing
- 20 -Navigating Routes
- 21 -IQ - navigate() method
- 22 -Task - Displaying Course Details And Fetching The Query Parameters
- 9 - Angular Services
- 1 -Introduction To Services
- 2 -IQ - Introduction to Services
- 3 -Dependency Injection
- 4 -IQ - Dependency Injection
- 5 -Providing Services
- 6 -IQ - Providing Services
- 7 -Injecting services using inject()
- 8 -IQ - inject() function