Angular 15 Masterclass with TypeScript, Firebase, & Material

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.

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.

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

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

I'll explain the following types to you:

• void

• Array<type>

• Tuple

• Objects

• enum

• any(special)

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.

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.

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

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

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

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”.

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.

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.

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

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.

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).

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.

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.

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.

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.

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.