Angular 8 and 9 – Elements

Angular 8 and 9 - Elements

Learn how to create Angular 9 Element and use it in non-angular applications

What you’ll learn

  • Developers/Students will learn to create Angular 7 and 8 Elements and use them in non Angular applications. They will enable teams/projects in organization to reuse the Angular 7/8 Elements.
  • The takeaway of this course is to use Angular Components in non Angular applications!


  • Developers/Students must know Angular 6/7 along with Typescript. They should have basic knowledge of Bootstrap Framework 3/4. They should have an introductory knowledge of Angular CLI latest version.
  • Having a knowledge of back end development will be an added advantage.


Starting from Angular 2 to 8 framework, Angular comes with number of features which we have used in our Angular applications by designing and developing Angular Components. For example – Rich data binding support, Angular Directives, Pipes, Dependency injection, HTTP Services, Differential Loading, Opt-in Ivy support and many more. How about using these component which uses these features in Non-Angular Applications like jQuery, JavaScript, React JS and other JavaScript frameworks and libraries?

This course is the answer of this question. In this course, we will use Angular Components in Non-Angular applications by bundling them as Angular Elements. Here, you will learn how to create new Angular Elements, bundle them and use them in Non-Angular application.

During the course, we will see number of examples like – Hello World Angular Element, Communication between Angular Element and DOM and vice versa, Using Highcharts chart as Angular Element, Using Angular Material table as Angular Element and developing weather report widgets. Finally, use these elements in React JS application.

Who this course is for:

  • Developers/Students who have a good knowledge of Angular 6/7 and have a good knowledge on Typescript.
  • Developers who wants to use Angular components in non Angular applications like JavaScript, React JS and other JavaScript libraries and frameworks!

Course content

18 sections • 63 lectures • 5h 5m total length
  • Introduction
  • Create First Angular Element
  • Angular 8 Changes
  • Angular Element – Communication with DOM
  • Integrating Highcharts chart with Angular Element
  • A closer look at REST API build with Node JS, Express JS and Mongo DB
  • Passing REST API data to Angular Element
  • Integrating Angular Material Table with Angular Element
  • Build weather report and forecast widget Angular Element
  • Using Angular Element in React application
  • Challenge for Students
  • Students Questions and Answers
  • Multiple Angular Elements
  • Angular Element with Dynamic Contents
  • Angular SPA as Angular Element
  • Angular Element and Slot
  • Create NPM package for Angular Element to use it in Non-Angular applications
  • Migrating Angular 8 applications to Angular 9
Created by: Pravinkumar Dabade, Freelance Consultant and Corporate Trainer
Last updated 2/2020
Direct Download Available
(31 ratings)
177 students

Download link

Add a Comment

Your email address will not be published. Required fields are marked *