Angular5 - POC - routing - route params, RxJs Observable with service, tamplate binding, Event binding, Material desing impl

Angular5 POC
============
RxJs Observable with service
tamplate binding, Event binding,
Material desing imple
routing - route params
github link : https://github.com/gnganpath/Angular-6videos-thatJsdude

video:1 -> Installation and requirement software - Local dev environment
----------
Download node js , download and install VS code follow the agular cli version
npm install -g @angular/cli
ng new PROJECT-NAME
cd PROJECT-NAME
ng serve      -> no need of npm install is required here.
ng serve --host 0.0.0.0 --port 4201


video:2 -> component, tempalte binding, Event Handler
----------
bangularbangk$ ng g c circular

inside app.hml - template binding
bind the circular template using <app-circular>

app-circular.html
(click)="changeTextEventHandler()"

app.component.ts
public changeTxt = "initial text";

ngOnInit(){
this.changeTxt = "update text in OnInt";
}

changeTextEventHandler(){
this.changeTxt = "Event handler in child component";
}

video:3 -> Service, Observable, RxJS
----------

bangularbangk$ ng g service github/github

RxJs/Observale ->
app.module.ts
import { HttpClientModule } from '@angular/common/http';
...
imports: [
    BrowserModule,
    HttpClientModule
  ],

github.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map'
@Injectable()
export class GithubService {
  constructor(private http: HttpClient) { }
  getUser(searchText): Observable<any>{             // rxjs - observable call for API
    const url= 'http://api.github.com/search/users?q='+searchText;
    return  this.http.get(url).map(
      res => {
        const data = res;
        console.log(data)
        return data;
      }
    )
  }
}

search.html
<input type="text" (keyup)="onKeyup($event)">
<button (click)="getUsers()">Search</button>
<p>{{ searchCount }}</p>
<ol *ngIf="searchResult">
  <li *ngFor="let user of searchResult.items">{{ user.login }}</li>
</ol>

search.component.ts
import { Component, OnInit } from '@angular/core';
import {GithubService} from '../github/github.service';
 searchText;
  searchResult;
  searchCount;
  ....
  ....
  constructor(private githubService:GithubService) { }
   onKeyup(event){
    this.searchText = event.target.value;
  }
  getUsers(){
    console.log(this.searchText)
    this.githubService.getUser(this.searchText).subscribe(
      res =>{
       // console.log(res)
       this.searchResult = res;
       this.searchCount = res.total_count;
      }
    )};

Video:4 -> Angular2 Material Design

bangularbangk$ npm install --save @angular/material @angular/cdk

app.module.ts
import { MatCardModule } from '@angular/material/card';
....
 imports: [
    BrowserModule,
    HttpClientModule,
    MatCardModule
  ],
 
 
search.html
<div *ngIf="searchResult">
<mat-card class="example-card"  *ngFor="let user of searchResult.items">
  <mat-card-header>
    {{ user.login }}   
  </mat-card-header>
  <img class="profile-image" mat-card-image [src]="user.avatar_url" alt="Photo of a Shiba Inu">
  <mat-card-content>
    content
  </mat-card-content>
</mat-card>
</div>


Video:5 -> Routing, multiple routing, pass a route parameter, load data based on routing
--------

contnents
------------
<base href>
Router imports
Configuration
Router outlet
Router link
Router state
Summary

need to use base-href
index.html
<base href="/">

create appRoutes.ts

import { Routes } from '@angular/router';
import { CircularComponent } from './circular/circular.component';
import { SearchComponent } from './search/search.component';

export const appRoutes: Routes = [
    { path:'circular', component:CircularComponent },
    { path:'search', component:SearchComponent}
]

routeParams implementation in appRoutes.ts

import { Routes } from '@angular/router';
import { CircularComponent } from './circular/circular.component';
import { SearchComponent } from './search/search.component';
import { UserComponent } from './user/user.component';

export const appRoutes: Routes = [
    { path:'circular', component:CircularComponent },
    { path:'search', component:SearchComponent},
    { path:'user/:userId', component:UserComponent}
]
app.module.ts
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { appRoutes } from './app.routes';
.....

import: [
RouterModule.forRoot(appRoutes),
BrowserModule,
HttpClientModule
]

app.html


<router-outlet></router-outlet>       <!--  to implement router in our applicaiton -->

goto localhost:4200/search

find one result  and click
search.html
   <button  mat-button (click)="showUserDetails(user)">{{ user.login }}   </button>
  
search.component.ts
import { Router } from '@angular/router';
 showUserDetails(user){
    this.router.navigate(['user', user.login]);
  }

github.service.ts
.....

  getUserDetails(userId):Observable<any>{
    const url  = 'https://api.github.com/users/'+userId;
    return this.http.get(url).map(
      res =>{
        const user = res;
        return user;
      }
    )
  }
 
user.component.ts
import { ActivatedRoute } from '@angular/router';
....
private userDetail;

  constructor( private activatedRouter:ActivatedRoute, private githubService: GithubService) { }

  ngOnInit() {
    const userId = this.activatedRouter.snapshot.params['userId'];
    console.log(userId)
    this.githubService.getUserDetails(userId).subscribe(
      res =>{
        this.userDetail = res;
        console.log(this.userDetail)
      }
    )
  }
 
 
user.html
<h1>User Details page</h1>
<div *ngIf="userDetail">
  <h4>{{userDetail.name}}</h4>
  <p>email : {{userDetail.email}}</p>
  <small>followers: {{userDetail.followers}}</small>
</div>


Video:6 -> pipes, Debug angular 2, build for proeduction
----------
simple default pipes
<h4>{{userDetail.name | uppercase}}</h4>
  <p>email : {{userDetail.email}}</p>
  <small>followers: {{userDetail.followers}}</small>
  <p>created at:{{userDetail.created_at | date }}</p>
 
For Debugging:

Install chrome Augury plugin

 angular tree, state of the compoent, compoennt dependencies



Ref: ThatJsdude