Angular 17 Training Course

Introduction to Angular 17

• Fundamentals of Angular.
• Comparative analysis: Angular vs React vs Vue.
• Overview of Angular 17 features and architectural changes.
• Setting up the Development Environment.

Getting Started

• Initializing a new Angular 17 project via Angular CLI.
• Exploring the project structure and key files.
• Running and serving the application locally.
• Displaying data using interpolation and expressions.

Components

• The role of components in the Angular 17 ecosystem.
• Creating and utilizing components effectively.
• Data flow between components using inputs and outputs.
• Leveraging component lifecycle hooks.

Directives

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

Pipes

• The purpose and utility of pipes in Angular 17.
• Applying built-in pipes for dates, currency, JSON, and more.
• Creating and integrating custom pipes.

Services

• The functional role of services in Angular 17.
• Creation and usage of application services.
• Dependency injection via providers.

Modules

• The role of modules in structuring Angular 17 applications.
• Creating 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 the banana-in-a-box syntax.
• Utilizing template reference variables.

Routing

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

Forms

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

HTTP Client

• The role of the HTTP client in Angular 17.
• Executing HTTP requests for backend communication.
• Managing asynchronous data streams using observables.
• Intercepting and modifying HTTP requests and responses.

New, Declarative Control Flow

• Explanation of the new template control block syntax for simplifying conditional rendering, looping, and empty state handling.
• Practical examples using @if, @else, @switch, @case, @default, @for, and @empty.
• Comparison with legacy syntax like *ngIf, *ngSwitch, and *ngFor.
• Support for zoneless applications utilizing signals.

Deferred Loading Blocks

• Concepts of deferred loading for enhancing performance and user experience.
• Introduction to the @defer control block for lazy-loading content and dependencies.
• Scenarios for using @defer with components, directives, pipes, animations, and styles.
• Integration of @defer with the view transitions API.

View Transitions API

• Purpose and benefits of the view transitions API for customizing view animations.
• Introduction to the withViewTransitions directive.
• Examples of transition types including fade, slide, zoom, and flip.
• Interaction between the view transitions API, Angular router, and browser history.

Other Features and Improvements

• Summary of additional features and enhancements in Angular 17, including:
• Support for @Component.styles as a string.
• Lazy-loadability of Angular's animation code.
• TypeScript 5.2 support.
• Stability of the core signal API.
• Removal of Node.js v16 support; minimum supported version is v18.13.0.
• Esbuild as the default builder and Vite for the default dev server.