Angular 17 Training Course

Introduction to Angular 17

• Overview of Angular
• Comparing Angular with React and Vue
• Survey of Angular 17 features and architecture
• Configuring the Development Environment

Getting Started

• Initializing a new Angular 17 project with Angular CLI
• Examining the project structure and files
• Running and serving the application
• Displaying data through interpolation and expressions

Components

• Grasping the function of components in Angular 17
• Developing and applying components
• Transferring data between components via inputs and outputs
• Leveraging component lifecycle hooks

Directives

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

Pipes

• Understanding the utility of pipes in Angular 17
• Creating and using built-in pipes such as date, currency, and json
• Developing and applying custom pipes

Services

• Comprehending the role of services in Angular 17
• Building and utilizing services
• Injecting dependencies via providers

Modules

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

Data Binding

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

Routing

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

Forms

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

HTTP Client

• Understanding the role of the HTTP client in Angular 17
• Generating and executing HTTP requests to interact with backend services
• Handling asynchronous data streams using observables
• Using interceptors to modify or manage HTTP requests or responses

New, Declarative Control Flow

• Explaining the new template control block syntax and its ability to streamline tasks like conditional rendering, looping, and handling empty collections
• Providing examples of using the new blocks, such as @if, @else, @switch, @case, @default, @for, and @empty
• Comparing the new syntax with previous implementations like *ngIf, *ngSwitch, and *ngFor
• Noting how the new control blocks support zoneless applications with signals

Deferred Loading Blocks

• Explaining the concept of deferred loading and its potential to enhance performance and user experience in web applications
• Introducing the new @defer control block for lazy-loading block content and dependencies
• Providing examples of using the @defer block in various scenarios, such as loading components, directives, pipes, animations, and styles
• Noting how the @defer block integrates with the new view transitions API

View Transitions API

• Explaining the purpose and benefits of the view transitions API, which allows developers to customize animations and transitions between views
• Introducing the new withViewTransitions directive to enable the use of the view transitions API
• Providing examples of using the withViewTransitions directive with different transition types, such as fade, slide, zoom, and flip
• Noting how the view transitions API interacts 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-loadable Angular animation code
• TypeScript 5.2 support
• Stable core signal API
• Removal of Node.js v16 support, with v18.13.0 becoming the minimum supported version
• Esbuild becoming the default builder, and Vite being used for the default dev server