Certified Angular 10 Developer

TABLE OF CONTENT

Single Page Applications, Uses of Angular, and Getting Started

• Course Overview
• Introduction to Single Page Applications (SPA)
• Uses of Angular
• Setting up a Development Environment
• Angular Application Architecture
• First Angular App

TypeScript and ESNext

• Module Introduction and Introduction to TypeScript
• Setting up the Environment to Write TypeScript
• Variable declarations (var, let, and const)
• Types - Primitives
• Types - Reference and Special Types
• Operators - Spread and Backticks
• Operators - Destructure and Rest
• Classes
• Interface
• Arrow Functions
• Modules
• fetch
• async/await

Decorators, @NgModule, Angular Modules, and App Bootstrap Mechanism in Angular

• Module Introduction and an Overview of Angular Modules
• What are Decorators?
• Angular Modules and the @NgModule Decorator
• Declarations
• Imports and Exports
• Providers, Bootstrap, and entryComponents
• Angular Application Bootstrap Mechanism

@Component Decorator, Angular Components, Communication, and Lifecycle Hooks

• Module Introduction
• Angular Components and the @Component Decorator
• Creating an Angular Component using the Angular command-line interface (CLI) on StackBlitz
• Component Decorator Metadata
• View Encapsulation - Emulated, Shadow DOM, None
• Data Binding - String Interpolation - {{ }}
• Property Binding - []
• Event Binding - ()
• @Input and @Output Property Decorators
• Two-way Data Binding - [()]
• Attribute Binding - [attr.]
• Class Binding - [class.]
• Style Bindings - [style.]
• Introduction to Lifecycle Hooks in Angular
• Using Lifecycle Hooks in Angular
• View Queries: @ViewChild
• View Queries: @ViewChildren
• View Queries: @ContentChild and @ContentChildren
• Change Detection Mechanism in Angular Using ZoneJS and NgZones

Angular Routing, Guards

• Introduction to Routing
• Implementing Routing in an Angular App
• Creating a User List and Setting the stage for Child Routing
• Abstracting the User Link to a Separate Component
• Implementing Child Routes
• Path Match and Route Types
• Introduction to Route Guards in Angular
• CanActivate and CanActivateChild Guards in Angular
• CanDeactivate Guard in Angular
• Prefetching Data for a Component using Resolve

Dependency Injection (As a Pattern and Framework), Services, HTTP, Observables

• Introduction to the Section
• DI as a Pattern, DI as a Framework and Types of Providers
• Hierarchical Dependency Injection
• Introduction to Services in Angular
• GET Data from a REST API Using HttpClient
• CRUD Operations Using HttpClient, HttpParams, and HttpHeaders
• Observables and Operators in Observables - Map, Retry, and Catch
• Behavior Subject and Sharing Data Using Behavior Subjects

Directives and Pipes in Angular

• Introduction to the Section
• Introduction to Directives
• Built-in Structural Directives
• Built-in Attribute Directives
• Building Custom Attribute Directives
• Building Custom Structural Directives
• Introduction to Pipes in Angular
• Using Built-in Pipes
• Creating Custom Pipes in Angular
• Pure and Impure Pipes in Angular
• Decorators Revisited
• Building Custom Decorators in Angular
• Building a Custom Lifecycle Hook Class Logger Decorator
• Building a Custom Property Decorator in Angular

Forms in Angular

• Introduction to the Section
• Types of Form Building Strategies in Angular
• Creating Long Bootstrap Forms Quickly with VS Code Using Emmet
• Adding FormControl(s) to a Template-driven Form Using the ngModel Directive
• Getting the JavaScript Object Representation of a Form Using the ngForm Directive
• Disabling the Submit Button on a Form Using the Form's $invalid Flag
• Getting the JavaScript Object Representation of a Form in the TypeScript Class
• Adding Checkbox, Radio Buttons and Select List to your Template-driven Form
• Creating Subsections in the Form Using the NgModelGroup Directive
• Steps to Implement a Reactive Form in Angular
• Quickly Creating a Bootstrap Form for a Reactive Form Using Emmet
• Creating a Reactive Form in the TypeScript class and Connecting it to the Template
• Adding Form Validations to a Reactive Form
• Dynamically Adding or Removing FormControl(s) or FormGroup(s) Using FormArray(s)
• Adding Synchronous Custom Validations to a Reactive Form
• Adding Async Custom Validations to a Reactive Form
• Resetting the Value of a Form

Using Third Party Libraries and Frameworks, such as MDB, Angular Material and Firebase

• Introduction to the Section
• Creating an Angular CLI Project with SCSS as a Base Style
• Introducing Material Design Bootstrap (MDB) into Your Angular CLI Project
• Adding a Navbar in Your Header
• Adding Material Design Buttons
• Adding Cards
• Using Material Design Dropdowns and Form Inputs
• Introducing Angular Material into Your Angular CLI Project on the Top of MDB
• Adding Radio Buttons, Slide Toggle, Slider, Progress Bar, and Spinner
• Introduction to Firebase
• Creating an App Using the Firebase Console
• Setting up Your Angular CLI Project to Support Firebase
• Interacting with the Firebase Realtime Database Using the Methods on AngularFireList
• Adding and Reading Data from the Realtime Database in Firebase
• Updating and Deleting Data from the Firebase Realtime Database