Angular Deep Dive - Beginner to Advanced (Angular 19) from Udemy

This course will give you a solid foundation on the Angular platform by giving you with an in-depth guide tour of all the advanced features available in the Angular Core and Common modules.

These are the baseline modules from which all other modules in the Angular ecosystem are built with, so this is the part of Angular that you want to learn first, and in as much detail as possible.

Angular has evolved a lot during the years, and since the introduction of Signals there is sometimes more than one way of doing things. In this course we will course each feature both ways where applicable, both with Signals and with decorators.

In this course, you will get an exhaustive guided tour of all the basic and also the advanced functionality available in these two Angular essential modules (including Angular Elements).

This guide will cover everything from the most commonly used features of Angular, up until the most advanced topics of Angular Core, such as the multiple modes of change detection, style isolation, dependency injection, content projection, internationalization, standalone components and more.

The course starts from the beginning, assuming no prior knowledge of Angular. Each concept is introduced based only on previous concepts, so there are no forward references to help with the learning process. Even though the course starts with the essential concepts of Angular, it will quickly evolve into intermediate to advanced topics. So no matter what your current Angular level is, there is something for everyone in this course.

To help you make the most out of the standalone components feature, you have available a full section on how to migrate an existing application to standalone components, and completely remove NgModules from your application.

Course Overview

This course will start with a quick and practical introduction to the Angular framework. You are going to set up your development environment, and using the Angular CLI you will quickly scaffold a small Angular project from scratch.

Using this initial playground, we are then going to answer some of the most common Angular questions: Why Angular, what are its main advantages and key features? We will answer this by demonstrating how the change detection mechanism works, and introduce some of the Angular template syntax.

We will then cover one by one all the features of the Angular Core and Common modules, which include:

Custom components with @Component
Components @Input and @Output, event Emitters
Control flow syntax: @if, @for, @switch
ngFor
ngIf
ngClass
ngStyle
ngSwitch
@defer - Partial template loading
Observables
Built-In Pipes
Async Pipe
Custom Pipes
@Injectable and Custom Services
Lifecycle Hooks (ngOnInit, ngOnDestroy, etc.)
HTTP Client -
@NgPlural and other i18n features
Angular Elements
Angular Standalone Components
Angular Signals

What Will You Learn In this Course?

This course will give you advanced practical knowledge of the Angular framework. After taking this course you will feel very comfortable building Angular Applications, as you will have a detailed understanding of everything that is made available by the Angular framework core modules.

What's inside

Syllabus

Introduction

Angular Core Deep Dive - Introduction

IMPORTANT - Recommended Software Versions

Course Kickoff - Development Environment Setup

The Typescript Jumpstart Ebook

Introduction To Angular - Custom HTML Elements, Model vs View

Why Angular? Learn the Key Features of Angular Core

Angular Components, Core Directives and Pipes

New Section - Angular Components and Core Directives

Building our First Angular Component

Component Inputs and the @Input Decorator

Angular Component @Output - Custom Events and Event Emitters

Angular 17 Control Flow Syntax

The Angular 17 @for syntax

Angular @for @empty, $index and other extra options

Understanding Angular 17 @for tracking functions

What's Next - The ngFor Directive

The Angular ngFor Core Directive

Angular 17 - Comparison between @for and ngFor

Angular 17 - @if Section Introduction

The Angular 17 @if else syntax

What's Next - The ngIf Directive

Angular ngIf Directive and the Elvis Operator

Angular 17 - Comparison between @if vs ngIf

Angular ngClass Core Directive - Learn All Features

Angular ngStyle Core Directive - When to use it and Why

Angular 17 @switch Section Introduction

The Angular 17 @switch syntax in action

Angular ngSwitch Core Directive In Detail

Angular ng-container Core Directive - When to use it?

Angular Built-In Pipes - Complete Catalog

Angular Local Template Querying In Depth

Angular View Child Decorator - How Does it Work?

View Child - Learn the multiple View Query Configuration Options

The AfterViewInit Lifecycle Hook - How deep can we query with View Child?

The View Children Decorator and Query List In Detail

Angular Content Projection In Depth

Angular Content Projection with ng-content In Detail

Angular Content Child Decorator - In-Depth Explanation

Angular Content Children and the AfterContentInit Lyfecycle Hook

Angular Templates In Depth

Angular Templates Introduction with ng-template

Angular Template Instantiation with ngTemplateOutlet

Angular Templates as Component Inputs

Angular Directives In Depth

Introduction to Angular Attribute Directives

Angular Host Binding in Detail - DOM Properties vs Attributes

Angular Host Listener - Handling Events in Directives

Angular Directive Export As syntax - When to Use it and Why

Angular Structural Directives - Understanding the Star Syntax

Angular Structural Directives - Step-by-Step Implementation

Angular View Encapsulation In Depth

Angular View Encapsulation - Under the Hood

Angular View Encapsulation - the Host Selector

Bypassing View Encapsulation with the ng-deep modifier

The Host Context Selector - Theming Use Case

Angular View Encapsulation - Default vs Shadow DOM

Angular Injectable Services In Depth

Angular Injectable Services - New Section Introduction

The Angular HTTP Client - GET calls with Request Parameters

The Async Pipe - a Better way of passing Observable data to the View

Angular Custom Services - The Injectable Decorator

Angular Custom Service - Fetching Data

Angular Custom Service - Data Modification with an HTTP PUT

Angular Dependency Injection In Depth

Introduction to the Angular Dependency Injection System

Angular DI - Understanding Providers and Injection Tokens

Angular DI - Understanding Simplified Provider Configuration

Understanding Hierarchical Dependency Injection

Understanding Angular Tree-Shakeable Providers

Angular DI - Injection Tokens In Detail

Angular DI Decorators - Optional, Self, SkipSelf

Angular DI Host Decorator and Section Conclusion

Angular Change Detection In Depth

Angular Default Change Detection - How does it Work?

Angular OnPush Change Detection - How does it Work?

OnPush Change Detection and Observables Data Streams

Angular Attribute Decorator - When to use it?

Angular Custom Change Detection with ChangeDetectorRef

Angular Lifecycle Hooks In Depth

Angular Lifecycle Hooks - OnInit and OnDestroy In Detail

Angular OnChanges Lifecycle Hook

Angular AfterContentChecked Lifecycle Hook - Use Cases and Pitfalls

Angular AfterViewChecked Lifecycle Hook - Use Cases and Pitfalls

Angular Lifecycle Hooks - Complete Overview

Angular Modules in Depth

Introduction to Angular Modules

Angular Feature Modules In Detail

Angular Pipes In Depth

Angular Custom Pipes - Step-by-Step Implementation

Angular Impure Pipes In Detail

Angular Internationalization (i18n) In Depth

Introduction to Angular Internationalization (i18n)

Understanding Angular i18n Unique Identifiers

Angular i18n Pluralization Support

Angular i18n Alternative Expressions Support

Running a Translated Angular Application using the Angular CLI

Angular Elements In Depth

Angular Elements In Detail

Angular Standalone Components In Depth

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Angular Deep Dive - Beginner to Advanced (Angular 19) with these activities:

Review TypeScript Fundamentals

Show steps

Solidify your understanding of TypeScript syntax, data types, and object-oriented programming concepts before diving into Angular's advanced features. This will make it easier to grasp Angular-specific implementations.

Browse courses on TypeScript

Show steps

Review TypeScript documentation on types and interfaces.
Practice writing TypeScript classes and functions.
Complete online TypeScript tutorials or exercises.

Read 'ng-book: The Complete Book on Angular'

Show steps

Use this book as a reference to solidify your understanding of Angular concepts. It provides a comprehensive overview of the framework and can be helpful for clarifying complex topics.

View ng-book: The Complete Guide to Angular on Amazon

Show steps

Read the chapters relevant to the current course modules.
Try out the code examples provided in the book.
Refer to the book for clarification on complex topics.

Read 'Angular Development with TypeScript, Second Edition'

Show steps

Supplement your learning with a comprehensive guide to Angular development using TypeScript. This book will provide a deeper understanding of the concepts covered in the course.

View Melania on Amazon

Show steps

Read the chapters relevant to the current course modules.
Try out the code examples provided in the book.
Refer to the book for clarification on complex topics.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Implement Component Communication Patterns

Show steps

Reinforce your understanding of component interaction by implementing various communication patterns. This will help you master @Input, @Output, and service-based communication.

Show steps

Create a parent component that passes data to a child component using @Input.
Implement a child component that emits events to a parent component using @Output.
Build a service to share data between unrelated components.

Write a Blog Post on Angular Signals

Show steps

Deepen your understanding of Angular Signals by explaining the concept in a blog post. This will force you to articulate the key features and benefits of Signals.

Show steps

Research Angular Signals and their use cases.
Write a clear and concise explanation of Signals.
Include code examples to illustrate the concept.
Publish your blog post on a platform like Medium or Dev.to.

Build a Simple CRUD Application

Show steps

Apply your knowledge by building a CRUD (Create, Read, Update, Delete) application using Angular. This will solidify your understanding of components, services, and HTTP client.

Show steps

Design the data model for your application.
Create Angular components for displaying and editing data.
Implement services to interact with a backend API.
Add routing to navigate between different views.

Contribute to an Angular Open Source Project

Show steps

Gain practical experience and contribute to the Angular community by contributing to an open-source project. This will expose you to real-world challenges and best practices.

Show steps

Find an Angular open-source project on GitHub.
Identify an issue or feature you can contribute to.
Submit a pull request with your changes.
Respond to feedback from the project maintainers.

Career center

Learners who complete Angular Deep Dive - Beginner to Advanced (Angular 19) will develop knowledge and skills that may be useful to these careers:

Frontend Developer

A Frontend Developer builds the user interface of websites and applications. This course helps build a foundation in Angular, a popular framework for frontend development. The course covers essential Angular concepts like components, directives, pipes, and services, all of which are crucial for building interactive user interfaces. By understanding Angular's core modules and features of Angular, such as change detection and dependency injection, a Frontend Developer can create more efficient and maintainable applications. Learning about Angular standalone components is also vital. This course may be particularly useful for aspiring frontend developers.

See salaries and explore the career path for Frontend Developer

UI Engineer

A UI Engineer focuses on the implementation of user interfaces, ensuring they are both visually appealing and functional. This course is valuable as it dives deep into Angular, a powerful framework for building complex UIs. The course covers essential aspects of Angular, such as custom components, templates, and directives, which enable a UI Engineer to create dynamic and interactive user interfaces. Understanding Angular's view encapsulation and change detection mechanisms can help optimize UI performance and maintainability. The new structural directives might be helpful.

See salaries and explore the career path for UI Engineer

Web Application Developer

A Web Application Developer specializes in building interactive web applications. This course provides a comprehensive understanding of Angular, which is frequently used in web application development. The course can help build a foundation in Angular fundamentals and advanced topics like change detection, dependency injection, and internationalization. With knowledge of Angular standalone components, a Web Application Developer to build modern web applications that offer rich user experiences. The course's practical examples help to create efficient and well structured web applications. The new angular components can be useful.

See salaries and explore the career path for Web Application Developer

Full-Stack Developer

A Full Stack Developer works on both the frontend and backend of web applications. This course can be valuable as it provides a deep understanding of Angular, a leading frontend framework. The course covers essential frontend topics, including custom components, event emitters, control flow syntax, and built in pipes. By mastering these concepts, a Full Stack Developer can create robust user interfaces that interact seamlessly with backend systems. The course's coverage of Angular services and dependency injection can help manage data flow and application logic effectively. Full stack developers can also use Angular to build single page applications. Course topics like lifecycle hooks will be quite helpful.

See salaries and explore the career path for Full-Stack Developer

JavaScript Developer

A JavaScript Developer uses JavaScript to build interactive web applications. This course on Angular is useful by teaching a popular JavaScript framework. It covers Angular's core components, directives, pipes, and services, which are essential for building complex applications, so this course can help Javascript Developers. The course's practical approach to Angular development, including setting up the development environment and scaffolding an Angular project, can help a JavaScript developer get started. Angular provides a structured approach to building single page applications.

See salaries and explore the career path for JavaScript Developer

Software Engineer

A Software Engineer designs, develops, and tests software applications. This course on Angular may be useful by providing in-depth knowledge of a popular framework for building web applications. Learning Angular's core concepts, such as components, directives, and services, helps to build modular and maintainable code. The course's coverage of advanced topics like change detection and dependency injection enables a Software Engineer to optimize application performance and structure. Software engineers might also be interested in angular elements. This course may be valuable for any software engineer looking to enhance their web development skills.

See salaries and explore the career path for Software Engineer

Technical Lead

A Technical Lead manages a team of developers and guides technical decisions. This Angular course helps provide a comprehensive understanding of the Angular framework, so this course may be useful. The course covers Angular's core concepts, advanced features, and best practices, which are essential for leading a team of Angular developers. Understanding Angular's architecture, change detection, and dependency injection will enable a Technical Lead to make informed decisions about technology stacks and development strategies. This course can help a technical lead successfully guide their team.

See salaries and explore the career path for Technical Lead

Technical Consultant

A Technical Consultant advises clients on technology solutions to improve their business processes. This course is valuable as it provides a comprehensive understanding of Angular, a leading framework for building modern web applications. The course covers Angular's architecture, components, and modules, which are essential for designing scalable and maintainable solutions. Understanding Angular's design patterns, dependency injection, and change detection helps consultants recommend the best approach for their clients' needs. The various directives covered might be useful.

See salaries and explore the career path for Technical Consultant

Application Architect

An Application Architect designs the structure and components of software applications. This Angular course may be useful, providing a deep understanding of the Angular framework. This course covers Angular's modularity, dependency injection, and design patterns, which are crucial for building scalable and maintainable applications. Understanding Angular's architecture helps to make informed decisions about technology stacks and development strategies. The new Angular CLI, which allows you to scaffold Angular projects, can be useful. The standalone components are also potentially quite helpful.

See salaries and explore the career path for Application Architect

Solution Architect

A Solution Architect designs and implements comprehensive technology solutions for businesses. This course helps provide a solid foundation in Angular, a popular framework for building modern web applications. The course covers Angular's architecture, components, and modules, which are crucial for designing scalable and maintainable solutions. Understanding Angular's dependency injection, change detection, and internationalization features will enable a Solution Architect to build solutions that meet the needs of different users and environments. The standalone components are a useful feature.

See salaries and explore the career path for Solution Architect

Software Development Manager

A Software Development Manager oversees the development process and manages software development teams. This course on Angular may be useful by providing a strong understanding of the Angular framework. This course covers Angular's architecture, components, and modules, which are important for managing Angular projects. The manager should fully understand the angular concepts, as well as the advantages and key features of Angular core. This can help Software Development Managers looking to enhance their knowledge of modern web development technologies.

See salaries and explore the career path for Software Development Manager

Quality Assurance Engineer

A Quality Assurance Engineer tests software to ensure it meets quality standards. This course on Angular may be useful by providing a deeper understanding of the Angular framework, so this course may be helpful. The course covers Angular's components, directives, and services, which are important for testing Angular applications. A Quality Assurance Engineer can use this knowledge to develop more effective test cases and identify potential issues. This course may be valuable for any quality assurance engineer looking to enhance their web development testing skills.

See salaries and explore the career path for Quality Assurance Engineer

Web Designer

A Web Designer focuses on the visual aspects of websites and user interfaces. This course on Angular may be useful by providing a basic understanding of how Angular is used to build interactive web applications. While a Web Designer may not need to know all the details of Angular development, an understanding of the core concepts, such as components and templates, can help them collaborate effectively with developers. Web designers should pay close attention to the introductory sections of this course, which discuss custom HTML elements, model versus view, and other concepts.

See salaries and explore the career path for Web Designer

UX Designer

A UX Designer focuses on enhancing user satisfaction by improving the usability, accessibility, and overall experience of a product. While this course focuses on Angular development, understanding how Angular is used to build interactive web applications can be beneficial for a UX Designer. The course covers concepts such as components, templates, and data binding, which are crucial for creating dynamic user interfaces. A basic understanding of Angular can also help UX Designers communicate more effectively with developers and ensure that the user interface is implemented according to their designs.

See salaries and explore the career path for UX Designer

Cloud Engineer

A Cloud Engineer manages and maintains cloud-based infrastructure and applications. While this course focuses on Angular, a frontend framework, understanding how web applications are built is valuable in a cloud environment. This course covers Angular's components, modules, and services, which are essential for building scalable and maintainable web applications. Understanding Angular's architecture can help a Cloud Engineer make informed decisions about deploying and managing web applications in the cloud. Knowing about Angular CLI can also be helpful.

See salaries and explore the career path for Cloud Engineer

Angular Deep Dive - Beginner to Advanced (Angular 19)

What's inside

Syllabus

Save this course

Activities

Career center

Reading list

Share

Similar courses