Top Rated Top Rated

Modern Angular

Master the Latest Angular Features to Build Modern Applications. Learn how to use standalone components, signals, the new inject method and much more.

Angular Logo
Angular Logo - Dependency Injection
Angular Logo - Performance
Angular Logo - Forms
Level.Intermediate
Duration.2 days

In this course, you will learn how to use standalone components to build more modular and scalable applications. You will also learn how to use the new inject function for dependency injection. We will also teach you to understand signals and fine-grained reactivity too boost your application's performance. We cover all details of ngOptimized Images, SSR and how to scale component architecture.

Book in-house workshop

Agenda

  • Angular Logo - Templates

    Standalone Components, Directives and Pipes

    • Learn how standalone components change the way how we architect application workspaces

    • Migrate to standalone

    • Standalone applications

    • Is NgModule still valid?

  • Angular Logo - Templates

    New Control Flow

    • Learn how to write angular templates in 2024

    • Migrate to new control flow

    • Benefits & best practices

  • Angular Logo - Dependency Injection

    Dependency injection: New inject method

    • New provider functions

    • New ways to maintain subscriptions: DestroyRef, takeUntilDestroyed

  • Angular Logo - Router

    New router APIs

    • New provider functions

    • Functional guards

    • Functional interceptors

    • Functional resolvers

    • New router provider

    • Router inputs

  • Angular Logo - Performance

    Signals: Angular's new reactive primitive

    • What are signals and how do they work?

    • How to migrate to signals

    • computed as ngOnChanges replacement

    • How to use effects

    • Signal inputs

    • Signal queries

    • How to span the bridge between with RxJS

    • RxJS 🤝 Signals

  • Angular Logo - Performance

    Performance out of the box

    • How does change detection work with signals

    • How to officially go zoneless

    • Learn how to use NgOptimizedImage for better performance

    • New SSR & hydration features

  • Angular Logo - Forms

    Forms: Typed reactive forms

    • Learn how to manage complex forms with the new typed forms API

    • Dynamic form fields with validation

  • Angular Logo - Templates

    Modern Component Architectures

    • Learn how to effectively use the Directive Composition API

    • Reactive state management best practices with Signals & RxJS

    • How to construct highly scalable component architectures

    • Component Architecture Best Practices

    • Learn different architecutre patterns like the Adapter Pattern and the Facade Pattern

  • Nx Logo

    Learn the basics of Nx workspaces

  • Angular Logo - CLI

    Current State tooling:

    • Get to know the advantages of the new bundler: esbuild

    • Master the angular cli

Description

Our Modern Angular course is designed for developers who are already familiar with Angular and want to learn the latest features and techniques for building modern applications. This course is taught by experienced Angular developers who have already got their hands dirty on the latest Angular features.

The course starts with an introduction to standalone components, which are a new feature in Angular 15. You will learn how to use standalone components to build more modular and scalable applications, and how to reuse them across multiple projects.

Next, we will cover the new inject function, which allows you to inject dependencies directly into your components. This makes it easier to write cleaner and more maintainable code, and reduces the amount of boilerplate you need to write.

We will also cover signals and fine-grained reactivity, which are powerful features that allow you to write more efficient and performant applications. You will learn how to use these features to improve the performance of your applications, and how to make your code more responsive to user interactions.

We will also cover typed reactive forms, which where shipped in Angular 14. With typed forms, you can finally build type-safe forms.

In this course we will also dive into the directive composition API which will help you write more efficient and maintainable code, and make it easier to work with complex components

Finally, we will teach you the basics of Nx, which is a powerful tool for building scalable and maintainable Angular applications. You will learn how to setup a Nx workspace, create libraries and implement best practices to structure your application.

Takeaways

  • Learn how to use standalone components to build modular and scalable applications.

  • Understand signals and fine-grained reactivity to make your code more efficient and scalable.

  • Understand how to use the new inject function to inject dependencies directly into your components.

  • Know how to use typed forms to ensure that your forms are always properly validated.

  • Learn how to use provider functions and directive composition API to create powerful and reusable components.

  • Learn how to use Nx to manage your projects and build better applications.

Book in-house workshop