Angular 17 Training Course

Introduction to Angular 17

• What is Angular?
• Comparing Angular, React, and Vue
• Overview of Angular 17 features and architecture
• Setting up the Development Environment

Getting Started

• Initiating a new Angular 17 project with Angular CLI
• Examining the project structure and files
• Running and serving the application
• Displaying data using interpolation and expressions

Components

• Understanding the role of components in Angular 17
• Creating and using components
• Passing data between components using inputs and outputs
• Utilizing component lifecycle hooks

Directives

• Distinguishing between structural and attribute directives
• Creating and using built-in directives such as ngIf, ngFor, ngSwitch, etc.
• Creating and using custom directives

Pipes

• Understanding the purpose of pipes in Angular 17
• Creating and using built-in pipes such as date, currency, json, etc.
• Creating and using custom pipes

Services

• Understanding the role of services in Angular 17
• Creating and using services
• Injecting dependencies using providers

Modules

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

Data Binding

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

Routing

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

Forms

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

HTTP Client

• Understanding the role of the HTTP client in Angular 17
• Creating and using HTTP requests to communicate with backend services
• Using observables to handle asynchronous data streams
• Using interceptors to modify or handle HTTP requests or responses

New, Declarative Control Flow

• Explanation of the new template control block syntax and how it simplifies common tasks like conditional rendering, looping, and handling empty collections
• Examples of using the new blocks, such as @if, @else, @switch, @case, @default, @for, and @empty
• Comparison of the new syntax with previous implementations, such as *ngIf, *ngSwitch, and *ngFor
• Note on how the new control blocks support zoneless applications with signals

Deferred Loading Blocks

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

View Transitions API

• Explanation of the purpose and benefits of the view transitions API, allowing developers to customize animations and transitions between views
• Introduction of the new withViewTransitions directive to enable the use of the view transitions API
• Examples of using the withViewTransitions directive with various transition types, such as fade, slide, zoom, and flip
• Note on how the view transitions API interacts with the Angular router and browser history

Other Features and Improvements

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