Angular 17 Training Course

Introduction to Angular 17

• Defining the scope and purpose of Angular.
• Comparative analysis of Angular, React, and Vue.
• Overview of Angular 17's architectural features and updates.
• Setting up the development environment.

Getting Started

• Initializing a new Angular 17 project via Angular CLI.
• Examining the project structure and file organization.
• Serving and running the application locally.
• Displaying data through interpolation and expressions.

Components

• The role of components within Angular 17.
• Creating and utilizing components.
• Data transfer between components using inputs and outputs.
• Leveraging component lifecycle hooks.

Directives

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

Pipes

• The function of pipes in Angular 17.
• Implementing built-in pipes for dates, currency, and JSON.
• Creating and using custom pipes.

Services

• The role of services in Angular 17.
• Creating and utilizing services.
• Dependency injection via 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.
• Property binding, event binding, and banana-in-a-box syntax.
• Utilizing template reference variables.

Routing

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

Forms

• Template-driven vs. reactive forms.
• Form controls, groups, arrays, and validation.
• Applying built-in validators like required, minLength, and maxLength.
• Implementing custom validators.

HTTP Client

• The role of the HTTP client in Angular 17.
• Making HTTP requests for backend communication.
• Handling asynchronous data streams with observables.
• Using interceptors to modify requests or responses.

New, Declarative Control Flow

• The new template control block syntax and its benefits for simplifying rendering and looping.
• Practical examples of @if, @else, @switch, @case, @default, @for, and @empty blocks.
• Comparison with legacy syntax such as *ngIf, *ngSwitch, and *ngFor.
• Support for zoneless applications with signals.

Deferred Loading Blocks

• The concept of deferred loading and its impact on performance and UX.
• Introduction to the @defer control block for lazy-loading.
• Scenarios for using @defer with components, directives, pipes, animations, and styles.
• Integration with the new view transitions API.

View Transitions API

• Purpose and benefits of the view transitions API.
• Using the withViewTransitions directive.
• Examples of transition types: fade, slide, zoom, and flip.
• Interaction with the Angular router and browser history.

Other Features and Improvements

• Summary of additional enhancements in Angular 17:
• 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.