Angular 17 Training Course

Introduction to Angular 17

• What is Angular?
• Comparing Angular with 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 file organization
• Executing and serving the application
• Rendering data using interpolation and expressions

Components

• The role of components in the Angular 17 ecosystem
• Creating and implementing components
• Facilitating data exchange between components via inputs and outputs
• Leveraging component lifecycle hooks

Directives

• Distinguishing between structural and attribute directives
• Applying built-in directives like ngIf, ngFor, and ngSwitch
• Developing and utilizing custom directives

Pipes

• The function of pipes in Angular 17
• Using built-in pipes such as date, currency, and json
• Creating and applying custom pipes

Services

• The significance of services in Angular 17
• Creating and deploying services
• Injecting dependencies through providers

Modules

• The role of modules within Angular 17
• Building and utilizing modules
• Managing module imports and exports

Data Binding

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

Routing

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

Forms

• Distinguishing between template-driven and reactive forms
• Building and validating forms with controls, groups, and arrays
• Applying built-in validators like required, minLength, and maxLength
• Implementing custom validators

HTTP Client

• The function of the HTTP client in Angular 17
• Sending HTTP requests to interact with backend services
• Managing asynchronous data streams using observables
• Using interceptors to adjust or process HTTP requests and responses

New, Declarative Control Flow

• Explanation of the new template control block syntax and its advantages in simplifying conditional rendering, loops, and empty collection handling
• Demonstrations of new blocks such as @if, @else, @switch, @case, @default, @for, and @empty
• Comparison of the new syntax against previous patterns like *ngIf, *ngSwitch, and *ngFor
• Discussion on how new control blocks support zoneless applications utilizing signals

Deferred Loading Blocks

• Concept of deferred loading and its impact on performance and user experience
• Introduction to the @defer control block for lazy-loading content and dependencies
• Examples of @defer usage for loading components, directives, pipes, animations, and styles
• Integration of the @defer block with the view transitions API

View Transitions API

• Benefits of the view transitions API for customizing view animations
• Introduction to the withViewTransitions directive
• Examples using the withViewTransitions directive with fade, slide, zoom, and flip transitions
• Interaction between the view transitions API, the Angular router, and browser history

Other Features and Improvements

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