Angular 5 Training in Mangalore

Angular 5 basics

• Module Introduction
• How an Angular App gets Loaded and Started
• Components are Important!
• Creating a New Component
• Understanding the Role of AppModule and Component Declaration

Using Custom Components

• Creating Components with the CLI & Nesting Components
• Working with Component Templates
• Working with Component Styles
• Fully Understanding the Component Selector

What is Data binding?

• String Interpolation
• Property Binding
• Property Binding vs String Interpolation
• Event Binding
• Bindable Properties and Events
• Passing and Using Data with Event Binding
• Two-Way-Databinding
• Important: FormsModule is Required for Two-Way-Binding
• Combining all Forms of Databinding
• Understanding Directives
• Using ngIf to Output Data Conditionally
• Enhancing ngIf with an Else Condition
• Styling Elements Dynamically with ngStyle
• Applying CSS Classes Dynamically with ngClass
• Outputting Lists with ngFor
• Getting the Index when using ngFor

Components & Databinding Deep Dive

• Module Introduction0
• Splitting Apps into Components
• Property & Event Binding Overview
• Binding to Custom Properties
• Assigning an Alias to Custom Properties
• Binding to Custom Events
• Assigning an Alias to Custom Events
• Custom Property and Event Binding Summary
• Understanding View Encapsulation
• More on View Encapsulation
• Using Local References in Templates
• Getting Access to the Template & DOM with @ViewChild
• Projecting Content into Components with ng-content
• Understanding the Component Lifecycle
• Seeing Lifecycle Hooks in Action
• Lifecycle Hooks and Template Access
• Getting Access to ng-content with @ContentChild
• Wrap Up0

Directives Deep Dive

• Module Introduction
• ngFor and ngIf Recap
• ngClass and ngStyle Recap
• Creating a Basic Attribute Directive
• Using the Renderer to build a Better Attribute Directive
• More about the Renderer
• Using HostListener to Listen to Host Events
• Using HostBinding to Bind to Host Properties
• Binding to Directive Properties
• What Happens behind the Scenes on Structural Directives
• Building a Structural Directive
• Understanding ngSwitch

Using Services & Dependency Injection

• Module Introduction
• Why would you Need Services?
• Creating a Logging Service3
• Injecting the Logging Service into Components
• Creating a Data Service6
• Understanding the Hierarchical Injector
• How many Instances of Service Should It Be?
• Injecting Services into Services
• Using Services for Cross-Component Communication

Changing Pages with Routing

• Module Introduction
• Why do we need a Router?
• Understanding the Example Project
• Setting up and Loading Routes
• Navigating with Router Links
• Understanding Navigation Paths
• Styling Active Router Links
• Navigating Programmatically
• Using Relative Paths in Programmatic Navigation
• Passing Parameters to Routes
• Fetching Route Parameters
• Fetching Route Parameters Reactively
• An Important Note about Route Observables
• Passing Query Parameters and Fragments
• Retrieving Query Parameters and Fragments
• Practicing and some Common Gotchas
• Setting up Child (Nested) Routes
• Using Query Parameters - Practice
• Configuring the Handling of Query Parameters
• Redirecting and Wildcard Routes
• Important: Redirection Path Matching
• Outsourcing the Route Configuration
• An Introduction to Guards
• Protecting Routes with canActivate
• Protecting Child (Nested) Routes with canActivateChild
• Using a Fake Auth Service
• Controlling Navigation with canDeactivate
• Passing Static Data to a Route
• Resolving Dynamic Data with the resolve Guard
• Understanding Location Strategies

Understanding Observables

• Module Introduction
• Analyzing a Built-in Angular Observable
• Building & Using a First Simple Observable
• Building & Using a Custom Observable from Scratch
• Unsubscribe!
• Where to learn more
• Using Subjects to Pass AND Listen to Data
• Understanding Observable Operators

Handling Forms in Angular Apps

• Module Introduction
• Why do we Need Angular's Help?
• Template-Driven (TD) vs Reactive Approach
• TD: Creating the Form and Registering the Controls
• TD: Submitting and Using the Form
• TD: Understanding Form State
• TD: Accessing the Form with @ViewChild
• TD: Adding Validation to check User Input
• Built-in Validators & Using HTML5 Validation
• TD: Using the Form State
• TD: Outputting Validation Error Messages
• TD: Set Default Values with ngModel Property Binding
• TD: Using ngModel with Two-Way-Binding
• TD: Grouping Form Controls
• TD: Handling Radio Buttons
• TD: Setting and Patching Form Values
• TD: Using Form Data
• TD: Resetting Forms

Introduction to the Reactive Approach

• Reactive: Setup
• Reactive: Creating a Form in Code
• Reactive: Syncing HTML and Form
• Reactive: Submitting the Form
• Reactive: Adding Validation
• Reactive: Getting Access to Controls
• Reactive: Grouping Controls
• Reactive: Arrays of Form Controls (FormArray)
• Reactive: Creating Custom Validators
• Reactive: Using Error Codes
• Reactive: Creating a Custom Async Validator
• Reactive: Reacting to Status or Value Changes
• Reactive: Setting and Patching Values

Using Pipes to Transform Output

• Introduction & Why Pipes are Useful
• Using Pipes
• Parametrizing Pipes
• Where to learn more about Pipes
• Chaining Multiple Pipes
• Creating a Custom Pipe
• Parametrizing a Custom Pipe
• Example: Creating a Filter Pipe
• Pure and Impure Pipes (or: How to "fix" the Filter Pipe)
• Understanding the "async" Pipe

Making Http Requests

• Introduction & How Http Requests Work in SPAs
• Example App & Backend Setup
• Sending Requests (Example: POST Request)
• Adjusting Request Headers
• Sending GET Requests
• Sending a PUT Request
• Transform Responses Easily with Observable Operators (map())
• Using the Returned Data
• Catching Http Errors
• Using the "async" Pipe with Http Requests

Authentication & Route Protection in Angular Apps

• Module Introduction
• How Authentication Works in Single-Page-Applications
• More about JWT
• Creating a Signup Page and Route
• Setting up the Firebase SDK
• Signing Users Up
• Signin Users In
• Requiring a Token (on the Backend)
• Sending the Token
• Checking and Using Authentication Status
• Adding a Logout Button
• Route Protection and Redirection Example
• Possible Improvements

Deploying an Angular App

• Module Introduction
• Deployment Preparations and Important Steps
• Example: Deploying to AWS S3

Bonus: TypeScript Introduction (for Angular 2 Usage)

• Introduction
• Using Types
• Classes
• Interfaces
• Generics
• Wrap up & Modules
• Deep dive into TypeScript