Angular 17 Training Course

Introduction to Angular 17

• Defining Angular and its core concepts
• Comparing Angular with React and Vue
• Overview of Angular 17’s features and architectural changes
• Configuring the development environment

Getting Started

• Initializing a new Angular 17 project via the Angular CLI
• Analyzing the project structure and key files
• Running and serving the application locally
• Displaying data through interpolation and expressions

Components

• Examining the role of components in the Angular 17 ecosystem
• Creating and integrating components
• Facilitating data flow between components using inputs and outputs
• Leveraging 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

• Understanding the utility of pipes in Angular 17
• Utilizing built-in pipes for dates, currency, and JSON formatting
• Developing custom pipes for specific transformation needs

Services

• Exploring the function of services in Angular 17
• Creating and utilizing services for business logic
• Managing dependencies through providers

Modules

• Understanding the purpose of modules in Angular 17
• Creating and utilizing modules for organization
• Importing and exporting modules for reusability

Data Binding

• Differentiating between one-way and two-way data binding
• Implementing property binding, event binding, and two-way binding syntax
• Using template reference variables for element access

Routing

• Understanding the importance of routing in single-page applications
• Defining and configuring application routes
• Navigating between views using routerLink and programmatic navigation
• Handling route parameters, query strings, and fragments

Forms

• Comparing template-driven and reactive forms
• Constructing and validating forms using controls, groups, and arrays
• Applying built-in validators such as required and length constraints
• Developing custom validation logic

HTTP Client

• Understanding the role of the HTTP client in Angular 17
• Executing HTTP requests to interact with backend services
• Processing asynchronous data streams using observables
• Intercepting and modifying HTTP requests and responses

New, Declarative Control Flow

• Explaining the new template control block syntax and its simplification of conditional rendering, looping, and empty state handling
• Demonstrating usage of new blocks such as @if, @else, @switch, @case, @default, @for, and @empty
• Comparing the new syntax with legacy directives like *ngIf, *ngSwitch, and *ngFor
• Highlighting support for zoneless applications utilizing signals

Deferred Loading Blocks

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

View Transitions API

• Detailing the benefits of the View Transitions API for customizing animations and view changes
• Introducing the withViewTransitions directive to enable these transitions
• Illustrating different transition types such as fade, slide, zoom, and flip
• Explaining how the API interacts with the Angular router and browser history

Other Features and Improvements

• Summarizing additional key features and enhancements in Angular 17, including:
• Ability to pass @Component.styles as a string
• Lazy-loadable animation code
• Support for TypeScript 5.2
• Stabilization of the core signal API
• Removal of Node.js v16 support, with v18.13.0 as the minimum requirement
• Esbuild becoming the default builder and Vite powering the default development server