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 shifts.
• Configuring the development environment.

Getting Started

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

Components

• The role of components within the Angular 17 ecosystem.
• Creation and integration of components.
• Data flow between components via inputs and outputs.
• Leveraging component lifecycle hooks.

Directives

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

Pipes

• The function of pipes in transforming data in Angular 17.
• Applying built-in pipes for date, currency, and JSON formatting.
• Creating and using custom pipes.

Services

• The significance of services in Angular 17 architecture.
• Creation and utilization of services.
• Managing dependencies through providers.

Modules

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

Data Binding

• Understanding one-way vs. two-way data binding.
• Implementing property binding, event binding, and the banana-in-a-box syntax.
• Utilizing template reference variables.

Routing

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

Forms

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

HTTP Client

• The role of the HTTP client in Angular 17.
• Making HTTP requests to interact with backend services.
• Managing asynchronous data streams with observables.
• Using interceptors to modify or handle HTTP requests and responses.

New, Declarative Control Flow

• An introduction to the new template control block syntax and its benefits for simplifying conditional rendering, loops, and empty state handling.
• Practical examples using new blocks such as @if, @else, @switch, @case, @default, @for, and @empty.
• A comparison between the new syntax and legacy directives like *ngIf, *ngSwitch, and *ngFor.
• Discussion on how new control blocks facilitate zoneless applications using signals.

Deferred Loading Blocks

• The 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 applying @defer to components, directives, pipes, animations, and styles.
• Integration of @defer with the new view transitions API.

View Transitions API

• Benefits of the view transitions API for customizing view animations.
• Usage of the withViewTransitions directive to enable these transitions.
• Examples involving transition types such as fade, slide, zoom, and flip.
• Interaction between the view transitions API, the Angular router, and browser history.

Other Features and Improvements

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