Development
Web Development
Angular
Angular 8 and 9 - Elements
4.3 (14 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
87 students enrolled

Angular 8 and 9 - Elements

Learn how to create Angular 9 Element and use it in non-angular applications
4.3 (14 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
87 students enrolled
Created by Pravinkumar Dabade
Last updated 2/2020
English
Preview this course
Angular 8 and 9 - Elements
Current price: $44.99 Original price: $69.99 Discount: 36% off
9 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 5 hours on-demand video
  • 40 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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!
Course content
Expand all 63 lectures 05:05:13
+ – Create First Angular Element
8 lectures 31:04
Preparing Angular CLI project for Angular Element development
13:03
Demo - Installing required packages to create Angular Elements in our project
02:25
Demo - Add logic to a component to display "Hello World" title with data binding
03:07
Demo - Add the root module logic to bootstrap Angular Element
03:07
Demo - Bundle Angular Element
02:59
Demo - Using Angular Element in simple HTML page
03:05
Demo - Install and configure Bootstrap 4.x framework in Angular Element project
02:33
Download Source Code
00:45
+ – Angular 8 Changes
3 lectures 13:09
What's new in Angular 8?
07:29
Demo - Angular 8 Element
05:31
Download Source Code
00:09
+ – Angular Element - Communication with DOM
3 lectures 14:43
Create new Angular Element with Input and Output properties
07:54
Demo - Input and Output properties with Angular Element
06:40
Download Source Code
00:09
+ – Integrating Highcharts chart with Angular Element
5 lectures 19:03
Getting ready to use Highcharts chart library with Angular Element project
10:13
Demo - Installing and configuring Highcharts chart library
02:22
Demo - Create Highcharts Angular Element
04:37
Demo - Using Angular Element in simple HTML page
01:42
Download Source Code
00:09
+ – A closer look at REST API build with Node JS, Express JS and Mongo DB
5 lectures 23:09
Introduction to Mongo DB
04:40
Demo - Creating Mongo DB database, collection and inserting the required data
04:47
Introduction to back end application template
03:55
Demo - Installing and understanding the application template of REST API
09:38
Download Source Code
00:09
+ – Passing REST API data to Angular Element
5 lectures 23:11
Demo - Preparing application to accept the data from REST API
04:37
Demo - Writing service and component logic to render Highcharts chart
11:53
Demo - Using Angular Element in a simple HTML
03:38
Demo - Display multi series Highcharts chart
02:54
Download Source Code
00:09
+ – Integrating Angular Material Table with Angular Element
6 lectures 38:35
Introduction Angular Material table
11:38
Demo - Preparing our application for Angular Material table integration
10:15
Demo - Using Angular Element in simple HTML page
06:42
Adding Sorting and Filtering functionality in our Angular Element
05:47
Demo - Modifying Angular project for Sorting and Filtering functionality
04:04
Download Source Code
00:09
+ – Build weather report and forecast widget Angular Element
8 lectures 41:48
Getting a open weather API key to fetch the city wise weather data
02:53
Demo - Getting a open weather API key
06:17
Weather report widget as an Angular Element
10:46
Adding a service to fetch weather report data
05:13
Create current Weather Report components
06:19
Using Weather report widget element in simple HTML page
03:10
Creating forecast Weather Report Angular Element
07:01
Download Source Code
00:09
+ – Using Angular Element in React application
4 lectures 22:13
Using Angular Element in React JS Application
10:21
Demo - Create and run first React application
02:49
Demo - Using Angular element in React application
08:54
Download Source Code
00:09
Requirements
  • 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.
Description

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!