Angular Advanced MasterClass FREE E-Book

Angular Advanced MasterClass & FREE E-Book, available at $84.99, has an average rating of 4.4, with 83 lectures, based on 1314 reviews, and has 11063 subscribers.

You will learn about 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 This course is ideal for individuals who are Software Developers looking to dive deeper into Angular or Software Developers looking to learn how to publish an open-source Angular library It is particularly useful for Software Developers looking to dive deeper into Angular or Software Developers looking to learn how to publish an open-source Angular library.

Enroll now: Angular Advanced MasterClass & FREE E-Book

Summary

Title: Angular Advanced MasterClass & FREE E-Book

Price: $84.99

Average Rating: 4.4

Number of Lectures: 83

Number of Published Lectures: 77

Number of Curriculum Items: 83

Number of Published Curriculum Objects: 77

Original Price: $74.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

Software Developers looking to dive deeper into Angular

Software Developers looking to learn how to publish an open-source Angular library

Target Audiences

Software Developers looking to dive deeper into Angular

Software Developers looking to learn how to publish an open-source Angular library

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 componentwith 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!

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, Whats 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

Instructors

Angular University
Best Selling Angular Courses | 200k+ students | 17 courses

Rating Distribution

1 stars: 26 votes

2 stars: 35 votes

3 stars: 177 votes

4 stars: 466 votes

5 stars: 610 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!