Angular 17 Training Course

Introduction to Angular 17

• Defining Angular and its core concepts.
• Comparing Angular with React and Vue.
• Overview of Angular 17 features and architectural changes.
• Setting up the development environment.

Getting Started

• Initiating a new Angular 17 project via Angular CLI.
• Exploring the project structure and file organization.
• Running and serving the application locally.
• Displaying data using interpolation and expressions.

Components

• Understanding the role of components in Angular 17.
• Creating and implementing components.
• Transferring data between components using inputs and outputs.
• Utilizing component lifecycle hooks.

Directives

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

Pipes

• Understanding the utility of pipes in Angular 17.
• Using built-in pipes for dates, currency, and JSON formatting.
• Creating and applying custom pipes.

Services

• Understanding the role of services in Angular 17.
• Creating and utilizing services.
• Injecting dependencies using providers.

Modules

• Understanding the role of modules in Angular 17.
• Creating and using modules.
• Importing and exporting modules.

Data Binding

• Distinguishing 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

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

Forms

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

HTTP Client

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

New, Declarative Control Flow

• Explaining the new template control block syntax and its simplification of tasks like conditional rendering and looping.
• Demonstrating the use of new blocks such as @if, @else, @switch, @case, @default, @for, and @empty.
• Comparing the new syntax with previous directives like *ngIf, *ngSwitch, and *ngFor.
• Discussing support for zoneless applications with signals.

Deferred Loading Blocks

• Explaining deferred loading and its impact on performance and user experience.
• Introducing the @defer control block for lazy-loading content and dependencies.
• Providing examples for loading components, directives, pipes, animations, and styles.
• Discussing the integration of @defer with the view transitions API.

View Transitions API

• Explaining the benefits of the view transitions API for customizing animations.
• Introducing the withViewTransitions directive.
• Showing examples with different transition types like fade, slide, zoom, and flip.
• Discussing integration with the Angular router and browser history.

Other Features and Improvements

• Summarizing additional features and improvements in Angular 17, including:
• Support for passing @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, with v18.13.0 as the minimum version.
• Esbuild as the default builder and Vite as the default dev server.