Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA CompTIA Security+ Amazon AWS AWS Certified Developer - Associate
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Life Purpose Meditation Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Modeling Data Analysis Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Angular

Angular Advanced MasterClass & FREE E-Book

Build Your Own Library, Learn Advanced Angular Features
Rating: 4.4 out of 54.4 (765 ratings)
6,452 students
Created by Angular University
Last updated 2/2021
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • Code in Github repository with downloadable ZIP files per section
  • 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
Curated for the Udemy for Business collection

Course content

9 sections • 78 lectures • 6h 50m total length

  • Preview06:38
  • Recommended Software Versions
    00:14
  • The Typescript Jumpstart Ebook
    03:27
  • Installing Node, NPM, Git, IDE - An Alternative Webstorm Version
    06:06
  • Installing The Lessons Code - Learn About Git Remote vs Local Branches
    03:11
  • Installing Yarn and CLI, Setting Up a Development Server
    05:01

  • How to Make The Most Of the Q&A Section
    03:29
  • Preview03:45
  • Beginning The Implementation Of The Font Awesome Input Box
    08:30
  • Angular Component Styling - Watch Style Isolation In Action
    06:25
  • Learn An Angular CSS Extension Feature - The Host Pseudo Selector
    04:28
  • Component Styling Best Practices - Ensure Solid Styles For Multiple Widget Sizes
    05:58
  • Component API Design - Simpler and More Reusable Components With ng-content
    06:04
  • Understanding ng-content and Style Isolation - Learn The Deep Style Modifier
    09:10
  • ViewChild / @ContentChild Configuration in Angular 8
    00:40
  • The ContentChild Decorator, How Does It Work ? Component Design Best Practices
    06:44
  • ContentChild, Directives and HostListener - Implementing the Input Focus Feature
    05:52
  • Implementing The input Focus Functionality - The HostBinding Decorator
    05:33

  • Separating Structural Styles From Theme Styles - Making Components Themeable
    04:53
  • How To Create An Alternative Component Theme And Ship It With The Library
    04:06
  • Creating an Alternative Component Theme, See the CLI Sass Support In Action
    04:16
  • Angular Style Isolation - Emulated View Encapsulation - Learn How It Works
    06:42
  • Learn 2 More Alternative Ways of Handling CSS in Angular Applications
    04:32
  • Setting Up A Library Module, Confirming AOT is Supported
    04:12
  • Angular Component Testing Overview
    02:30
  • Preview04:51
  • Adding Tests the Font Awesome Input - How to Test a Component
    07:06
  • Angular Component Testing - Producing a More Readable Test Report
    03:31
  • How To Debug Angular Tests
    03:45

  • How To Publish A Library To a Private Enterprise NPM Repository
    05:32
  • Material Design Input Box - Consolidation Exercise
    01:52
  • Material Design Input Box - Consolidation Exercise Solution
    05:13
  • Introduction To The Angular Library Quickstart Seed Repository
    03:33
  • Learn The Main Benefits of Using The Angular Package Format
    05:23
  • Review And Publication Of An Angular Library In the Angular Package Format
    06:05
  • Final Library Publication Step - Test The Library With Different Consumers
    07:07

  • Preview02:21
  • Switching To a New Branch - Reviewing the Tab Container Starting Point
    03:03
  • Angular Component Styling - Commonly Needed Sass Features
    04:08
  • Implementing The Tab Panel Component - Initial Version Up And Running
    08:49
  • Using the Angular Template and Styling Features To Simplify Our HTML and CSS
    06:22
  • Content Projection With @ContentChildren and The AfterContentInit Lifecycle Hook
    05:39
  • The Tab Container Component - See The Initial Implementation Up And Running
    07:18
  • Angular Advanced Features - ng-template , ng-container, ngTemplateOutlet
    06:33
  • Learn Angular Template References And Input Template Partials
    06:25
  • Testing The Tab Container Component
    05:49
  • Angular Component Testing - How To Simulate User interaction
    04:34

  • Preview03:34
  • How To Implement a Modal Component - Reviewing The HTML and CSS
    06:47
  • Implementing a Modal Component - The First Version Up And Running
    04:09
  • Configurable Angular Components - Content Projection and Input Templates
    04:56
  • Structural Directives - How Do They Work ? Understanding Their Syntax
    06:57
  • Step-By-Step Implementation of a Structural Directive - Learn ViewContainerRef
    09:12
  • Running Into A Design Issue While Implementing The Modal Close Functionality
    05:03
  • Implementing A General Communication Mechanism For Directive Interaction
    10:46
  • Angular Global Keyboard Handling With EventManager
    05:06
  • Learn Angular Multi-Slot Content Projection
    08:39
  • Completing the Authentication Dialog - Learn How To Use ng-template Inputs
    07:17
  • Preventing Memory Leaks
    06:06
  • Implementing The Modal Tests, What's Next ?
    04:03

  • The Input Mask Directive - Switching Branches
    03:06
  • Preview02:27
  • Input Mask Directive Skeleton - Learn ElementRef and Native Element Interaction
    04:30
  • Implementing The Mask PlaceHolder Using The Reduce Functional Operator
    08:29
  • HostListener Method Arguments - Blocking Default Keyboard Behavior
    05:06
  • Overwritting the Current Cursor Position
    05:07
  • Implementing The Input Mask Cursor Navigation Functionality
    10:23
  • Digit Validation - Function Types and Polymorphic Programming Without Class
    05:55
  • Digit Validation - Avoiding Writing Special Code For Null And Undefined
    06:06
  • Input Mask - Implementing The Delete and Backspace Behavior
    04:54
  • Finishing The Input Mask - The Select DOM Event and Enabling Text Copy
    08:33

  • Preview03:19
  • Angular Animations - Fade In and Fade Out Animations
    04:29
  • Angular Animations - How To Define a Transition and an Animation Trigger
    05:12
  • Angular Animation Parameters and Animation Lifecycle Hooks
    04:23

  • Other Courses
    02:17
  • Bonus Lecture
    01:27
  • Conclusions and Key Points
    04:49

Requirements

  • Basic knowledge of Angular
  • Typescript

Description

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 this course is for:

  • Software Developers looking to dive deeper into Angular
  • Software Developers looking to learn how to publish an open-source Angular library

Featured review

Danila Vlad
Danila Vlad
22 courses
21 reviews
Rating: 5.0 out of 5a year ago
The course targets areas avoided by most of the other courses, which tend to follow same path of simple, general and easy to achieve tasks. Best that's currently out there, and definitely a must if you consider your angular skills already 'too good'!

Instructor

Angular University
Best Selling Angular Courses | 95,000+ students | 16 courses
Angular University
  • 4.5 Instructor Rating
  • 15,715 Reviews
  • 102,323 Students
  • 17 Courses

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 whole Angular ecosystem. We provide premium quality video tutorials, screencast style.

No matter if you are a beginner, intermediate or advanced in Angular, we have several courses for you.

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.

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

Kind Regards,

Vasco

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.