Angular 17 Training Course

Introduction to Angular 17

• Overview of what Angular is.
• Comparison of Angular against React and Vue.
• A high-level look at Angular 17's features and architecture.
• Steps for setting up the development environment.

Getting Started

• Initiating a new Angular 17 project via Angular CLI.
• Examining the project structure and key files.
• Executing and serving the application.
• Displaying data using interpolation and expressions.

Components

• Explaining the function of components in Angular 17.
• Building and integrating components.
• Facilitating data flow between components via inputs and outputs.
• Applying component lifecycle hooks.

Directives

• Distinguishing between structural and attribute directives.
• Implementing built-in directives like ngIf, ngFor, and ngSwitch.
• Designing and using custom directives.

Pipes

• Clarifying the purpose of pipes within Angular 17.
• Utilizing built-in pipes such as date, currency, and json.
• Developing and applying custom pipes.

Services

• Describing the role of services in Angular 17.
• Creating and deploying services.
• Managing dependencies through providers.

Modules

• Outlining the function of modules in Angular 17.
• Generating and utilizing modules.
• Managing module imports and exports.

Data Binding

• Differentiating between one-way and two-way data binding.
• Applying property binding, event binding, and banana-in-a-box syntax.
• Working with template reference variables.

Routing

• Explaining the significance of routing in Angular 17.
• Defining and configuring routes.
• Navigating between routes using routerLink and router.navigate().
• Incorporating route parameters, query parameters, and fragments.

Forms

• Contrasting template-driven and reactive forms.
• Constructing and validating forms with form controls, groups, and arrays.
• Employing built-in validators like required, minLength, and maxLength.
• Implementing and using custom validators.

HTTP Client

• Highlighting the function of the HTTP client in Angular 17.
• Sending HTTP requests to interact with backend services.
• Handling asynchronous data streams via observables.
• Modifying or handling requests and responses using interceptors.

New, Declarative Control Flow

• Detailing the new template control block syntax and its ability to streamline tasks like conditional rendering, looping, and managing empty collections.
• Providing examples of new blocks, including @if, @else, @switch, @case, @default, @for, and @empty.
• Comparing the new syntax to previous implementations like *ngIf, *ngSwitch, and *ngFor.
• Discussing how the new control blocks facilitate zoneless applications using signals.

Deferred Loading Blocks

• Explaining deferred loading and its potential to enhance web application performance and user experience.
• Introducing the @defer control block for lazy-loading block content and dependencies.
• Illustrating the @defer block in various scenarios, such as loading components, directives, pipes, animations, and styles.
• Explaining the synergy between the @defer block and the view transitions API.

View Transitions API

• Describing the advantages of the view transitions API for customizing animations and view transitions.
• Presenting the withViewTransitions directive to enable this API.
• Demonstrating the directive with various transition types, including fade, slide, zoom, and flip.
• Explaining the interaction between the view transitions API, the Angular router, and browser history.

Other Features and Improvements

• Summarizing additional features and enhancements in Angular 17, such as:
• Ability to pass @Component.styles as a string.
• Lazy-loadable animation code.
• Support for TypeScript 5.2.
• Stabilization of the core signal API.
• Removal of Node.js v16 support, with v18.13.0 becoming the minimum version.
• Esbuild as the default builder and Vite as the default dev server.