Angular Course

Duration:
30 HRS

Subjects:
Angular Course

    Introducing Course

  • Course Overview
  • Where to find the Course Source Code
  • Introducing Angular

  • What is Angular?
  • Why Angular?
  • What You Should Already Know
  • Building Blocks of an Angular Application
  • Basic Architecture of an Angular Application
  • Angular js vs Angular 2 vs Angular 4 vs Angular 5 vs Angular 6 vs Angular 7 vs Angular 8
  • Angular Semantic Versioning
  • Angular Release Frequency and Schedule
  • Angular Preview releases
  • Support policy and schedule
  • Development Setup of Angular

  • Angular Environment Setup
  • IDE for writing your code (Editor)
  • What is Node.js
  • Why does Angular 2 and above need Node.js
  • What is Node Package Manager (NPM)
  • What is Angular CLI
  • Installing VS Code
  • Installing Node.js and NPM
  • Installing CLI
  • Creating a New Project (First App)
  • Building the Application
  • Running the Application
  • Editing the First App
  • Project Structure

  • Project Structure
  • package json and package-lock json
  • Package Version Numbering Syntax
  • Updating Packages
  • Uninstalling Packages
  • Workflow of angular
  • Components

  • What is a Component?
  • An Example Component
  • The Component Class
  • Adding a Component to Its Module
  • Creating a Component Using Angular CLI
  • The Application Root Component
  • Brief of @Component Decorators
  • template & templateUrl
  • Styles and StyleUrls
  • preserveWhitespaces
  • viewProvider
  • moduleId
  • Interpolation
  • Encapsulation
  • Selector
  • Input Property
  • Component Lifecycle Hooks
  • Constructor Vs ngOnInit
  • Directives

  • What are Directives
  • Component Directives
  • Structural directives
  • Attribute Directive
  • Custom Directives
  • Custom Structural Directive
  • TemplateRef
  • ViewContainerRef
  • Component view
  • Host view
  • Embedded view
  • Custom Attribute Directive
  • ElementRef
  • Renderer
  • Binding to Directive Properties using Custom property binding
  • Structural Directives

  • Structural directives
  • NgIf
  • NgIf with HTML Elements
  • NgIf Null Check
  • NgIf with Enum
  • ng-template
  • NgIf with Else
  • Angular NgIf-Then-Else
  • Expanding ngIf into template
  • ngIf - ng-template
  • ngIf-else - ng-template
  • ngIf-then-else - ng-template
  • NgIf with Component Elements
  • NgIf with Async Pipe
  • More than one ng-template for then and else block (NgIf-ThenElse)
  • NgFor
  • NgForOf with HTML Elements
  • NgForOf with ng-template
  • index, even and odd with HTML Elements
  • index, even and odd with ng-template
  • first and last with HTML Elements
  • first and last with ng-template
  • NgForOf with Async Pipe with HTML Elements
  • NgForOf with Async Pipe with ng-template
  • trackBy with HTML Elements
  • trackBy with ng-template
  • NgSwitch
  • NgSwitch with html element
  • Expanding ngSwitchCase and ngSwitchDefault into template
  • NgSwitch with ng-template
  • NgSwitch with Enum
  • NgSwitch with NgFor and class
  • NgSwitch and NgFor in same element
  • Attribute Directives

  • Attribute Directive
  • ngStyle
  • Alternative syntax of ngStyle
  • ngClass
  • NgClass with String
  • NgClass with Array
  • NgClass with Object
  • Alternative syntax of NgClass
  • NgSwitch with NgFor and NgClass
  • NgClass with Array
  • NgClass with Object
  • Alternative syntax of NgClass
  • NgSwitch with NgFor and NgClass
  • NgIf with NgFor and NgClass
  • Data and Event Binding

  • Data binding
  • Binding Syntax
  • Classification of Data Binding
  • One-Way Data Binding
  • Different types of one-way data binding
  • Difference between attribute and property
  • Interpolation
  • Attribute Binding
  • Style Binding
  • Class Binding
  • Property Binding
  • What is the difference between Property Binding and Interpolation?
  • Event Binding
  • How can we say that - two-way data binding in Angular is actually a combination of both Property Binding and Event Binding?
  • Two-Way Data Binding
  • Pipes and Data Formatting

  • What are Pipes?
  • Formatting Changes in Angular
  • What is ngNonBindable?
  • Built-in Pipe
  • Lowercase pipe
  • Uppercase pipe
  • Titlecase pipe
  • Slice pipe
  • Json Pipe
  • Decimal pipe
  • Percent Pipe
  • Currency Pipe
  • Date Pipe
  • Percent Pipe
  • Parameterized pipes
  • Multiple pipes (Chaining pipes)
  • Async Pipe
  • Custom Pipe
  • Chaining of Custom Pipes
  • Use Built-in Pipe in Custom Pipe
  • Pure and Impure Pipes
  • Pure Pipe Example
  • Decorators

  • What is decorators
  • @NgModule
  • @Component
  • @Injectable
  • @Directive
  • @Pipe
  • @Input
  • @Output
  • EventEmitter
  • emit()
  • @HostBinding
  • @HostListener
  • @ContentChild
  • @ContentChildren
  • @ViewChild
  • @ViewChildren
  • Introduction to Typescript and ES6

  • What is JavaScript?
  • What is Typescript?
  • Transpilation
  • Programming Languages for Use with Angular
  • Programming Languages for Use with Angular
  • Typescript Syntax
  • Why use Typescript
  • Text Editors For Typescript
  • Why Typescript is developed while having JavaScript?
  • Typescript Version
  • Features of Typescript
  • Advantage of Typescript over JavaScript
  • Disadvantage of Typescript over JavaScript
  • Typescript vs. JavaScript
  • Difference between JavaScript and Typescript
  • Components of Typescript
  • TypeScript - Type Annotations
  • TypeScript - Variable
  • var Declaration
  • let Declaration
  • Advantages of using let over var
  • Const Declaration
  • Typescript Data Type
  • Static Data Type
  • Built-in or Primitive Type
  • Number Type
  • String Type
  • Boolean Type
  • Void Type
  • Any Type
  • Null Type
  • User-Defined DataType
  • Array
  • Tuple
  • Interface
  • Class
  • Enums
  • Functions
  • Generics Data Type
  • Decorators Data Type
  • Difference between Null and Undefined
  • Typescript - Decision Making
  • Typescript - if
  • Typescript - if else Condition
  • Typescript - else if Condition
  • Typescript - switch
  • Typescript - Loops
  • Typescript - for Loops
  • Typescript - while Loop
  • Typescript - do. While loop
  • Typescript - Data Modifiers
  • public
  • private
  • protected
  • Typescript - Function
  • named functions
  • Anonymous functions
  • Function Parameters
  • Optional Parameters
  • Default Parameters
  • Arrow Function
  • Typescript - Rest Parameters
  • The Type System – Classes & Objects
  • Class Constructors
  • Interfaces
  • Working with Modules
  • Services and Dependency Injection

  • What is a Service?
  • Creating a Basic Service
  • What is Dependency Injection?
  • What Dependency Injection Looks Like
  • Injecting Services
  • Using a Service in a Component
  • Using onInit to Initialize Component Data
  • Injector
  • Provider
  • @Injectable Decorator
  • @Inject() Decorator
  • providedIn
  • Tree Shakeable Providers
  • Include the Service in component level
  • Include the Service in module level
  • Inject Service into other Service (Nested Services)
  • Single VS Multiple Instance of Services
  • Router

  • Routing and Navigation
  • The Component Router
  • Component Router Terminology
  • Setting up the Component Router
  • A Basic App with Routing
  • Router Outlet
  • Router Link
  • Router Link – Client Side
  • Router Link – Server-Side
  • Creating a Routing Module
  • ForRoot() and ForChild()
  • Create Component/Service/pipe/directive/class/guard without spec.ts
  • Difference-between-the-href-and-routerLink
  • Redirecting Routes
  • Wildcard Route
  • Child Routes / Nested Routes
  • Nested Routes (Nesting Children’s under a child)
  • Parameterize Route
  • The Snapshot Way
  • The Observable/Stream Way
  • Passing Data During Navigation
  • Passing Data During Navigation
  • Navigating with Route Parameters
  • Retrieving the Route Parameter
  • Route Guards
  • Basic information about route guards
  • Route Guards Parameters
  • ActivatedRouteSnapshot
  • RouterStateSnapshot
  • Route Guard Types
  • CanActivate guard
  • CanActivateChild guard
  • CanDeactivate guard
  • Resolve guard
  • CanLoad guard
  • Named and Multiple Router-Outlets (Auxiliary Routes or secondary routes)
  • Difference between [routerLink] and routerLink
  • RouterLinkActive
  • Navigate
  • NavigateByUrl
  • Query Parameters
  • Angular Modules

  • Introduction of modules
  • The Root Module
  • @ngmodule decorator
  • Purpose of @ngModule
  • Types of ngModule
  • @ngModule Metadata Properties
  • Feature Modules in Angular
  • Eager Loading
  • Lazy Loading Modules
  • Preloading Modules
  • Custom Preloading Modules strategy
  • Custom Preloading Modules strategy with delay
  • How to Create a Module
  • Importing BrowserModule or CommonModule…etc
  • Session Management

  • What is HTML Web Storage?
  • What is localStorage and sessionStorage?
  • Set Entries
  • Updating Entries
  • Deleting Entries
  • Clearing Everything
  • Storing Json Objects
  • Checking for Items
  • Checking for Support
  • Iterating Over Items
  • rxjs

  • What is Observable
  • What is Subscribe
  • Angular In-Memory Web API
  • Observable and subscribe with Web API
  • Observable with Async pipe and ngFor
  • Observable with Async pipe and ngIf
  • Observable map
  • What is Promise
  • Difference between observable and promise
  • HTTP Client

  • The Angular HTTP Client
  • Using The HTTP Client - Overview
  • Importing HttpClientModule
  • Service Using HttpClient
  • Using the Service in a Component
  • HTTP VS HttpClient
  • HttpModule VS HttpClientModule
  • HttpClient get()
  • HttpClient post()
  • HttpClient put()
  • HttpClient delete()
  • HttpParams and HttpHeaders
  • Use of headers in HttpClient
  • Use of observe in HttpClient
  • Use of params in HttpClient
  • Use of reportProgress in HttpClient
  • Use of responseType in HttpClient
  • Use of withCredentials in HttpClient
  • Requesting JSON using HttpClient.get using subscribe method
  • Requesting JSON using HttpClient.get useing async pipe with Observable
  • Requesting Text data using HttpClient.get using subscribe method
  • Requesting Text data using HttpClient.get useing async pipe with Observable
  • Using HttpParams
  • Using HttpParams and HttpHeaders
  • Using HttpClient.get with observe Property
  • Error Handling
  • RxJS retry() to Handle Error
  • HttpClient.post Body
  • HttpClient.post with Headers
  • HttpClient.post with observe Option
  • HttpClient.post and Response Type
  • HttpClient.post with Error Handling
  • HttpClient.put Body
  • HttpClient.put with Headers
  • HttpClient.put with observe Option
  • HttpClient.put and Response Type
  • HttpClient.put with Error Handling
  • HttpClient.delete with Headers
  • HttpClient.delete with observe Option
  • HttpClient.delete and Response Type
  • HttpClient.delete with Error Handling
  • Forms in Angular
  • Template Driven Forms

  • Template Driven Forms
  • Template Driven Forms features
  • Importing Forms Module
  • A Basic Angular Form
  • What is NgForm?
  • What is NgModel?
  • Template Driven Forms with Validation
  • What is ng-touched?
  • What is ng-untouched?
  • What is ng-pristine?
  • What is ng-valid?
  • What is ng-invalid?
  • Binding Input Fields
  • Accessing the Form Object
  • Binding the Form Submit Event
  • The Submit Function
  • Basic HTML5 Validation - "required" Attribute
  • HTML5 vs. Angular Validation
  • Angular Validators
  • Angular Validation State
  • Controlling when validation is applied
  • Displaying Form Validation State
  • Displaying Field Validation State
  • Displaying Validation State Using Classes
  • Disabling Submit when Form is Invalid
  • Submitting the Form
  • Checkboxes
  • Select (Drop Down) Fields
  • Rendering Options for Select (Drop Down)
  • Date fields
  • Radio Buttons
  • Model Driven Forms

  • Model Driven Forms
  • Setup for Model Driven Forms
  • Form Component Setup
  • Setup Main FormGroup
  • formControlName
  • FormControl Object
  • Getting Form Values
  • FormBuilder Form Initialization
  • Validation
  • Built-In Validators
  • Controlling when validation is applied
  • What is FormControl?
  • What is FormGroup?
  • What is FormBuilder?
  • Reactive forms with Validation
  • FormGroup Get Value and reset()
  • FormGroup setValue() and patchValue()
  • valueChanges() and statusChanges()
  • What is FormArray?
  • Use of FormArray in component
  • What is Nested FormArray?
  • Use of Nested FormArray in component
  • What is Nested FormGroup?
  • Use of Nested FormGroup
  • Reactive Form Using Angular Material Design
  • Custom Validator
  • Using a Custom Validator
  • Angular Material, bootstrap, jQuery, Cookies

  • What is Angular Material?
  • Angular Material - Features
  • Angular Material - install and use
  • Angular Material Theming
  • Angular Material All Modules
  • What is bootstrap?
  • Install and Use bootstrap in Angular
  • How to Import and Use jQuery in Angular
  • What is Cookies?
  • Creating Cookies using ngx-cookie-service in Angular
  • Cookie methods-Check
  • Cookie methods-Get
  • Cookie methods-GetAll
  • Cookie methods-Set
  • Cookie methods-Delete
  • Cookie methods-DeleteAll
  • Angular 8 Features

  • Angular Versions
  • Angular 8 Overview
  • Upgrading to Angular 8
  • Creating New Projects with Angular v5
  • What's New in Angular 8 and How to update to version 8
  • Differential Loading by Default in Angular 8
  • Dynamic Imports in Angular 8
  • Builder APIs in the CLI in Angular 8
  • Workspace APIs in the CLI
  • Web Worker Support
  • Use Analytics Data
  • Bazel Support
  • Bye Bye @angularhttp
  • Changes in ViewChild and ContentChild
  • Support SVG Template
  • Ivy Rendering Engine
  • AngularJS Migration Improvements
  • Introduction to Single Page Applications

  • What is a Single Page Application (SPA)
  • SPA Workflow
  • Traditional Web Application Capabilities
  • Single Page Application Advantages
  • SPA and Traditional Web Sites
  • SPA Challenges
  • Implementing SPA's Using Angular
  • Simple SPA Using Visibility Control
  • SPA Using Angular Components
  • Implement SPA Using an Angular Component Router
  • Live Project