Angular 17 Training Course

Introduction to Angular 17

• Defining Angular and its core concepts.
• Comparing Angular with React and Vue.
• An overview of Angular 17's features and architectural changes.
• Configuring the development environment.

Initial Setup

• Initializing a new Angular 17 project via the Angular CLI.
• Analyzing the project structure and file organization.
• Executing and serving the application locally.
• Rendering data through interpolation and expressions.

Components

• The function and significance of components in Angular 17.
• Creating and deploying components.
• Data exchange between components via inputs and outputs.
• Utilizing component lifecycle hooks.

Directives

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

Pipes

• The role of pipes in transforming data within Angular 17.
• Using built-in pipes for dates, currency, JSON, and more.
• Developing custom pipes for specific logic.

Services

• The purpose and scope of services in Angular 17.
• Crafting and utilizing services.
• Managing dependencies through providers and injection.

Modules

• The role of modules in structuring Angular 17 applications.
• Creating and utilizing modules.
• Managing module imports and exports.

Data Binding

• Differentiating between one-way and two-way data binding.
• Implementing property binding, event binding, and the banana-in-a-box syntax.
• Leveraging template reference variables.

Routing

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

Forms

• Contrasting template-driven and reactive forms.
• Building and validating forms with controls, groups, and arrays.
• Applying built-in validators like required, minLength, and maxLength.
• Creating and applying custom validation logic.

HTTP Client

• The function of the HTTP client in Angular 17.
• Sending HTTP requests to interact with backend services.
• Processing asynchronous data streams using observables.
• Modifying requests and responses with interceptors.

Declarative Control Flow

• An introduction to the new template control block syntax and its simplification of conditional rendering, loops, and empty state handling.
• Practical examples using @if, @else, @switch, @case, @default, @for, and @empty.
• A comparison with legacy syntax such as *ngIf, *ngSwitch, and *ngFor.
• How these control blocks support zoneless applications utilizing signals.

Deferred Loading

• Understanding deferred loading as a strategy to enhance performance and user experience.
• Introduction to the @defer control block for lazy-loading content and dependencies.
• Scenarios for @defer usage, including components, directives, pipes, animations, and styles.
• Integration of @defer with the View Transitions API.

View Transitions API

• The benefits of the View Transitions API for customizing view animations.
• Using the withViewTransitions directive to enable this functionality.
• Examples of transition types such as fade, slide, zoom, and flip.
• Interaction between the View Transitions API, the Angular router, and browser history.

Additional Features

• A summary of other key improvements in Angular 17, including:
• The ability to pass @Component.styles as a string.
• Lazy-loadability of Angular's animation code.
• Compatibility with TypeScript 5.2.
• Stability of the core signal API.
• Removal of Node.js v16 support, setting v18.13.0 as the minimum requirement.
• Adoption of Esbuild as the default builder and Vite as the default development server.