Thank you for sending your enquiry! One of our team members will contact you shortly.
Thank you for sending your booking! One of our team members will contact you shortly.
Course Outline
Introduction
- What is Angular?
- Angular compared to React and 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, and ngSwitch.
- Creating and using custom directives.
Pipes
- Understanding the purpose of pipes in Angular 17.
- Creating and using built-in pipes such as date, currency, and json.
- 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, and form arrays.
- Using built-in validators such as required, minLength, and maxLength.
- Creating and using custom validators.
HTTP Client
- Understanding the role of the 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.
- Providing 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.
- Highlighting 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.
- Providing 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.
- Providing 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
Requirements
- A solid understanding of HTML, CSS, and JavaScript.
- Prior experience with TypeScript and RxJS.
- General web development experience.
Audience
- Developers aiming to learn how to use Angular 17 to build dynamic and responsive web applications.
- Developers looking to upgrade their skills from previous Angular versions.
- Programmers interested in exploring the new features and improvements introduced in Angular 17.
28 Hours
Testimonials (2)
I mostly liked the training flow; she went through the topic, and at the end of the topic, she had well-defined practice sessions for us. She was able to guide us promptly with the issues we faced in the practice sessions.
Rabin Byanjankar - Lument
Course - Angular 17
It was very interactive and informative. The trainer was very patient with us when we didn't understand something and ensured no one was left behind throughout the training.
