Angular 17 Training Course

Introduction to Angular 17

• Overview of Angular
• Comparison: Angular vs React vs Vue
• Snapshots of Angular 17 features and architecture
• Configuring the Development Environment

Getting Started

• Initiating a new Angular 17 project via the Angular CLI
• Examining the project structure and file hierarchy
• Executing and serving the application
• Displaying data through interpolation and expressions

Components

• Clarifying the function of components within Angular 17
• Constructing and deploying components
• Transferring data 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
• Developing and utilizing custom directives

Pipes

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

Services

• Defining the role of services in Angular 17
• Building and using services
• Injecting dependencies through providers

Modules

• Understanding the purpose of modules in Angular 17
• 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
• Utilizing template reference variables

Routing

• Understanding the role of routing in Angular 17
• Establishing and configuring routes
• Navigating via routerLink and router.navigate()
• Managing 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 implementing custom validators

HTTP Client

• Understanding the HTTP client's role in Angular 17
• Creating HTTP requests for backend communication
• Handling asynchronous data streams with observables
• Using interceptors to modify or process HTTP requests and responses

New, Declarative Control Flow

• Explaining the new template control block syntax and its role in simplifying conditional rendering, loops, and empty collection handling
• Providing examples using new blocks such as @if, @else, @switch, @case, @default, @for, and @empty
• Comparing the new syntax with legacy patterns like *ngIf, *ngSwitch, and *ngFor
• Highlighting how the new control blocks enable zoneless applications via signals

Deferred Loading Blocks

• Explaining the concept of deferred loading and its positive impact on performance and user experience
• Introducing the new @defer control block for lazy-loading content and dependencies
• Demonstrating @defer usage for loading components, directives, pipes, animations, and styles
• Discussing the interaction between the @defer block and the View Transitions API

View Transitions API

• Detailing the benefits of the View Transitions API for customizing view animations
• Introducing the withViewTransitions directive to activate the API
• Showcasing the directive with transition types like fade, slide, zoom, and flip
• Explaining how the API integrates with the Angular router and browser history

Other Features and Improvements

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