Angular 10 Masterclass with TypeScript, Firebase, & Material
4.2 (748 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.
54,271 students enrolled

Angular 10 Masterclass with TypeScript, Firebase, & Material

Master and build reactive Single Page Applications(SPA) from scratch using Angular (formerly "Angular 2" or "AngularJS")
Bestseller
4.2 (748 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.
54,271 students enrolled
Created by Siddharth Ajmera
Last updated 7/2020
English
English [Auto]
Current price: $58.99 Original price: $84.99 Discount: 31% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 17 hours on-demand video
  • 1 article
  • 51 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • 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
  • Built a Single Page Application using Angular
  • Using TypeScript
  • Implementing various building blocks in Angular
  • Using Third Party Modules like Angular Material and AngularFire 2
Requirements
  • NodeJS Installed
  • Basic knowledge of NodeJS, NPM, node_modules
  • We'll use AngularCLI, so make sure that it's installed as well.
  • We'll use Visual Studio Code as our IDE
  • You should know JavaScript
  • Experience with Object Oriented Programming is a plus
Description

Angular is one of the most popular front-end frameworks for building single-page applications or web apps with HTML, CSS, and TypeScript. So basically, if you want to become a successful front-end or a full-stack developer, that get hired, you need to have Angular as a skill under your belt.

Learning Angular 2 or Angular 4/5/6/7/8/9 or Angular 10 or simply Angular(as the Angular team likes to call it) on your own can be confusing or frustrating at times. It might require you to browse through several tutorials, articles, YouTube videos, etc, and get a grip on it.

If you want to get rid of going through all that trouble and just focus on learning Angular, this is THE course for you. In this course, I'll take you through an exciting journey of learning Angular concepts through fun and easy to understand coding examples.

______________________________________________________________________________________________________________________________

As the course progresses, you'll get familiar with:

  1. Single Page Applications and why should we use Angular to build them

  2. TypeScript and ESNext( ECMAScript 2015 or ES6 and later versions of it)

  3. Angular Modules, the @NgModule Decorator and Angular Application Bootstrap Mechanism

  4. Angular Components, the @Component Decorator, component communication and LifeCycle Hooks

  5. Directives, the @Directive Decorator, and creating custom structural and attribute directives.

  6. Dependency Injection In Angular, the @Injectable Decorator, Services, RxJS Observables and making AJAX Calls to REST APIs

  7. Routing, Child Routing, and Route Guards

  8. Pipes the @Pipe Decorator, and creating custom pure pipes and impure pipes.

  9. Template Driven Forms and Reactive Forms in Angular

  10. Custom Decorators

  11. Using third-party libraries like Angular Material, Firebase, etc.

Section 1 - Single Page Applications, Why Angular and Project Setup:

  1. Course Overview

  2. Introduction to SPA

  3. What do we need Angular for?

  4. Setting up the Development Environment.

  5. Angular Application Architecture

  6. Angular CLI

  7. Project Structure

Section 2 - TypeScript and ESNext:

  1. What is TypeScript

  2. Basic Types in TypeScript

  3. Variable Declarations using Let and Const

  4. Spread and Destructure.

  5. Classes

  6. Interfaces

  7. Arrow Functions

  8. Modules

  9. fetch API

  10. async / await

Angular Modules and Angular Components

  • @NgModule

  • Angular Application Bootstrap Mechanism

  • @Component

  • Data/Property Binding

  • View Encapsulation

  • Inter-component Communication (@Input/@Output, Event Emitter)

  • Template variables (ViewChild/ContentChild)

  • Content Projection(ng-content)

  • Templates – will be covered as part of components

  • Metadata – basic overview

  • Lifecycle hooks

  • Order and triggering of each hook

  • Hooks specific to Components and Decorators

Dependency Injection(Providers)

  • Dependency Injection - Why?

  • Dependency Injection - As a design pattern

  • Dependency Injection - As a framework

  • Dependency Injection - What?

  • Injectors and Providers

  • Hierarchical Dependency Injection

Routing

  • Child routes

  • Route params

  • Route Guards - CanActivate, CanActivateChild, CanDeactivate, Resolve, CanLoad

Services(@Injectable)

  • Service as a singleton, data sharing.

  • HttpClient, HttpHeaders, HttpParams

  • Observables with Operators like the map, subscribe, catch, retry etc

  • Subjects

  • Sharing data across Components using Service

Directives(@Directive)

  • Built-In Structural Directives - NgFor, NgIf, NgSwitch

  • Built-In Attribute Directives - NgClass, NgStyle, NgNonBindable

  • Building a Custom Structural Directive

  • Building a Custom Attribute Directive

Pipes(@Pipe)

  • Build-in Pipes

  • Building Custom Pipes

  • Pure and Impure Pipe

Forms

  • Template Driven Forms

  • Reactive forms

  • Form Validations

  • Custom Synchronous form validations

  • Custom Asynchronous form validations

Custom Decorators

  • Metadata – deep dive

  • Building Custom Class Decorator

  • Building Custom Property Decorator

Integrating with Third-Party Libraries

  • Material Design Bootstrap

  • Angular Material

  • Firebase

______________________________________________________________________________________________________________________________

By the end of this course, you'll be able to: 

  • Build end-to-end Single Page Apps in Angular on your own

  • Understand and fix common compile-time and run-time errors in minutes

  • Understand and implement clean and maintainable code like a professional

  • Apply best practices when building Angular apps

We'll always start with the basics and go from there. Right from the beginning of the second module, you'll jump in and build your first Angular app within minutes.

Angular 2 and all the later versions of Angular has been written in TypeScript. So, before getting started with Angular in section 3, you'll learn the fundamentals of TypeScript and object-oriented programming in section 2 to better understand and appreciate this powerful framework. 

Over the next 15 hours, you'll learn the essentials of building Single Page Applications(SPAs) with Angular

  • Displaying data and handling DOM events

  • Building reusable components

  • Manipulating the DOM using directives(both Structural and Attribute)

  • Transforming data using pipes

  • Building template-driven and reactive forms 

  • Consuming REST APIs using HTTP services 

  • Handling HTTP errors properly 

  • Using Reactive Extensions and Observables 

  • Adding routing and navigation to adhere to the basics of a Single Page Application

  • Building real-time, server-less apps with Firebase 

  • Building beautiful UIs using Angular Material, and Material Design Bootstrap

So, if you're a busy developer with limited time and want to quickly learn how to build SPAs with Angular, you're at the right place.

All these topics are covered by over 15 hours of high-quality content. Taking this course is equivalent to going through hundreds of articles, tutorials, and videos on the web! Just that the content is laid out to cover all that you'll get to know during all that time! Once you go through the course(or just the preview videos), you'll know that the topics are explained in a  clear and concise manner which is going to save you a lot of your precious time! This course is also packed with techniques and tips, that you can only learn from a seasoned developer. You'll see how we'll create a brand new Angular project with Angular CLI and build an application from A to Z, step-by-step.

You'll also get to know ways to build a real-time SPA with Angular, Firebase, and Bootstrap. This application exhibits patterns that you see in a lot of real-world applications:

  • Master/detail

  • CRUD operations

  • Interaction with a data store

  • Forms with custom validation

  • And a lot more...!

PREREQUISITES

You don't need familiarity with TypeScript or any previous versions of Angular. You're going to learn both TypeScript and Angular from scratch in this course.

______________________________________________________________________________________________________________________________

WHAT OTHER STUDENTS WHO HAVE TAKEN THIS COURSE SAY:

"Explanation is crisp.. instructor is comfortable with the topic...examples used are good and easy to understand...various aspects of the code are explained...using MDB and material for angular both are covered for creating UI components...just only the full screen is shown at all times.. which makes things appear very small... screen highlight or zoom is not used while recording video.. rest all is great.. for learning angular" - Maneesh Parihar

"內容詳細" - Huang JiaLin

"That's a very comprehensive course on Angular that also teaches Angular Material and Firebase @Siddharth Ajmera: Thanks for this great course! As with so many other courses I would love to see some Summaries or cheatsheets as PDFs or foils and also I'd appreciate to see more schematics, graphs, and sketches." - He

"講解詳細" -曾玟凱

"This course was perfect for beginners like me. I learned so much from it. Thanks a lot Siddharth for such a good course. Looking forward to more courses from you. Can you please add a section that demonstrates building of an application end to end?" - ankita daur

"Siddarth explained the course in a very simple manner and with simple examples. Would love more indepth on Angular Material and Firebase from him. Great course." - Kumar

"There is so much information provided in this course. I was looking for custom Decorators and use cases where in they could be implemented to make the code cleaner. I found perfect examples on similar topics in this training. This course is great for beginners." - Kewal Shah

______________________________________________________________________________________________________________________________

30-DAY FULL MONEY-BACK GUARANTEE

This course comes with a 30-day full money-back guarantee. Take the course, watch every lecture, follow along while coding, and if you are not happy for any reason, contact Udemy for a full refund within the first 30 days of your enrolment. All your money back, no questions asked.

ABOUT YOUR INSTRUCTOR

Siddharth is a software engineer with around 5 years of professional experience. He is the author of this course with more than 15,000 students in 192 countries. He has done his Bachelor of Engineering in Computer Science. He has worked on several Modern Web Applications. Chatbots, and frameworks. He writes articles about Angular, and Chatbots on Medium.

What are the requirements?

  • Basic familiarity with HTML, CSS, and JavaScript

  • NO knowledge of AngularJS or Angular is required

What am I going to get from this course?

  • Establish yourself as a skilled professional developer

  • Build real-world Angular applications on your own

  • Troubleshoot common Angular errors

  • Master the best practices

  • Write clean and elegant code like a professional developer

What is the target audience?

  • Developers who want to upgrade their skills and get better job opportunities

  • Front-end developers who want to stay up-to-date with the latest technology

  • Back-end developers who want to learn front-end development and become full-stack developers

  • Hobbyist developers who are passionate about working with new frameworks

Who this course is for:
  • Anyone who wants to learn Angular
  • Anyone interested in building Single Page Applications
  • Anybody who wants to know Angular in depth
  • Anyone who wants to learn TypeScript, Firebase and Angular Material
Course content
Expand all 111 lectures 17:00:05
+ Single Page Applications, Why Angular, and Getting Started
7 lectures 42:07

This video introduces me(your instructor) and then talks about the course overview and the things that we're going to cover as a part of this course.

Preview 02:09

This video gives you an understanding of single-page applications and the behaviors exhibited by them. In doing so, we compare that with the behavior exhibited by a normal website.

We also examine a [normal website](https://mvmtwatches.com) and a [single page application](http://angular.io) to understand things in a better way.

Preview 10:11

This video elaborates on the reasons for using Angular as the front-end ecosystem for building Single Page Applications.

Angular is an ecosystem and consists of the following:

  • Angular

  • Protractor

  • Forms

  • PWA

  • Augury

  • Language

  • Services

  • Router

  • Elements

  • CDK

  • Compiler

  • Material

  • Universal

  • Karma

  • Labs

  • I18N

  • HTTP

  • Animations

  • CLI

Angular can be used to build:

  • Web Apps out of the box.

  • Progressive Web Apps with the @angular/pwa schematic

  • Hybrid Mobile Apps for iOS and Android with Ionic

  • Hybrid Mobile Apps for iOS and Android with NativeScript

  • Desktop Apps with Electron.JS

Plus Angular has features like:

  • Dependency Injection

  • Lazy Loading

  • Libraries

  • Performance

  • Templates

All these features make Angular a superheroic end to end ecosystem of tools you'll ever need.

Preview 06:26

In this video, we talk about setting up the development environment that we'll need to build Single Page Applications with Angular.

You can find the instructions in the attached PDF file.

Preview 08:13

This video will give you a brief understanding of how to logically think of an Angular App. Every Angular app can be considered as a tree of components.

Preview 03:30

We'll create our first Angular App in this video using AngularCLI.

Preview 10:51
+ TypeScript and ESNext
13 lectures 01:56:56

This video talks about TypeScript and it's benefits.

We also have a look at the concepts that we're going to go over in this section:

  • Variable declarations(let and const)

  • Static types

  • Spread

  • Destructure

  • Rest

  • Classes

  • Interfaces

  • Generics

  • Arrow Functions

  • Modules and Namespaces

  • fetch

  • async/await

  • etc.

Preview 04:04

In this video, we're going to set up the development environment to write TypeScript and then get it validated and compiled by the TypeScript Compiler.

You can optionally use StackBlitz for the same.

Preview 07:54

We'll discuss var, the issues with it, and how "let" and const fix them.

Variable declarations(var, let, and const)
14:28

In this video, we'll talk about primitive data types like number, boolean, string, null, and undefined.

Types - Primitives
07:35

I'll explain the following types to you:

  • void

  • Array<type>

  • Tuple

  • Objects

  • enum

  • any(special)

Types - Reference and Special Types
11:23

In this video, I talk about the Spead and the Backticks operator.

The Spread Operator:

  • Spreads the elements of array or object

  • Used for merging multiple arrays/objects into one flat array/object

  • Is denoted by triple dot (...)

The Backticks Operator is:

  • Used to wrap around stings.

  • Used with ${variable} to append the value of a variable to the string.

  • Stringifies objects and arrays.

Operators - Spread and Backticks
10:01

We discuss the destructure and the rest parameter operators in this video.

Destructure:

  • Breaks up the structure of an object or array

  • Plucking elements from an object or array

  • Variable wrapped in “{ }” for objects, and “[ ]” for arrays

  • Generally used in import statements

Rest:

  • Allows us to represent an indefinite number of arguments as an array.

  • Can only be used as a function's last parameter

  • The last parameter can be prefixed with …

  • Remaining arguments to the function are placed within a "standard" javascript array.

Operators - Destructure and Rest
06:12

In this video, I talk about classes in TypeScript.

  • Classes in Typescript are same as those in Java or C#

  • It is a blueprint for creating objects

  • It encapsulates data and logic

  • It contains properties, getters/setters, methods, and a constructor.

  • Properties can have access modifiers such as public, private, and protected.

  • Supports inheritance with the keyword super

  • Can implement interfaces

  • Can be used to enforce types

Classes
15:43

In this video, I'm going to tell you about interfaces.

I'll cover the following aspects of an interface:

  • A way of defining contracts

  • Used in TypeScript for implementing structural subtyping of objects

  • Interfaces can extend other interfaces

  • Can be used to set properties as optional or read-only

  • Can be used to enforce contracts for classes

  • Does not have a runtime representation

Interface
06:07

In this video, I'm going to explain Arrow Functions:

  • An arrow function is an alternate way of declaring functions

  • AKA fat arrow or Lambda functions

  • Defined as:

    • let myFunc = () => {};

  • Key features:

    • Lexically captures the meaning of “this”

    • Lexically captures the meaning of “arguments”

    • They are non-constructable (i.e. cannot be invoked with the keyword “new”)

  • Especially useful in typescript to access the member variables through callbacks and promises

Arrow Functions
08:05

JavaScript wasn’t built with modularity in mind.

In this video, I'm going to tell you about ES6 or ECMAScript 2015 Modules that were introduced as a generalized module system to overcome issues with IIFE, CommonJS, and AMD constructs.

Two important things to keep in mind as far as JavaScript Modules are concerned is:

  • Characterized by the use of import/export.

  • script is included with a type=”module”.

Modules
14:08

In this video I talk about the fetch API which:

  • Provides an interface for fetching resources.

  • Provides more powerful and flexible feature set as compared to XMLHttpRequest

  • Returns a Promise.

fetch
07:34

I'll talk about the async/await syntactic sugar that was introduced in ES6.

async/await makes our code more readable and shorter.

It's used with Promises. A function that returns a Promise can be called with the await keyword. A function in which the function returning the Promise is awaited must then be declared with the async keyword.

It doesn't make our code run synchronously though.

async/await
03:42
+ Decorators, @NgModule, Angular Modules and App Bootstrap Mechanism in Angular
7 lectures 43:55

In this video, we talk about the things that we're going to cover as a part of this Module.

So we'll cover the following topics:

  • What are Decorators?

  • Different Decorators in Angular

  • Angular Modules and the @NgModule Decorator

  • @NgModule Decorator Metadata

    • declarations

    • imports

    • exports

    • providers

    • bootstrap

    • entryComponents

  • Application Bootstrap Mechanism in Angular

Module Introduction and an overview of Angular Modules
01:25

In this video, I'm going to briefly talk about Decorators and a few decorators that we use quite a log in Angular.

Decorators are:

  • Stage 2 proposal for JavaScript

  • Experimental feature of TypeScript.

  • Functions or Higher-Order Function if they accept an Argument.

  • Used with @ sign prefixed.

  • Angular classes & properties in them are defined by the decorators that sit on them.

  • In Angular, almost everything is essentially a class. But these decorators transform them into a module, component, service, pipe or directive.

  • Following are a few commonly used Decorators used in Angular

    • @NgModule

    • @Component

    • @Directive

    • @Pipe

    • @Injectable

    • @Inject

    • @Input

    • @Output

    • @ViewChild

    • @ViewChildren

    • @ContentChild

    • @ContentChildren

    • @HostListener

    • @HostBinding

This is just a very brief overview of Decorators in Angular. We'll talk in-depth about them in a later section of this course.

What are decorators?
02:49

I'll briefly talk about Angular Modules and how we can create Angular Modules in this video.

Angular Modules are:

  • Cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities

  • Angular apps are modular.

  • Angular has its own modularity system called NgModules.

  • Angular Apps have at least one NgModule class, i.e. the root module, conventionally named AppModule.

  • Modules are a great way to organize an application and extend it with capabilities from external libraries.

  • Many Angular libraries are modules (such as FormsModule, HttpClientModule, and RouterModule).

  • Many third-party libraries are available as NgModules (such as AngularMaterial, Ionic, AngularFire).

Angular Modules and the @NgModule Decorator
04:24

We're going to have a look at the significance of the declarations array in the @NgModule decorator.

declarations accept a set of declarables to be registered on the Angular Module.

Doesn’t accept:

  • @NgModule

  • @Injectable

  • A non-angular class

  • Declarable registered on any other Angular Module

A declarable used in an Angular Module without adding it here would result in an error.

We're also going to have a look at the errors the Angular runtime would throw in many different cases and how we can fix those errors.

declarations
13:33

In this video, we're going to talk about the imports and the exports array.

The imports array is used to have access to the public API of an Angular Module(ModuleA) into our Angular Module(ModuleB). This public API would generally be Components, Directives, and Pipes (AKA declarables) registered on that Module(ModuleA) or declarables registered by an Angular Module (ModuleC) that was imported by ModuleA.

The exports array is used to export declarables from an Angular Module(ModuleA) to the modules that import ModuleA.

imports and exports
08:01

I talk about the significance of the providers array, the bootstrap array and the entryComponents array in this video.

providers can be used to register an object, a class, a value(basically something) on to an Angular Module's injector. That's what informs the injector that we can then inject this something as a dependency on-to a declarable or service or any specific building block in our Angular App. We'll have a look at them in a later section of this course when we learn about Dependency Injection.

bootstrap array instructs Angular to bootstrap the listed components as soon as it bootstraps the Angular Module. Adding a Component to the bootstrap array also adds it to the entryComponents array.

entryComponents tells Angular that we might want to create components and inject them on to the DOM at runtime. We'll learn more about dynamic component loading and entryComponents in the next section of this course on Components.

providers, bootstrap, and entryComponents
07:41

You'll see how an Angular Application bootstraps in this video. Every Angular application can be configured to have a main file that acts as an entry point for it. There's also an application index that acts as some sort of an entry point for templates.

These two files are responsible for instantiating the App and rendering it on to the browser. You'll see how it does that in this video.

Angular Application Bootstrap Mechanism
06:02

This Quiz will help you refresh the things that you've learned in this section. The questions are specifically prepared to test your understanding on the @NgModule Decorator Metadata.

Quiz on Angular Modules and the @NgModule Decorator Metadata
8 questions
+ @Component Decorator, Angular Components, Communication, and the Lifecycle Hooks
19 lectures 03:23:01

In this video, we talk about the things that we're going to cover as a part of this Module.

So we'll cover the following topics:

  • Components and the @Component Decorator

  • Creating an Angular Component

  • @Component Decorator Metadata

  • View Encapsulation

  • Component Bindings

  • Component Lifecycle Hooks

  • Component Interaction Techniques

  • View Queries

  • Change Detection Mechanism in Angular

Module Introduction
02:17

I've given an analogy about Components in order to properly understand them in this video. I also talk about Angular Apps as a tree of Components. This video will get you started in your understanding of Angular Components.

Angular Components and the @Component Decorator
05:29

In this video, I'll show you how you can create an Angular Component using Angular CLI. Running the ng g c component-name does that for you. It also does quite a lot of other things which we'll cover as a part of this video.

I'll also show you how you can create an Angular Component using StackBlitz.

Creating an Angular Component using the Angular CLI and on StackBlitz
08:00

We'll discuss about all the metadata properties that the @Component Decorator can have. These properties are:

  • selector: css selector that identifies this component in a template

  • template: inline-defined template for the view

  • templateUrl: url to an external file containing a template for the view

  • styles: inline-defined styles to be applied to this component's view

  • styleUrls: list of urls to stylesheets to be applied to this component's view

  • providers: - list of providers available to this component and its children

  • animations: list of animations of this component

  • encapsulation: style encapsulation to be used by this component

  • changeDetection: change detection strategy used by this component

We'll discuss in detail about these properties.

encapsulation can be used to set the view encapsulation configuration of a Component. It's a bit bigger topic. So'll cover that as a part of the next video. And you would be able to better understand changeDetection when we've covered Angular's Component Lifecycle hooks in a later video in this section.

Component Decorator Metadata
08:02

In this video, I explain all the modes for View Encapsulation in Angular. So I'll talk about:

  • Emulated: Default. Inherit global styles. Local styles are private.

  • Native: Deprecated in favor of ShadowDom.

  • ShadowDom: Shadow DOM used to encapsulate styles. Global styles not inherited in Component. Local styles are private.

  • None: Global styles are inherited. Local styles bleed out and are not private

View Encapsulation - Emulated, ShadowDom, None
08:20

In this video, I talk about the different types of bindings that we have in Angular. I also show you the different ways in which the string interpolation syntax works and the direction of data flow in case you use the string interpolation syntax.

I also mention that there's a way in which you should not use the string interpolation syntax in order to avoid any memory leaks.

Data Binding - String Interpolation - {‌{ }}
08:11

I talk about the property binding syntax that we have in Angular. I also show you the different ways in which the property binding syntax can be used and the direction of data flow in case you use the property binding syntax. Like the pervious video, we also see how to use the property binding syntax in the most efficient way.

Property Binding - []
04:16

Event binding is a way to pass data from the Component's template to the Component's TypeScript class. In this video, I show you the syntax for that and the different ways in which you can use the Event Binding Syntax.

Event Binding - ()
09:24

We need to properly understand the @Input and @Output property decorators that can be defined on a Component Class. We  can then properly understand the two way data binding syntax in Angular. So that's exactly what we do in this video.

This video also explains how you can share data from a Parent Component to a Child Component and from a Child Component to a Parent Component.

@Input and @Output Property Decorators
19:21

Now that we've understood the property binding syntax, the event binding syntax; and the @Input and @Output property decoratros, we now have all it takes to properly understand the two-way data binding syntax in Angular.

So that's exactly what we'll do. We will also try and understand how the famous ngModel directive works in the process.

Two-way Data Binding - [()]
08:16

In this vidoe, I explain about the attribute binding syntax. There are times when most of the HTML Attributes don't cross over properly as JavaScript HTMLElement Properties. So in order to set them, we use the attribute binding syntax.

You'll see a few example of how we use it in this video.

Attribute Binding - [attr.]
09:33

There are cases when we might want to toggle CSS classes on HTML Elements. Using the property binding syntax or the attribute binding syntax generally overrides the pre-applied CSS styles. So in order to just keep them intact and apply additional CSS classes on these elements, we use the class binding syntax.

In this video, I'll show you how you can use it.

Class Binding - [class.]
04:50

In this final video on Angular Component bindings, I show you how you can use the style binding syntax to apply styles to HTML elements on the fly conditionally and unconditionally.

Style Bindings - [style.]
06:32

This quiz will help you re-iterate through a few concepts that we've learned so far about Angular Component Bindings and Component Communication.

Quiz on Component Bindings and Communication Techniques
10 questions
In this assignment, you'll be creating a Notes App. This App will have a text field to enter new notes to a list of notes. The list of notes will render a specific note item, each having a Delete Button. Click on the Delete Button will delete the note from the Notes list.
Notes App - Coding Exercise
1 question

In this video, I talk about Component and Directive Lifecycle Hooks. Lifecycle Hooks is a Concept that gets applied to both Components as well as Directives.

Components are basically a special type of Directives. They are the only type of Directives with a template.

So we discuss:

  • What are these life-cycle hooks?

  • What methods run on a specific key life moment in the lifecycle of a Component/Directive?

  • What's the sequence of execution of these life-cycle hook methods?

  • How frequently do they run?

During our discussion, we also talked about the scenarios during which Angular performs Change Detection and what is Content Projection.

Introduction to Lifecycle Hooks in Angular
12:22

In this video, we:

  • Talk about different use-cases for using the lifecycle hook methods.

  • See how we can use all the lifecycle hook methods.

  • Discuss in-depth about using the ngOnInit for initializing properties on our Components or Directives; and the ngOnDestroy to write the clean-up logic for timeouts/intervals, event listeners, and observables.

  • Understand the importance of implementing the lifecycle hook interfaces.

Lifecycle Hooks - When to use which method?
23:48

In this video, I talk about the @ViewChild View Query. We can get references to the elements that we have in the view, using the @ViewChild decorator. And once we do have these element references, then we can do quite a lot of things.

Consider an input field in your template that you want to highlight and focus on once the page loads. You can have a reference to it in the Component Class and then achieve it using the @ViewChild decorator. That's exactly what we'll be doing in this video.

We'll also see how we can access a Child Component from a Parent Component using the @ViewChild decorator thereby also leveraging it as a Component Communication technique.

Throughout this video, we'll have a look at using the @ViewChild decorator with several examples. We'll use the:

  • selector property by specifying a Component Type, a template ref. variable, and TemplateRef.

  • read property from the optional options objects to read different tokens from the @ViewChild like a Component, ElementRef, ViewContainerRef, and TemplateRef.

  • static property which is a boolean, and is false by default, and in what case we can set it to true.

View Queries - @ViewChild
21:14

In this video, I talk about the @ViewChildren View Query. We can get references to the multiple elements that we have in the view, using the @ViewChildren decorator. And once we do have these element references, then we can do quite a lot of things.

The @ViewChildren decorator is almost similar to the @ViewChild decorator with the difference that it returns a QueryList<T>. You can think of a QueryList<T> as a wrapper on the top of a regular JavaScript Array.

We can do almost everything with @ViewChildren that we can do with @ViewChild.

Throughout this video, we'll have a look at using the @ViewChildren decorator with several examples. We'll use the:

  • selector property by specifying a Component Type, a template ref. variable, and TemplateRef.

  • read property from the optional options objects to read different tokens from the @ViewChild like a Component, ElementRef, ViewContainerRef, and TemplateRef.

View Queries - @ViewChildren
12:06

In this video, I talk about the @ContentChild and the @ContentChildren View Queries. We can get references to the multiple elements that we have as a part of the project content, using the @ContentChild and the @ContentChildren View Queries. And once we do have these element references, then we can do quite a lot of things.

The @ContentChild and the @ContentChildren decorators are almost similar to the @ViewChild and the @ViewChildren decorator with the difference that it can be used for the projected content.

Throughout this video, we'll have a look at using the @ContentChild and the @ContentChildren decorator with several examples.

We'll also see the different properties like:

  • selector property by specifying a Component Type, a template ref. variable, and TemplateRef.

  • read property from the optional options objects to read different tokens from the @ContentChild and the @ContentChildren decorators like a Component, ElementRef, ViewContainerRef, and TemplateRef.

View Queries - @ContentChild and @ContentChildren
14:12
Change Detection Mechanism in Angular. ZoneJS, NgZones
16:48
+ Angular Routing, Guards
11 lectures 01:47:25
Introduction to Section 3
00:57
Implementing Routing in an Angular App
14:44
Abstracting the user link to a separate component
02:38
Implementing Child Routes
21:13
Path Match and Route Types
08:39
Introduction to Route Guards in Angular
04:54
CanActivate and CanActivateChild Guards in Angular
10:34
CanDeactivate Guard in Angular
12:44
Prefetching Data for a Component using Resolve
16:34

This quiz will reinforce all the concepts about Angular Routing that we have discussed in this section.

Quiz on Angular Routing
6 questions
+ Dependency Injection(As a Pattern, As a Framework), Services, HTTP, Observables
8 lectures 01:41:07
Introduction to Section 4
01:36
DI as a Pattern, DI as a Framework and Types of Providers
12:20
Hierarchical Dependency Injection
03:34
Introduction to Services in Angular
12:12
GET data from a Rest API using HttpClient
22:47
CRUD Operations using HttpClient, HttpParams and HttpHeaders
25:33
Observables and Operators in Observables - Map, Retry, Catch
09:46
Behavior Subject and Sharing Data using Behavior Subjects
13:19

This quiz will help you reinforce all the concepts that we have covered as a part of this Section.

Quiz on Dependency Injection
7 questions
+ Directives and Pipes in Angular
14 lectures 02:41:32
Introduction to Section 5
01:24
Introduction to Directives
05:04
Built in Structural Directives
19:48
Built in Attribute Directives
12:07
Building custom Attribute Directives
19:08
Building Custom Structural Directives
12:52

This quiz will help you reinforce the concepts that we've covered in this section.

Quiz on Angular Directives
5 questions
Introduction to Pipes in Angular
02:18
Using Built In Pipes
13:58
Creating Custom Pipes in Angular
16:07
Pure and Impure Pipes in Angular
17:54

This quiz will help you reinforce the concepts that you have acquired during this section.

Quiz on Angular Pipes
6 questions
Decorators Revisited
11:17
Building Custom Decorators in Angular
09:10
Building Custom Property Decorator in Angular
04:32
+ Forms in Angular
17 lectures 02:06:23
Introduction to Section 6
00:44
Types of Form Building Strategies in Angular
02:32
Adding FormControl(s) to a Template Driven form using the ngModel directive
04:04
Getting the JavaScript Object Representation of a form using ngForm directive
05:37
Disabling the Submit Button on a Form using form's $invalid flag
02:55
Getting the JavaScript Object Representation of a form in TypeScript Class
14:06
Adding Checkbox, Radio Buttons and Select List to your Template Driven Form
12:04
Creating Subsections in the form using NgModelGroup directive
10:22
Steps to implement a Reactive form in Angular
07:34
Quickly creating a Bootstrap form for our Reactive form using Emmet
09:22
Creating a Reactive form in the TypeScript class & connecting it to the template
10:12
Adding form Validations to a Reactive Form
10:54
Dynamically Adding or Removing FormControl(s) or FormGroup(s) using FormArray(s)
10:20
Adding Synchronous Custom Validations to your Reactive Form
07:14
Adding Async Custom Validations to your Reactive Form
06:36
Resetting the value of a form
01:53
+ Using Third Party Libraries and Frameworks like MDB, Angular Material & Firebase
15 lectures 01:36:54
Creating an Angular CLI Project with SCSS as a base style
04:55
Introducing Material Design Bootstrap into your Angular CLI Project
07:59
Adding a Navbar in your header
05:47
Adding Material Design Buttons
08:59
Adding Cards
05:56
Using Material Design Dropdowns and Form Inputs
09:02
Introducing Angular Material into your Angular CLI Project on the top of MDB
08:01
Adding Radio Buttons, Slide Toggle, Slider, Progress Bar and Spinner
11:06
Creating an App using the Firebase Console
02:32
Interacting with Firebase Realtime Database using methods on AngularFireList
04:25
Adding and Reading Data from Realtime Database in Firebase
11:23
Updating and Deleting Data from Realtime Database in Firebase
06:39