Angular4

Angular4.js

hola

Reactive Form (Full Control)

<form [formGroup]="form">
	<input type="text" name="email" formControlName="email"/>
	<input type="text" name="password" formControlName="password"/>

  <div formGroupName="contact">
      <input type="text" name="firstName" formControlName="firstName">
      <input type="text" name="lastName" formControlName="lastName">
  </div>

	<button type="button" (click)="login()"></button>
<form>


controller
----------

 form = new FormGroup({
    email : new FormControl(),
    password : new FormControl(),
    contact : new FormGroup({
      firstName : new FormControl(),
      lastName : new FormControl()
    })
  });



login(){

  let credentials = this.form.value;
	console.log(credentials);
}

Authentications

https://github.com/yogain123/Authentication-Angular-4

Observables

All Ajax request in Angular return observables
We can only subscribe to observables

to make your own observables

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

  export class someService{ 

  private totalItems = new BehaviorSubject<number>(0);
  hola : number = 0;

  constructor(){}

  someFunction(){
  this.totalItems.next(this.hola);    //next is used to perform operations on      observables
  }

  getTotalItems(){     
      return this.totalItems;
  }
}

Subscribe

If we subscribe to any observables and whenever there is a change in that observables (which will be in service mostly) then that change will be reflected on all those components where that observables is used (subscribed)

Take above example for own observables creation

now subscribe to that observables in some compoenet

this.someservice.getTotalItems().subscribe((item)=>this.something = item) //item is a returned observables from service

Subscribe to paramsMap

this.route.queryParamMap.subscribe(params=>{
      this.category = params.get("category")});  

unsubscribe

 ngOnDestroy(){
    console.log("inside component destroy");
    this.someservice.getTotalItems().unsubscribe();
  }

Modules Seperations

Service can be used across all modules ,BUT components are specifics to its own modules , so in order to use components of one module into other , then we export that module and then IMPORT it wherever need

Nested Routing

In Product.compoent.html
<router-outlet></router-outlet>

in app.module.ts

  {path: "products", component: ProductsComponent, children:[
        {path : "hola1",component:Hola1Component},
        {path : "hola2",component:Hola2Component}
      ]},

localhost:4200/products : PARENT.
localhost:4200/products/hola1 : CHILD
localhost:4200/products/hola2 : CHILD

@import "~bootstrap/dist/css/bootstrap.min.css";

Throwing Error and Rollback changes

Rollback

Throwing Error

retry

retry is retrying observable call to server n number of times

Route Params are Observable (usefull when we don't want to destroy the component but change it live on bases on different params)

subscribe to route params

subscribing to multiple observerable at once using switch map

Programmatic Navigation

Authentication and Authorization

Check what is JWT

Check Token Expiration and all with help of jwt-helper global function tokenNotExpired()

npm install angular2-jwt --save

Show and Hide Elements based on user roles

Show Admin link to only those user who is admin

Getting the current User

Route Guard

implement CanActivate

Improving User Experience for Routing User

canActivate Take 2 parametes

returnUrl : state.url

=========

let returnUrl = this.route.snapshot.queryParamMap.get("returnUrl");
this.router.navigate([returnUrl | "/"]);

making header and sending request

===================

The Very Same Thing with almost no code can be done using angular AuthHttp

BehaviorSubject

The BehaviorSubject holds the value that needs to be shared with other components. These components subscribe to data which is simple returning the BehaviorSubject value without the functionality to change the value. Here is a more detailed breakdown of asObservable. In updateDataSelection we call next and pass in a new value to the BehaviorSubject.

---

All subscribers to a subject share the same execution of the subject. i.e. when a subject produces data, all of its subscribers will receive the same data. This behavior is different from observables, where each subscription causes an independent execution of the observable.

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Injectable } from '@angular/core';

@Injectable()
export class ShoppingkartService {

  private totalItems = new BehaviorSubject(null);
  hola : number = 0;

  constructor() { }

  addToShoppingKart(){
      this.hola++;
      this.totalItems.next(this.hola);
  }
  getTotalItems(){     
      return this.totalItems;
  }
}

======

In some component

 ngOnInit() {
    this.shoppingkartService.getTotalItems().subscribe(item=>{
      this.totalItems=item;
    })
  }

WE can Complete Observation using complete

completeMe(){
  this. totalItems.complete();
}

Create Your Own Observable

import { Observable } from "rxjs/Observable"

// create observable
const simpleObservable = new Observable((observer) => {
    
    // observable execution
    observer.next("bla bla bla")
    observer.complete()
})

// subscribe to the observable
simpleObservable.subscribe()

// dispose the observable
simpleObservable.unsubscribe()

Main Difference between Observables and Promise

Observables can have multiple values over time

Now if you keep that subscription to the newsletter open, you will get a new one every once and a while. The sender decides when you get it but all you have to do is just wait until it comes straight into your inbox.
If you come from the world of promises this is a key difference as promises always return only one value. Another thing is that observables are cancelable. If you don’t want your newsletter anymore, you unsubscribe. With promises this is different, you can’t cancel a promise

We Unscubscribe to overcome memory Leak
unscubscribe in OnDestroy()

Async Pipe

You don't have to subscribe to observable
you don't have to unsubscribe to observable
you don't have to implement ngOnInit

As Keyword

it is used to give alias

can we rewritten as

Subscribe to routeQueryParams

https://www.udemy.com/the-complete-angular-master-class/learn/v4/t/lecture/7824574?start=0

Lazy Loading in Angular

https://www.youtube.com/watch?v=75XFBIKLPQY