Angular 8 and 9 – Elements

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction – Why Angular Element?

Lecture 2: Who should take this course?

Lecture 3: Tools and Software Required for this course

Lecture 4: What is Web Component?

Lecture 5: Introduction to Angular CLI

Lecture 6: Installing Angular CLI and creating first Angular application

Chapter 2: Create First Angular Element

Lecture 1: Preparing Angular CLI project for Angular Element development

Lecture 2: Demo – Installing required packages to create Angular Elements in our project

Lecture 3: Demo – Add logic to a component to display "Hello World" title with data binding

Lecture 4: Demo – Add the root module logic to bootstrap Angular Element

Lecture 5: Demo – Bundle Angular Element

Lecture 6: Demo – Using Angular Element in simple HTML page

Lecture 7: Demo – Install and configure Bootstrap 4.x framework in Angular Element project

Lecture 8: Download Source Code

Chapter 3: Angular 8 Changes

Lecture 1: What's new in Angular 8?

Lecture 2: Demo – Angular 8 Element

Lecture 3: Download Source Code

Chapter 4: Angular Element – Communication with DOM

Lecture 1: Create new Angular Element with Input and Output properties

Lecture 2: Demo – Input and Output properties with Angular Element

Lecture 3: Download Source Code

Chapter 5: Integrating Highcharts chart with Angular Element

Lecture 1: Getting ready to use Highcharts chart library with Angular Element project

Lecture 2: Demo – Installing and configuring Highcharts chart library

Lecture 3: Demo – Create Highcharts Angular Element

Lecture 4: Demo – Using Angular Element in simple HTML page

Lecture 5: Download Source Code

Chapter 6: A closer look at REST API build with Node JS, Express JS and Mongo DB

Lecture 1: Introduction to Mongo DB

Lecture 2: Demo – Creating Mongo DB database, collection and inserting the required data

Lecture 3: Introduction to back end application template

Lecture 4: Demo – Installing and understanding the application template of REST API

Lecture 5: Download Source Code

Chapter 7: Passing REST API data to Angular Element

Lecture 1: Demo – Preparing application to accept the data from REST API

Lecture 2: Demo – Writing service and component logic to render Highcharts chart

Lecture 3: Demo – Using Angular Element in a simple HTML

Lecture 4: Demo – Display multi series Highcharts chart

Lecture 5: Download Source Code

Chapter 8: Integrating Angular Material Table with Angular Element

Lecture 1: Introduction Angular Material table

Lecture 2: Demo – Preparing our application for Angular Material table integration

Lecture 3: Demo – Using Angular Element in simple HTML page

Lecture 4: Adding Sorting and Filtering functionality in our Angular Element

Lecture 5: Demo – Modifying Angular project for Sorting and Filtering functionality

Lecture 6: Download Source Code

Chapter 9: Build weather report and forecast widget Angular Element

Lecture 1: Getting a open weather API key to fetch the city wise weather data

Lecture 2: Demo – Getting a open weather API key

Lecture 3: Weather report widget as an Angular Element

Lecture 4: Adding a service to fetch weather report data

Lecture 5: Create current Weather Report components

Lecture 6: Using Weather report widget element in simple HTML page

Lecture 7: Creating forecast Weather Report Angular Element

Lecture 8: Download Source Code

Chapter 10: Using Angular Element in React application

Lecture 1: Using Angular Element in React JS Application

Lecture 2: Demo – Create and run first React application

Lecture 3: Demo – Using Angular element in React application

Lecture 4: Download Source Code

Chapter 11: Challenge for Students

Lecture 1: What is the challenge?

Chapter 12: Students Questions and Answers

Lecture 1: Questions asked by students

Chapter 13: Multiple Angular Elements

Lecture 1: Creating multiple Angular Elements in single Angular application

Chapter 14: Angular Element with Dynamic Contents

Lecture 1: Using ng-content in Angular application

Chapter 15: Angular SPA as Angular Element

Lecture 1: Introduction to MEAN stack Application

Lecture 2: Creating and Testing Angular Element as a SPA

Chapter 16: Angular Element and Slot

Lecture 1: Using Slot in Angular Element for Content Projection

Chapter 17: Create NPM package for Angular Element to use it in Non-Angular applications

Lecture 1: Create NPM package for Angular Element and publish it

Chapter 18: Migrating Angular 8 applications to Angular 9

Lecture 1: Migrating Angular 8.x applications to Angular 9.x

Lecture 2: Example – Migrating Events Portal application from Angular 8.x to Angular 9.x