Angular 17 Training Course

Introduction to Angular 17

• Overview of what Angular is
• Comparative analysis: Angular vs React vs Vue
• Key features and architectural overview of Angular 17
• Configuring the development environment

Getting Started

• Initiating a new Angular 17 project via Angular CLI
• Navigating the project structure and key files
• Executing and serving the application
• Displaying data using interpolation and expressions

Components

• The role of components within the Angular 17 framework
• Techniques for creating and utilizing components
• Data transfer between components using inputs and outputs
• Application of component lifecycle hooks

Directives

• Distinguishing between structural and attribute directives
• Implementing built-in directives such as ngIf, ngFor, and ngSwitch
• Development of custom directives

Pipes

• The function of pipes in the Angular 17 ecosystem
• Using built-in pipes like date, currency, and json
• Creating and applying custom pipes

Services

• The significance of services in Angular 17
• Methods for creating and using services
• Dependency injection using providers

Modules

• The purpose of modules in Angular 17
• Creating and organizing modules
• Importing and exporting module configurations

Data Binding

• Differentiating between one-way and two-way data binding
• Implementing property binding, event binding, and two-way binding syntax
• Utilizing template reference variables

Routing

• The role of routing in Angular 17 applications
• Defining and configuring application routes
• Navigating between routes using routerLink and router.navigate()
• Managing route parameters, query strings, and fragments

Forms

• Comparing template-driven and reactive forms
• Constructing and validating forms using controls, groups, and arrays
• Applying built-in validators such as required, minLength, and maxLength
• Developing custom validation logic

HTTP Client

• The function of the HTTP client in Angular 17
• Generating and executing HTTP requests for backend communication
• Managing asynchronous data streams with observables
• Modifying or handling requests and responses using interceptors

New, Declarative Control Flow

• Understanding the new template control block syntax and its ability to streamline tasks like conditional rendering and looping
• Practical examples using new blocks such as @if, @else, @switch, @case, @default, @for, and @empty
• Comparing the new syntax with legacy directives like *ngIf, *ngSwitch, and *ngFor
• How these control blocks support zoneless applications through signals

Deferred Loading Blocks

• The concept of deferred loading and its impact on performance and user experience
• Utilizing the new @defer block for lazy-loading content and dependencies
• Scenario-based examples for loading components, directives, pipes, animations, and styles
• Interaction between the @defer block and the view transitions API

View Transitions API

• Benefits of the view transitions API for customizing view animations
• Implementing the withViewTransitions directive to enable these features
• Examples of transition types including fade, slide, zoom, and flip
• Integration of the view transitions API with the Angular router and browser history

Other Features and Improvements

• Summary of additional enhancements in Angular 17, including:
• Support for passing styles as a string in @Component
• Lazy-loadable animations code
• Compatibility with TypeScript 5.2
• Stabilization of the core signal API
• Removal of Node.js v16 support, with v18.13.0 as the new minimum requirement
• Esbuild as the default builder and Vite as the default development server