Angular Training Course

DAY 1

Introduction

• What is Angular?
• Overview of Angular Apps
  • Modules
  • Components
  • Services
  • Directives
• Setting Up
  • Installing Node
  • Installing TypeScript
  • Installing Typings
  • Installing Angular CLI
  • TypeScript Editor
  • Chrome Browser
• Creating a New Project with Angular CLI
  • Project File Review
• Editing Our First Angular Component

Creating and Using Components

• Creating Our First Component
• Using Our Created Component
  • app.module.ts
• Component Templates
  • Displaying a line with *ngFor
• Services
• Dependency Injection
  • providers

Bindings

• Property Binding
• CSS Class Binding
• Binding to User Input Events
• Example Application

Day Two

Working with Components

• Input Properties
• Styles
• Example Application

Conditional Rendering, Pipes and Ng-Content

• ngIf
  • ngIfElse
• ngSwitch
• Pipes
• Custom Pipes
• ng-content
  • Multiple Insertion Points

Template Driven Forms

• Create the User Model Class
• Revising app.module.ts
• Creating an initial HTML Form Template
• Using *ngFor to Display Options
• Two-way data binding with ngModel
  • Show and Hide Validation Error messages
• Showing Specific Validation Errors
• Submit the form with ngSubmit
• Getting Submitted Values

Day Three

Model Driven Forms

• Building a Basic Login Form
• Creating Controls Explicitly
  • Implementing Validation
  • Submitting the Form
  • app.component.ts
  • Using Formbuilder
  • Implementing Custom Validation
  • login.component.ts
  • login.component.html
  • Validating Upon Form Submit
  • login.component.html

  Introduction To Observables

  • Obervables
  • Creating an Observable from DOM events
  • Observable Operators
    • filter operator
    • debounceTime Operator
    • distinctUntilChanged Operator

  Getting Data From RESTful APIs with Observables

  • GitHubRESTful API
  • Getting Data
  • Dependency Injection
  • ngOnInit
  • Showing a Loader Icon
  • Implementing a GitHub Results Display page

Day Four

Routing

• Enabling Routing
• Setting Up Our Routes
• Router Outlet and Links
  • Router Outlet
  • Router Links
  • Adding a new Router Link
• Route Parameters
  • Specifying Route Parameters
  • Retrieving Route Parameters
• Imperative Navigation
• Route Guards
  • RouteGuard CanActivate
  • RouteGuard CanDeactivate
  • app.routing.ts
  • AppModule

Structuring Large Apps With Modules

• NgModule
• Restructuring
• Restructuring GitHubModule
• Restructuring LoginModule
• Restructuring AppModule
  • app.module.ts
• Restructuring Routes
  • app.routing.ts
  • app.module.ts

Day Five

C.R.U.D. with Firebase

• About Firebase
• Using Firebase
• Adding Firebase to our Angular App
  • app.module.ts
  • app.component.ts
• Working with a Firebase Database
• Displaying List of Users
• Adding a user
• AngularFirestore Add
  • dirty tracking
• Retrieving a Single User and Deletion
• Deleting a User

Own Project