Angular Advanced MasterClass & FREE E-Book
4.6 (61 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
652 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular Advanced MasterClass & FREE E-Book to your Wishlist.

Add to Wishlist

Angular Advanced MasterClass & FREE E-Book

Covers Angular version 4 (formerly Angular 2) - Build Your Own Library, Learn Advanced Angular Features
4.6 (61 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
652 students enrolled
Last updated 7/2017
Current price: $10 Original price: $150 Discount: 93% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 6.5 hours on-demand video
  • 2 Articles
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • learn the most advanced features of Angular
  • learn how to how to build open source Angular libraries
  • Component API Design
  • Component Styling best practices
  • Templates and Template Outlets, ng-content, ng-container, style isolation and customization
  • AOT, global events, debugging with the CLI, @ViewChildren, @ContentChildren
  • Light DOM vs Shadow DOM, @HostBinding, @HostListener, dynamic components
  • Directives, handling keyboard events, testing, animations and more
View Curriculum
  • Angular (formerly known as Angular 2)
  • Typescript

The code repository of this course uses the Angular 4 release, Typescript and the Yarn Package manager.

This course uses the Typescript language, and includes an auxiliary Ebook - The Typescript Jumpstart Ebook

Would You Like to Build Your Own Open Source Library?
Probably all of us developers have thought at some point in time to build our own library and contribute to the overall open source community. The goal of this course is to give you all the tools necessary for you to be able to do your own open source Angular Library.

We will build a series of small open source libraries of progressively increasing difficulty, and we will learn a large number of Angular advanced features in a very fun and practical way.

What Is The Best Way To Learn Advanced Angular Features?
The best way to learn Angular and its most advanced features is to simply take and use it to build something very concrete, like for example an application or a library - and do it in a step-by-step way, as there is no replacement for that experience.

In order to understand a technology, we really need to build something non-trivial with it - blog posts and docs will only get us so far.

This is of course very time-consuming to do without any help because we will have to learn everything by ourselves along the way as we build something, gluing together an endless number of blog posts, documentation and Stackoverflow answers.

So because of this, in order to really dive deep into Angular we will be using it to build a series of small reusable libraries. The goal is to create a practice scenario, and learn the advanced features of Angular in their original use cases, where they make the most sense and so are easier to learn.

What Libraries Will We Build In This Course?
We will be building the following libraries, and learn how to publish them on NPM using the Angular Package Format: We will start by doing a Font Awesome customizable Input Box and learn the advantages of designing our components using content projection over a more input/output based design. At this stage we will also introduce the Angular Testing ecosystem.

Then we will progressively increase the difficulty of each library: we will build a dynamic tab container that allows to receive a template as a component input, effectively allowing to override parts of the component template while keeping a default look and feel for the component.

We will then build a reusable dynamic modal component with customizable content. This component have its contents configurable via either content projection or an input template, and will introduce the notion of Structural Directives.

We will also learn how directives and components of a given module can interact in a transparent way, independently of the place where they are used in the template, using a shared library service. We will then build a Input mask directive, where we will cover some advanced keyboard handling behavior.

At the end of the course, we are going to take all the components and directives that we built in previous sections, and we are going to build one larger example using them: A Payment Modal Widget!

We will then introduce the Angular Animations module, and use it to animate the modal widget, we will see how to define animations that can be reused across components.

What Will you Learn In this Course?
We will learn how to create an AOT compatible library in the Angular Package Format, how to define a library module, how to isolate the styles of a component but still make them customizable, how to design components and directives to make them easier to maintain - making them customizable while at the same time giving the components great default behavior.

We will cover all of the more advanced features of Angular, including Component API Design, Component Styling best practices, Templates and Template Outlets, ng-content, ng-container, style isolation and customization, AOT, global events, debugging with the CLI, @ViewChildren, @ContentChildren, Light DOM vs Shadow DOM, @HostBinding, @HostListener, dynamic components, directives, handling keyboard events, testing, animations and more (this is a non-extensive list).

But more than presenting the features in isolation, we will use them in real use cases which will make the features much easier to learn.

What Will You Be Able to do at the End Of This Course?
By the end of this course you will know many of the most advanced features of Angular, but most of all you will know when to use them and why. You will know how to build open source Angular libraries, and know how to make them available to the open source community on NPM.

With this advanced course, you will have a rock-solid foundation on Angular: you will very likely be able to tackle the more advanced Angular development tasks that you will come across in your day to day job or personal projects.

Have a look at the course free lessons below, and please enjoy the course!

Who is the target audience?
  • Software Developers looking to dive deeper into Angular
  • Software Developers looking to learn how to publish an open-source Angular library
Students Who Viewed This Course Also Viewed
Curriculum For This Course
75 Lectures
Course Overview and Development Environment Setup
5 Lectures 24:29

The Typescript Jumpstart Ebook

Installing Node, NPM, Git, IDE - An Alternative Webstorm Version

Installing The Lessons Code - Learn About Git Remote vs Local Branches

Installing Yarn and CLI, Setting Up a Development Server
Our First Angular Library - The Font Awesome And Material Design Input Boxes
11 Lectures 01:05:58
How to Make The Most Of the Q&A Section

Beginning The Implementation Of The Font Awesome Input Box

Angular Component Styling - Watch Style Isolation In Action

Learn An Angular CSS Extension Feature - The Host Pseudo Selector

Component Styling Best Practices - Ensure Solid Styles For Multiple Widget Sizes

Component API Design - Simpler and More Reusable Components With ng-content

Understanding ng-content and Style Isolation - Learn The Deep Style Modifier

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

ContentChild, Directives and HostListener - Implementing the Input Focus Feature

Implementing The input Focus Functionality - The HostBinding Decorator
Styling Angular Components - Best Practices
11 Lectures 50:24
Separating Structural Styles From Theme Styles - Making Components Themeable

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

Creating an Alternative Component Theme, See the CLI SaaS Support In Action

Angular Style Isolation - Emulated View Encapsulation - Learn How It Works

Learn 2 More Alternative Ways of Handling CSS in Angular Applications

Setting Up A Library Module, Confirming AOT is Supported

Angular Component Testing Overview

Adding Tests the Font Awesome Input - How to Test a Component

Angular Component Testing - Producing a More Readable Test Report

How To Debug Angular Tests
How to Publish An Angular Library
7 Lectures 34:45
How To Publish A Library To a Private Enterprise NPM Repository

Material Design Input Box - Consolidation Exercise

Material Design Input Box - Consolidation Exercise Solution

Introduction To The Angular Library Quickstart Seed Repository

Learn The Main Benefits of Using The Angular Package Format

Review And Publication Of An Angular Library In the Angular Package Format

Final Library Publication Step - Test The Library With Different Consumers
Writing a Tab Container Component
11 Lectures 01:01:01

Switching To a New Branch - Reviewing the Tab Container Starting Point

Angular Component Styling - Commonly Needed SaaS Features

Implementing The Tab Panel Component - Initial Version Up And Running

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

Content Projection With @ContentChildren and The AfterContentInit Lifecycle Hook

The Tab Container Component - See The Initial Implementation Up And Running

Angular Advanced Features - ng-template , ng-container, ngTemplateOutlet

Learn Angular Template References And Input Template Partials

Testing The Tab Container Component

Angular Component Testing - How To Simulate User interaction
Modal Component and Structural Directives
13 Lectures 01:22:35

How To Implement a Modal Component - Reviewing The HTML and CSS

Implementing a Modal Component - The First Version Up And Running

Configurable Angular Components - Content Projection and Input Templates

Structural Directives - How Do They Work ? Understanding Their Syntax

Step-By-Step Implementation of a Structural Directive - Learn ViewContainerRef

Running Into A Design Issue While Implementing The Modal Close Functionality

Implementing A General Communication Mechanism For Directive Interaction

Angular Global Keyboard Handling With EventManager

Learn Angular Multi-Slot Content Projection

Completing the Authentication Dialog - Learn How To Use ng-template Inputs

Preventing Memory Leaks

Implementing The Modal Tests, What's Next ?
Advanced Keyboard Handling - The Input Mask Directive
11 Lectures 01:04:36
The Input Mask Directive - Switching Branches

Input Mask Directive Skeleton - Learn ElementRef and Native Element Interaction

Implementing The Mask PlaceHolder Using The Reduce Functional Operator

HostListener Method Arguments - Blocking Default Keyboard Behavior

Overwritting the Current Cursor Position

Implementing The Input Mask Cursor Navigation Functionality

Digit Validation - Function Types and Polymorphic Programming Without Class

Digit Validation - Avoiding Writing Special Code For Null And Undefined

Input Mask - Implementing The Delete and Backspace Behavior

Finishing The Input Mask - The Select DOM Event and Enabling Text Copy
Final Example - Payment Widget Modal With Animations
4 Lectures 17:23

Angular Animations - Fade In and Fade Out Animations

Angular Animations - How To Define a Transition and an Animation Trigger

Angular Animation Parameters and Animation Lifecycle Hooks
Conclusions and Bonus Lesson
2 Lectures 06:16
Conclusions and Key Points

Hello everyone,

Thank you for completing my course, this is my bonus lecture where I get to tell you a bit about my other online learning resources besides this course.

More courses as the Angular University

The full content of this course is available in my website together with several other courses, more coming all the time, please have a look at it its the Angular University -

FREE Angular 2 For Beginners Course

On the same website you can after registration (no credit card needed) access my 

Free Angular 2 For Beginners Course

which is over 2h and gives you a lot of material for getting started with Angular 2. 

DISCOUNT COUPON for Other Udemy Courses

I will add here over time discount coupons for other courses I have here on Udemy, i will put the courses at very good prices. Please click on the links to see the prices, here they are:

Angular NgRx Store Masterclass - Covers Angular 4

Typescript Masterclass & FREE E-Book

Angular and Firebase - Build a Web App with Typescript

RxJs & Reactive Programming Angular Masterclass - Angular 4

Newsletter, get free lessons

If you want to subscribe to my newsletter to get the latest Angular 2 News and more courses and free lessons, please head over to the Angular University website and scroll down to the bottom.

YouTube Channel

I invite you to subscribe to my YouTube Channel, as I post a lot of lessons there for free, between 25% to one third of the total amount of lessons.

Social Media

These are my social media accounts, please follow me in your preferred platform, my posts are usually either new lessons or reposts of helpful information.

Twitter |  YouTube  | Facebook  | Google+

Again I hope you enjoyed the course, thank you for joining and I hope to see you soon again in one of my courses.

Kind Regards, 


Bonus Lecture: Learn More About The Angular University And My YouTube Channel
About the Instructor
Angular University
4.4 Average rating
1,463 Reviews
12,282 Students
7 Courses
Learn and Keep Up with The Angular Ecosystem

About the Angular University:

The Angular University aims to be the one place that you  go in order to learn and keep up with the Angular ecosystem. We provide premium quality video tutorials, screencast style.

About the course instructor:

Hello, my name is Vasco  and I'm a Software Developer with 17 years of experience, very seasoned building user interfaces with Angular. I've worked as a Frontend Developer/Architect in a large variety of enterprise projects throughout the years.   

I worked on a ton of projects, everything from single page applications to help build the European Criminal Record Information Exchange System, to brand new e-banking portals, to corporate banking portals, and more. I've been a key part of internal framework teams that built frameworks for in-house departments of tens of developers. And that's just a few of them, please check my Linkedin for extensive recommendations.

I also love to teach, write and talk about technology.  I am looking forward to be your Angular  instructor,

Kind Regards,