arunselvakumar / AngularNotes

0 stars 0 forks source link

good angular stuffs #10

Open arunselvakumar opened 5 years ago

arunselvakumar commented 5 years ago

How to get started with routing

RouterModule.forRoot([ {path: ‘’, component: ComponentName } {path:’profile/:userId’, component: GitHub} {path:’**’, component: GitHub} ]);

Order Matters

  1. Configure Route
  2. Add Routlet -> Elements are rendered after the outlet Use PropertyBinding

<a [routerLink]=“[‘route’, ha, ha]”> routerLinkActive

GETTING ROUTE PARAMETRS: Private route: ActivatedRoute This.route.paramMap Convert string to number, let foo = +params.get(id); Why route parameters are Observable<> If we want to take query this.route.paramQueryMap.subscribe

COMPONENT LIFECYCLE HOOKS Component to Component - NgOnInit won’t be loaded.

Merge Two Observables using combineLatest factory Method Import ‘rxjs/add/observable/combineLatest’

Let obs = Observable.combineLatest([ Observable1, observable2 ])

Obs.subscribe()

Better cleaner way to do avoid nested subscribe calls => SwitchMap Also, subscribe inside subscribe causes non-sense, cos it won’t be unsubscribed.

Obs1.switchMap( Event => { return obs2 } );

arunselvakumar commented 5 years ago

async pipe is better because, it unsubscribes by itself.

arunselvakumar commented 5 years ago

Observable.of(data);

arunselvakumar commented 5 years ago

const headers = new Headers() headers.append('Content-Type', 'application/json');

this.http.post('api/login', {body}, headers) .subscribe(user => {}, () => alert('login failed'))

arunselvakumar commented 5 years ago

private subject = new BehaviourSubject(UNKNOWN_USER); user$: Observable = this.subject.asObservable();

this.http.post('api/login', {body}, headers) .map(res => res.json()) // We are mapping it to JSON cos, the data returned will be of type response, which has the status code etc. .subscribe(user => this.subject.next(user), () => alert('Login Failed'))

arunselvakumar commented 5 years ago

return this.http.post('api/login', {body}, header) .map(res => res.json()) .do(user => this.subject.next(user)) .publishLast().refCount(); // Check what this stuff does. :-)

arunselvakumar commented 5 years ago

this.router.navigateByUrl('/hello-world');

arunselvakumar commented 5 years ago

.subscribe(user => {}, error => {}) // Important Stuff