Angular Advanced MasterClass & FREE E-Book

Course Curriculum

Chapter 1: Course Overview and Development Environment Setup

Lecture 1: Angular Advanced Course – Helicopter View

Lecture 2: Recommended Software Versions

Lecture 3: The Typescript Jumpstart Ebook

Lecture 4: Installing Node, NPM, Git, IDE – An Alternative Webstorm Version

Lecture 5: Installing The Lessons Code – Learn About Git Remote vs Local Branches

Lecture 6: Installing Yarn and CLI, Setting Up a Development Server

Chapter 2: Our First Angular Library – The Font Awesome And Material Design Input Boxes

Lecture 1: How to Make The Most Of the Q&A Section

Lecture 2: Demo of Our First Library – Font Awesome And Google Material Icons Input

Lecture 3: Beginning The Implementation Of The Font Awesome Input Box

Lecture 4: Angular Component Styling – Watch Style Isolation In Action

Lecture 5: Learn An Angular CSS Extension Feature – The Host Pseudo Selector

Lecture 6: Component Styling Best Practices – Ensure Solid Styles For Multiple Widget Sizes

Lecture 7: Component API Design – Simpler and More Reusable Components With ng-content

Lecture 8: Understanding ng-content and Style Isolation – Learn The Deep Style Modifier

Lecture 9: ViewChild / @ContentChild Configuration in Angular 8

Lecture 10: The ContentChild Decorator, How Does It Work ? Component Design Best Practices

Lecture 11: ContentChild, Directives and HostListener – Implementing the Input Focus Feature

Lecture 12: Implementing The input Focus Functionality – The HostBinding Decorator

Chapter 3: Styling Angular Components – Best Practices

Lecture 1: Separating Structural Styles From Theme Styles – Making Components Themeable

Lecture 2: How To Create An Alternative Component Theme And Ship It With The Library

Lecture 3: Creating an Alternative Component Theme, See the CLI Sass Support In Action

Lecture 4: Angular Style Isolation – Emulated View Encapsulation – Learn How It Works

Lecture 5: Learn 2 More Alternative Ways of Handling CSS in Angular Applications

Lecture 6: Setting Up A Library Module, Confirming AOT is Supported

Lecture 7: Angular Component Testing Overview

Lecture 8: The Angular CLI Testing Infrastructure – Running Our First Test

Lecture 9: Adding Tests the Font Awesome Input – How to Test a Component

Lecture 10: Angular Component Testing – Producing a More Readable Test Report

Lecture 11: How To Debug Angular Tests

Chapter 4: How to Publish An Angular Library

Lecture 1: How To Publish A Library To a Private Enterprise NPM Repository

Lecture 2: Material Design Input Box – Consolidation Exercise

Lecture 3: Material Design Input Box – Consolidation Exercise Solution

Lecture 4: Introduction To The Angular Library Quickstart Seed Repository

Lecture 5: Learn The Main Benefits of Using The Angular Package Format

Lecture 6: Review And Publication Of An Angular Library In the Angular Package Format

Lecture 7: Final Library Publication Step – Test The Library With Different Consumers

Chapter 5: Writing a Tab Container Component

Lecture 1: Angular Library Demo – A Tab Container With Configurable Look And Feel

Lecture 2: Switching To a New Branch – Reviewing the Tab Container Starting Point

Lecture 3: Angular Component Styling – Commonly Needed Sass Features

Lecture 4: Implementing The Tab Panel Component – Initial Version Up And Running

Lecture 5: Using the Angular Template and Styling Features To Simplify Our HTML and CSS

Lecture 6: Content Projection With @ContentChildren and The AfterContentInit Lifecycle Hook

Lecture 7: The Tab Container Component – See The Initial Implementation Up And Running

Lecture 8: Angular Advanced Features – ng-template , ng-container, ngTemplateOutlet

Lecture 9: Learn Angular Template References And Input Template Partials

Lecture 10: Testing The Tab Container Component

Lecture 11: Angular Component Testing – How To Simulate User interaction

Chapter 6: Modal Component and Structural Directives

Lecture 1: Modal Component and Structural Directives – Section Introduction

Lecture 2: How To Implement a Modal Component – Reviewing The HTML and CSS

Lecture 3: Implementing a Modal Component – The First Version Up And Running

Lecture 4: Configurable Angular Components – Content Projection and Input Templates

Lecture 5: Structural Directives – How Do They Work ? Understanding Their Syntax

Lecture 6: Step-By-Step Implementation of a Structural Directive – Learn ViewContainerRef

Lecture 7: Running Into A Design Issue While Implementing The Modal Close Functionality

Lecture 8: Implementing A General Communication Mechanism For Directive Interaction

Lecture 9: Angular Global Keyboard Handling With EventManager

Lecture 10: Learn Angular Multi-Slot Content Projection

Lecture 11: Completing the Authentication Dialog – Learn How To Use ng-template Inputs

Lecture 12: Preventing Memory Leaks

Lecture 13: Implementing The Modal Tests, What's Next ?

Chapter 7: Advanced Keyboard Handling – The Input Mask Directive

Lecture 1: The Input Mask Directive – Switching Branches

Lecture 2: The Input Mask Directive That We Are About To Build

Lecture 3: Input Mask Directive Skeleton – Learn ElementRef and Native Element Interaction

Lecture 4: Implementing The Mask PlaceHolder Using The Reduce Functional Operator

Lecture 5: HostListener Method Arguments – Blocking Default Keyboard Behavior

Lecture 6: Overwritting the Current Cursor Position

Lecture 7: Implementing The Input Mask Cursor Navigation Functionality

Lecture 8: Digit Validation – Function Types and Polymorphic Programming Without Class

Lecture 9: Digit Validation – Avoiding Writing Special Code For Null And Undefined

Lecture 10: Input Mask – Implementing The Delete and Backspace Behavior

Lecture 11: Finishing The Input Mask – The Select DOM Event and Enabling Text Copy

Chapter 8: Final Example – Payment Widget Modal With Animations

Lecture 1: All Together – Demo Of the Payment Widgets Modal

Lecture 2: Angular Animations – Fade In and Fade Out Animations

Lecture 3: Angular Animations – How To Define a Transition and an Animation Trigger

Lecture 4: Angular Animation Parameters and Animation Lifecycle Hooks

Chapter 9: Conclusions and Bonus Lesson

Lecture 1: Bonus Lecture (Updated August 2024)

Lecture 2: Conclusions and Key Points