Introduction
- Overview of ES5
- Installing Node and NPM
- JavaScript Basic Syntax
- Detailing on ES5 problems
- JavaScript project creation using NPM
- Introduction to TypeScript
- TypeScript Environment Setup
- Basic Syntax
- Types, Variables and Operators
- Decision Making
- Loops
- Functions and Lambda Expressions
- Summary
Introduction to TypeScript
- Classes and Objects
- Interface
- Inheritance
- Generics
- Enums
- Number and Strings
- Arrays
- Tuples and Union
- Namespaces and Modules
- Decorators
- Ambients
- Mixins
- Summary
Introduction to Angular
- Angular CLI
- Why Angular 8
- Angular 8 Features
- Installing and Using Angular 8
- Creating the first Angular Project
- Architecture Overview
- What is new in Angular 8
- Summary
Building with Components
- Introducing the component
- Component Decorator Properties
- Template
- Inline Template
- Interpolation – Plain text, Object and Array
- Adding CSS
- Component Starter
- Integrating Bootstrap
- Summary
Data and Event Binding
- Binding Syntax
- One-Way Binding
- Property binding
- Attribute binding
- Setting Element Properties
- Binding Events
- Key event filtering
- Template Reference Variables
- Two-Way Binding of Input Fields
- Summary
Attribute Directive
- What are Directives
- Directive Types
- Apply Styles using NgClass and NgStyle
- Applying Styles Directly
- Obsolete Directives and Property Binding
- Controlling Element Visibility
- Setting Image Source Dynamically
- Setting Hyperlink Source Dynamically
- Creating custom Directive
- Summary
Structural Directives
- Adding and Removing Elements Dynamically
- Looping Using ngFor
- ngFor - Basic Syntax
- Creating Tables with ngFor
- ngFor Local Variables
- Swapping Elements with ngSwitch
- ngSwitch - Basic Syntax
- ngSwitch - Full Template Syntax
- Creating custom Directive
- Summary
Template Driven Forms
- A Basic Angular Form
- Binding Input Fields
- Accessing the Form Object
- Binding the Form Submit Event
- The Submit Function
- Basic HTML5 Validation - "required" Attribute
- Angular Validators
- Angular Validation State
- Displaying Form Validation State
- Displaying Field Validation State
- Disabling Submit when Form is Invalid
- Submitting the Form
- Binding to Object Variables
- Additional Input Types
- Checkboxes
- Select (drop down) Fields
- Rendering Options for Select (drop down)
- Date fields
- Radio Buttons
- Summary
Pipes and Data Formatting
- What are Pipes?
- Using a Built-in Pipe
- Chaining Pipes
- Some Pipe Examples
- Decimal Pipe, Currency Pipe
- Custom Pipes
- Using Custom Pipes
- A Filter Pipe
- A Sort Pipe
- Pipe Category: Pure and Impure
- Pure Pipe Example
- Impure Pipe Example
- Summary
The Angular Component Router
- Routing and Navigation
- The Component Router
- Traditional Browser Navigation
- Component Router Terminology
- Setting up the Component Router
- Routes
- The app.routes.ts File
- Bootstrapping Routing in main.ts
- A Basic App With Routing
- App Routes
- App Component
- Programmatic Navigation
- Basic Navigation
- Passing Data During Navigation
- Creating Routes with Route Parameters
- Navigating with Route Parameters
- Using Route Parameter Values
- Retrieving the Route Parameter Synchronously
- Retrieving the Route Parameter Asynchronously
- Query Parameters
- Query Parameters - queryParams
- Query Parameters - Navigation
- Retrieving Query Parameters Asynchronously
- Summary
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: Dedicated Instance
- Using a Service in a Component: Shared Instance
- Dependency Injection and @Self
- Dependency Injection and @Host
- Dependency Injection and @Optional
- Summary
RxJS and Observables
- What is an Observable?
- Introduction
- Environment Setup
- What are Streams
- What is RxJS
- RxJS Observable
- Subject
- Behaviour Subject
- Core RxJS Concepts - Errors, Completion and Subscriptions
- RxJS Operators
- RxJS Filter Operator
- RxJS concatMap Operator
- RxJS mergeMap Operator
- RxJS exhaustMap Operator
- RxJS startWith Operator
- Building Components with RxJS
- Sharing HTTP Responses with the shareReplay Operator
- Observable Concatenation
- Understanding the merge Observable combination Strategy
- Unsubscription
- Summary
HTTP Client
- The Angular HTTP Client
- Importing Individual Providers into Services
- Service Using Http Client
- Service Imports
- What does an Observable Object do?
- Making a Basic HTTP GET Call
- Using the Service in a Component
- Importing Observable Methods
- Enhancing the Service with .map() and .catch()
- Using .map()
- Using .catch()
- Using to Promise()
- GET Request
- GET Request with Options
- GET Request Example
- POST Request
- POST Request Example
- Reading HTTP Response Headers
- Summary
Reactive Forms
- Introduction
- Registering the reactive forms module
- Generating a new form control
- Registering the control
- Managing control values
- Grouping form controls
- Creating FormGroup
- Associating the FormGroup model and View
- Saving form data
- Displaying the component
- Creating nested form groups
- Grouping the nested form in the template
- Partial model updates
- Generating form controls with FormBuilder
- Injecting the FormBuilder service
- Generating form controls
- Simple form validation
- Dynamic controls using form arrays
- Summary
Angular Modules
- Introduction
- What are Modules?
- Getting Started with Feature Modules
- Splitting Modules Correctly
- Adding Routes to Feature Modules
- Component Declarations
- Understanding Shared Modules
- Understanding the Core Module
- Understanding Lazy Loading
- Implementing Lazy Loading
- Modules & Services
- Loading Services Differently
- Summary
Dynamic Components
- Introduction
- Dynamic component Loading
- The anchor directive
- Loading Components
- Resolving Components
- Developing Dialog Component
- Adding the Dialog Component
- Summary
Day 5
Angular Material Design
- Introduction
- Key principles
- Setting up Angular Material
- Creating Material Master Module
- First Material Components
- Flexbox Basics
- Adding Sidenav Component
- Adding Responsiveness
- Using Lists
- Using Cards
- Using Tabs
- Using Tables
- Adding Pagination
- Adding Filtering
- Adding Header Sorting
- Summary
Angular Material Design – Dialogs and Popups
- Adding Toolbar Menu
- Dialog Basics
- Creating First Dialog
- Scaffolding a Form
- Customizing the Form
- Adding Form Validation
- Using DatePicker
- Saving the Data
- Snackbar Notification
- Creating Custom Themes
- Toggling Themes
- RTL and LTR Support
- Summary
Client-Side Authentication Service
- Introduction to Cryptographic Hashes
- Implement a Password Policy
- Modelling a User Session
- Browser Cookies
- Protect Cookies using HTTP Only Cookies
- Client-Side User Session Management
- Securing a REST Endpoint
- User Login
- Implementing Logout
- Understanding CSRF
- Implement CSRF double submit cookie defense
- Introduction JSON Web Tokens
- JSON Web Tokens In Detail - Header and Payload
- JWT Signature With HS256 / RS256
- Combine Cookies and JWTs
- Setting Subject and Expiration
- Storing JWT In Local Storage
- Authorization Router Guard
- Summary
Unit Testing
- Introduction to Jasmine and Karma
- Benefits of Unit Testing
- Karma Config
- Using – describe
- Using – it
- Using – beforeEach
- Testing a Form
- Testing a Component with Services
- Testing an asynchronous operation
- Summary