Angular 17 Training Course

Introduction to Angular 17

• Defining Angular and its core concepts.
• Comparing Angular with React and Vue.
• An overview of Angular 17's architectural features.
• Configuring the development environment.

Getting Started

• Initiating a new Angular 17 project via Angular CLI.
• Analyzing the project structure and file organization.
• Executing and serving the application locally.
• Presenting data through interpolation and expressions.

Components

• Understanding the function of components within Angular 17.
• Constructing and applying components.
• Transferring data between components via inputs and outputs.
• Utilizing component lifecycle hooks.

Directives

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

Pipes

• Understanding the role of pipes in Angular 17.
• Using built-in pipes for dates, currency, and JSON formatting.
• Creating and utilizing custom pipes.

Services

• Recognizing the importance of services in Angular 17.
• Building and employing services.
• Injecting dependencies through providers.

Modules

• Understanding the purpose of modules in Angular 17.
• Creating and applying 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.
• Applying template reference variables.

Routing

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

Forms

• Comparing template-driven and reactive forms.
• Building and validating forms using controls, groups, and arrays.
• Applying built-in validators such as required, minLength, and maxLength.
• Developing and using custom validation logic.

HTTP Client

• Understanding the role of the HTTP client in Angular 17.
• Executing HTTP requests to interact with backend services.
• Handling asynchronous data streams with observables.
• Modifying or processing requests and responses using interceptors.

New, Declarative Control Flow

• Explaining the new template control block syntax and its simplification of tasks like conditional rendering and looping.
• Demonstrating the use of new blocks, including @if, @else, @switch, @case, @default, @for, and @empty.
• Comparing the new syntax with traditional approaches like *ngIf, *ngSwitch, and *ngFor.
• Highlighting how the new control blocks support zoneless applications using signals.

Deferred Loading Blocks

• Discussing deferred loading and its impact on web application performance and user experience.
• Introducing the @defer control block for lazy-loading content and dependencies.
• Providing examples of using @defer for loading components, directives, pipes, animations, and styles.
• Explaining the interaction between the @defer block and the view transitions API.

View Transitions API

• Detailing the benefits of the view transitions API for customizing animations between views.
• Introducing the withViewTransitions directive to enable this functionality.
• Illustrating the directive's use with various transition types, such as fade, slide, zoom, and flip.
• Explaining how the view transitions API integrates with the Angular router and browser history.

Other Features and Improvements

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