Angular Core Deep Dive - Beginner To Advanced (Angular 15)

Updated to Angular 15: Learn all the Advanced Features of the Angular Core and Common modules

What you'll learn

Code in Github repository with downloadable ZIP files per section

Understand key questions about Angular: Why Angular, what are the benefits?

Know how to build and style your own custom Angular Components

Learn in detail all the functionality available in Core Directives

Feel comfortable with Intermediate topics like Template Querying, Content Projection, Dynamic Templates and more

Have in-depth knowledge how to build custom Attribute and Structural Directives

Feel comfortable with Advanced topics like View Encapsulation, Change Detection, Dependency Injection, Lifecycle Hooks and more

Learn in detail about custom Modules, custom Pipes and Internationalization (i18n)

Learn all about Angular Elements (Advanced)

Requirements

Just some Javascript, HTML & CSS

No previous knowledge of Angular is required

Starts with Angular Fundamentals, but quickly evolves to Intermediate to Advanced topics

Description

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.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, 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!   Course OverviewThis 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 @ComponentComponents @Input and @Output, event EmittersngForngIfngClassngStylengSwitchObservablesBuilt-In PipesAsync PipeCustom Pipes@Injectable and Custom ServicesLifecycle Hooks (ngOnInit, ngOnDestroy, etc.)HTTP Client - GET POST PUT DELETE@ViewChild and AfterViewInit@ViewChildrenng-content and Component Projection@ContentChild and AfterContentInit@ContentChildrenng-template & ng-containerngTemplateOutletAfterContentChecked and AfterViewCheckedngDoCheckNormal Change Detection@AttributeOnPush Change DetectionCustom Change DetectionView Encapsulation modes@Directive@Host@HostListener@HostBindingStructural Directives@Inject@Optional@Self@SkipSelfHierarchical InjectorCustom Pipe@NgModulehost, host-context, etc.@NgPlural and other i18n featuresAngular ElementsWhat 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.

Overview

Section 1: Introduction

Lecture 1 Angular Core Deep Dive - Helicopter View

Lecture 2 IMPORTANT - Recommended Software Versions

Lecture 3 Course Kickoff - Development Environment Setup

Lecture 4 The Typescript Jumpstart Ebook

Lecture 5 Introduction To Angular - Custom HTML Elements, Model vs View

Lecture 6 Why Angular? Learn the Key Features of Angular Core

Section 2: Angular Components, Core Directives and Pipes

Lecture 7 New Section - Angular Components and Core Directives

Lecture 8 Building our First Angular Component

Lecture 9 Component Inputs and the @Input Decorator

Lecture 10 Angular Component @Output - Custom Events and Event Emitters

Lecture 11 The Angular ngFor Core Directive

Lecture 12 Angular ngIf Directive and the Elvis Operator

Lecture 13 Angular ngClass Core Directive - Learn All Features

Lecture 14 Angular ngStyle Core Directive - When to use it and Why

Lecture 15 Angular ngSwitch Core Directive In Detail

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

Lecture 17 Angular Built-In Pipes - Complete Catalog

Section 3: Angular Local Template Querying In Depth

Lecture 18 Angular View Child Decorator - How Does it Work?

Lecture 19 View Child - Learn the multiple View Query Configuration Options

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

Lecture 21 The View Children Decorator and Query List In Detail

Section 4: Angular Content Projection In Depth

Lecture 22 Angular Content Projection with ng-content In Detail

Lecture 23 Angular Content Child Decorator - In-Depth Explanation

Lecture 24 Angular Content Children and the AfterContentInit Lyfecycle Hook

Section 5: Angular Templates In Depth

Lecture 25 Angular Templates Introduction with ng-template

Lecture 26 Angular Template Instantiation with ngTemplateOutlet

Lecture 27 Angular Templates as Component Inputs

Section 6: Angular Directives In Depth

Lecture 28 Introduction to Angular Attribute Directives

Lecture 29 Angular Host Binding in Detail - DOM Properties vs Attributes

Lecture 30 Angular Host Listener - Handling Events in Directives

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

Lecture 32 Angular Structural Directives - Understanding the Star Syntax

Lecture 33 Angular Structural Directives - Step-by-Step Implementation

Section 7: Angular View Encapsulation In Depth

Lecture 34 Angular View Encapsulation - Under the Hood

Lecture 35 Angular View Encapsulation - the Host Selector

Lecture 36 Bypassing View Encapsulation with the ng-deep modifier

Lecture 37 The Host Context Selector - Theming Use Case

Lecture 38 Angular View Encapsulation - Default vs Shadow DOM

Section 8: Angular Injectable Services In Depth

Lecture 39 Angular Injectable Services - New Section Introduction

Lecture 40 The Angular HTTP Client - GET calls with Request Parameters

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

Lecture 42 Angular Custom Services - The Injectable Decorator

Lecture 43 Angular Custom Service - Fetching Data

Lecture 44 Angular Custom Service - Data Modification with an HTTP PUT

Section 9: Angular Dependency Injection In Depth

Lecture 45 Introduction to the Angular Dependency Injection System

Lecture 46 Angular DI - Understanding Providers and Injection Tokens

Lecture 47 Angular DI - Understanding Simplified Provider Configuration

Lecture 48 Understanding Hierarchical Dependency Injection

Lecture 49 Understanding Angular Tree-Shakeable Providers

Lecture 50 Angular DI - Injection Tokens In Detail

Lecture 51 Angular DI Decorators - Optional, Self, SkipSelf

Lecture 52 Angular DI Host Decorator and Section Conclusion

Section 10: Angular Change Detection In Depth

Lecture 53 Angular Default Change Detection - How does it Work?

Lecture 54 Angular OnPush Change Detection - How does it Work?

Lecture 55 OnPush Change Detection and Observables Data Streams

Lecture 56 Angular Attribute Decorator - When to use it?

Lecture 57 Angular Custom Change Detection with ChangeDetectorRef

Section 11: Angular Lifecycle Hooks In Depth

Lecture 58 Angular Lifecycle Hooks - OnInit and OnDestroy In Detail

Lecture 59 Angular OnChanges Lifecycle Hook

Lecture 60 Angular AfterContentChecked Lifecycle Hook - Use Cases and Pitfalls

Lecture 61 Angular AfterViewChecked Lifecycle Hook - Use Cases and Pitfalls

Lecture 62 Angular Lifecycle Hooks - Complete Overview

Section 12: Angular Modules in Depth

Lecture 63 Introduction to Angular Modules

Lecture 64 Angular Feature Modules In Detail

Section 13: Angular Pipes In Depth

Lecture 65 Angular Custom Pipes - Step-by-Step Implementation

Lecture 66 Angular Impure Pipes In Detail

Section 14: Angular Internationalization (i18n) In Depth

Lecture 67 Introduction to Angular Internationalization (i18n)

Lecture 68 Understanding Angular i18n Unique Identifiers

Lecture 69 Angular i18n Pluralization Support

Lecture 70 Angular i18n Alternative Expressions Support

Lecture 71 Running a Translated Angular Application using the Angular CLI

Section 15: Angular Elements In Depth

Lecture 72 Angular Elements In Detail

Section 16: Conclusion & Bonus

Lecture 73 Bonus Lecture

Lecture 74 Angular Core Deep Dive - Course Conclusion and Key Takeaways

Developers looking to gain some solid fundamentals on the Angular framework