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

• Creating 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

• The role of components in Angular 17
• Creating and utilizing components
• Data transfer between components via inputs and outputs
• Leveraging component lifecycle hooks

Directives

• Distinguishing between structural and attribute directives
• Using built-in directives like ngIf, ngFor, ngSwitch, etc.
• Developing and applying custom directives

Pipes

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

Services

• The function of services in Angular 17
• Creating and employing services
• Injecting dependencies through providers

Modules

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

Data Binding

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

Routing

• The importance of routing in Angular 17
• Creating and configuring routes
• Navigating between routes using routerLink and router.navigate()
• Utilizing route parameters, query parameters, and fragments

Forms

• Differences between template-driven and reactive forms
• Building and validating forms with form controls, groups, and arrays
• Applying built-in validators like required, minLength, maxLength, etc.
• Developing and using custom validators

HTTP Client

• The role of the HTTP client in Angular 17
• Executing HTTP requests to interact with backend services
• Managing asynchronous data streams with observables
• Using interceptors to process HTTP requests or responses

New, Declarative Control Flow

• The new template control block syntax and its role in simplifying conditional rendering, looping, and empty collection handling
• Examples using new blocks like @if, @else, @switch, @case, @default, @for, and @empty
• Comparison with previous syntax such as *ngIf, *ngSwitch, and *ngFor
• How new control blocks support zoneless applications with signals

Deferred Loading Blocks

• The concept of deferred loading and its impact on web application performance and user experience
• The @defer control block for lazy-loading content and dependencies
• Examples of using @defer for loading components, directives, pipes, animations, and styles
• Interaction between the @defer block and the view transitions API

View Transitions API

• Purpose and benefits of the view transitions API for customizing view animations and transitions
• The withViewTransitions directive for enabling the view transitions API
• Examples using withViewTransitions with transition types like fade, slide, zoom, and flip
• How the view transitions API integrates with the Angular router and browser history

Other Features and Improvements

• 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
• Stable core signal API
• Removal of Node.js v16 support; minimum version is now v18.13.0
• Esbuild as the default builder and Vite for the default dev server