Angular 17 Training Course

Introduction to Angular 17

• What is Angular?
• Comparing Angular, React, and Vue
• Overview of Angular 17 features and architectural design
• Setting up the development environment

Getting Started

• Initializing a new Angular 17 project via Angular CLI
• Examining the project structure and file organization
• Executing and serving the application
• Displaying data using interpolation and expressions

Components

• Understanding the role of components within Angular 17
• Creating and utilizing components
• Transferring data between components using inputs and outputs
• Applying component lifecycle hooks

Directives

• Distinguishing between structural and attribute directives
• Utilizing built-in directives such as ngIf, ngFor, ngSwitch, and others
• Developing and implementing custom directives

Pipes

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

Services

• Understanding the purpose of services in Angular 17
• Developing and utilizing services
• Injecting dependencies through providers

Modules

• Understanding the role of modules in Angular 17
• Creating and utilizing modules
• Importing and exporting modules

Data Binding

• Distinguishing between one-way and two-way data binding
• Implementing property binding, event binding, and banana-in-a-box syntax
• Utilizing template reference variables

Routing

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

Forms

• Distinguishing between template-driven and reactive forms
• Creating and validating forms using form controls, form groups, and form arrays
• Applying built-in validators such as required, minLength, and maxLength
• Developing and using custom validators

HTTP Client

• Understanding the role of the HTTP client in Angular 17
• Making HTTP requests to interact with backend services
• Using observables to manage asynchronous data streams
• Employing interceptors to alter or process HTTP requests and responses

New Declarative Control Flow

• Explanation of the new template control block syntax and its simplification of tasks like conditional rendering, looping, and empty collection handling
• Demonstrations of new blocks, including @if, @else, @switch, @case, @default, @for, and @empty
• Comparison between the new syntax and previous implementations like *ngIf, *ngSwitch, and *ngFor
• Discussion on how new control blocks support zoneless applications using signals

Deferred Loading Blocks

• Explanation of deferred loading and its impact on web application performance and user experience
• Introduction to the new @defer control block for lazy-loading content and dependencies
• Examples of using @defer for scenarios involving components, directives, pipes, animations, and styles
• Explanation of how the @defer block integrates with the new view transitions API

View Transitions API

• Explanation of the view transitions API's purpose and benefits for customizing view animations
• Introduction to the new withViewTransitions directive
• Examples of using withViewTransitions with various transition types like fade, slide, zoom, and flip
• Explanation of the view transitions API's interaction with the Angular router and browser history

Other Features and Improvements

• Summary of other key features and improvements in Angular 17, including:
• Support for passing @Component.styles as a string
• Lazy-loadable animations code in Angular
• Support for TypeScript 5.2
• Stabilization of the core signal API
• Removal of Node.js v16 support, with v18.13.0 becoming the minimum version
• Esbuild as the default builder and Vite as the default dev server