Angular 17

• An understanding of HTML, CSS, and JavaScript
• Experience with TypeScript and RxJS
• Web development experience

Audience

• Developers who wish to learn how to use Angular 17 to create dynamic and responsive web applications
• Developers who wish to upgrade their skills from previous versions of Angular
• Programmers who wish to explore the new features and improvements of Angular 17

Angular 17 is the latest version of the popular web framework that introduces many new features and improvements, such as new, declarative control flow, deferred loading blocks, view transitions API, and more.

This instructor-led, live training (online or onsite) is aimed at beginner-level to intermediate-level developers who wish to use the latest features of Angular 17 to build, test, and deploy web applications.

By the end of this training, participants will be able to:

• Set up a development environment that includes Node.js, Visual Studio Code, and Angular CLI.
• Create a basic Angular 17 application that displays data and handles user interactions.
• Use components, directives, pipes, services, and modules to organize and reuse code.
• Use data binding, dependency injection, routing, forms, and HTTP client to communicate with backend services.
• Use the new template control block syntax to simplify common tasks like conditional rendering, looping, and handling empty collections.
• Use the new @defer control block to enable lazy-loading of the block's content and its dependencies.
• Use the new view transitions API to customize the animations and transitions between views.
• Debug and test Angular 17 applications using tools such as Chrome DevTools, Jest, Karma, and Protractor.

Format of the Course

• Interactive lecture and discussion.
• Lots of exercises and practice.
• Hands-on implementation in a live-lab environment.

Course Customization Options

• To request a customized training for this course, please contact us to arrange.

Introduction

• What is Angular?
• Angular vs React vs Vue
• Overview of Angular 17 features and architecture
• Setting up the Development Environment

Getting Started

• Creating a new Angular 17 project using Angular CLI
• Exploring the project structure and files
• Running and serving the application
• Displaying data using interpolation and expressions

Components

• Understanding the role of components in Angular 17
• Creating and using components
• Passing data between components using inputs and outputs
• Using component lifecycle hooks

Directives

• Understanding the difference between structural and attribute directives
• Creating and using built-in directives such as ngIf, ngFor, ngSwitch, etc.
• Creating and using custom directives

Pipes

• Understanding the purpose of pipes in Angular 17
• Creating and using built-in pipes such as date, currency, json, etc.
• Creating and using custom pipes

Services

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

Modules

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

Data Binding

• Understanding the difference between one-way and two-way data binding
• Creating and using property binding, event binding, and banana-in-a-box syntax
• Using template reference variables

Routing

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

Forms

• Understanding the difference between template-driven and reactive forms
• Creating and validating forms using form controls, form groups, form arrays, etc.
• Using built-in validators such as required, minLength, maxLength, etc.
• Creating and using custom validators

HTTP Client

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

New, Declarative Control Flow

• Explaining the new template control block syntax and how it simplifies common tasks like conditional rendering, looping, and handling empty collections
• Giving examples of using the new blocks, such as @if, @else, @switch, @case, @default, @for, and @empty
• Comparing the new syntax with the previous one, such as *ngIf, *ngSwitch, and *ngFor
• Mentioning how the new control blocks support zoneless applications with signals

Deferred Loading Blocks

• Explaining the concept of deferred loading and how it can improve the performance and user experience of web applications
• Introducing the new @defer control block that enables lazy-loading of the block's content and its dependencies
• Giving examples of using the @defer block for different scenarios, such as loading components, directives, pipes, animations, and styles
• Mentioning how the @defer block works with the new view transitions API

View Transitions API

• Explaining the purpose and benefits of the view transitions API, which allows developers to customize the animations and transitions between views
• Introducing the new withViewTransitions directive that enables the use of the view transitions API
• Giving examples of using the withViewTransitions directive with different transition types, such as fade, slide, zoom, and flip
• Mentioning how the view transitions API works with the Angular router and the browser history

Other Features and Improvements

• Briefly summarizing some of the other features and improvements that Angular 17 offers, such as:
• Support for passing in @Component.styles as a string
• Angular's animations code is lazy-loadable
• TypeScript 5.2 support
• The core signal API is now stable
• Node.js v16 support has been removed and the minimum support version is v18.13.0
• Esbuild will be the default builder and the default dev server will use Vite

Summary and Next Steps