Angular

0.0 Notes

• EcmaScript is Standard & JS is implementation
• TypeScript = JS + Strong typing
• Interpolation (1 way data binding) refers to embedding expressions into marked up text. By default, interpolation uses the double curly braces {{ and }} as delimiters
• Event binding is used to handle the events raised by the user actions like button click, mouse movement, keystrokes, etc.
  eg: (click)=handleLogin()
• 2 way Data binding ,
  eg : [(ngModel)] = "data"
• Dependency Injection -
  eg :
  import { Rourter } from '@angular/router';
  constructor(router : Router){}
• href - will refresh the page!... use routerLink

1.1 Installation

# To install the Angular CLI
npm install -g @angular/cli

1.2 Settings

# To enable execution of PowerShell scripts
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

# if npm install failed?
npm config set legacy-peer-deps true

1.3 Create a workspace and initial application

# To create a new workspace
ng new my-app

1.4 Run

# Run the application
ng serve --open

2.1 Commands

# create component
ng generate component component-name
ng g c component-name

# create module
ng generate module module-name 
ng g m module-name

# create service
ng generate service service-name 
ng g s service-name

2.2 Concept

# Basics
  Components
  Data Binding
  Routing
  Modules

# Features
  Forms & Validations
  Rest API Calls
  Dependency Injection

3.1 IF

# Simple if else condition
<h2 *ngIf="show; then ifBlock2 else elseBlock2">I am techworldthink</h2>
<ng-template #ifBlock2>
  <h2>Sign in first</h2>
</ng-template>
<ng-template #elseBlock2>
  <h2>Sign in first</h2>
</ng-template>

3.2 For

# Simple for loop - html
<h3 *ngFor="let each of users">{{each}}</h3>
<div *ngFor="let each of userDetails">
  <h4>{{each.name}} - {{each.email}} - {{each.phone}}</h4>
</div>

# Simple for loop - ts
users=['A','B','C'];
  userDetails = [
    {name:'A',email:'a@gmail.com',phone:'111'},
    {name:'B',email:'b@gmail.com',phone:'222'},
    {name:'C',email:'c@gmail.com',phone:'333'},
  ];

4.1 Button Click

# html
<button (click)="changeColor()" > Dark Mode </button>

# ts
color = 'red';
changeColor() {
    this.color = 'black';
  }

5.1 Form - Template Driven Form

# html
<form #basicForm="ngForm" (submit) = "getData(basicForm.value)">
  <input type="text" ngModel name="user" placeholder="username" />
  <br/><br/>
  <input type="text" ngModel name="email" placeholder="email" />
  <br/><br/>
  <input type="text" ngModel name="password" placeholder="password" />
  <br/><br/>
  <button>Register</button>
</form>

# ts
userData:any = {};
getData(data: NgForm) {
  console.warn(data);
  this.userData = data;
  console.warn(this.userData.user);
}

5.2 Form - Reactive Form

# html
<form [formGroup]="loginForm" (ngSubmit)="loginUser()">
  <input type="text" placeholder="Name" formControlName="user"/>
  <br />
  <input type="password" placeholder="Password" formControlName="pass"/>
  <br />
  <button >Login</button>
</form>

# ts
loginForm !: FormGroup;

constructor(
  private _fb: FormBuilder
) {
  this.dataForm();
}

dataForm() {
  this.loginForm = this._fb.group({
    user: [
      '',
      Validators.compose([
        Validators.required,
      ]),
    ],
    pass: [
      '',
      Validators.compose([
        Validators.required,
      ]),
    ],
  });
}

loginUser() {
    console.warn(this.loginForm.value);
  }

5.3 Form - Reactive Form - validation

# html
<form [formGroup]="loginForm" (ngSubmit)="loginUser()">
  <input type="text" placeholder="Name" formControlName="user"/>
  <br />
  <span *ngIf="user && user.invalid && user.touched">this input field is not valid</span>
  <br />
  <input type="password" placeholder="Password" formControlName="pass"/>
  <br />
  <span *ngIf="pass && pass.invalid && pass.touched">this input field is not valid</span>
  <br />
  <button [disabled]="loginForm.invalid">Login</button>
</form>

# ts
loginForm = new FormGroup({
    user: new FormControl('',[Validators.required,Validators.email]),
    pass: new FormControl('',[Validators.required,Validators.minLength(5)]),
  })


loginUser() {
    console.warn(this.loginForm.value);
  }

6.1 Pipes

# html
<ul>
  <li>{{message}}</li>
  <li>{{message | uppercase}}</li>
  <li>{{message | lowercase}}</li>
  <li>{{date | date}}</li>
  <li>{{date | date:'fullDate'}}</li>
</ul>

<h1>Pipes Advance</h1>
<ul>
  <li>{{message | slice :3:8}}</li>
  <li>{{user | json}}</li>
  <li>{{user | json | uppercase}}</li>
  <li>{{003.3500 | number:'1.2-3'}}</li>
  <li>{{100 | currency}}</li>
  <li>{{100 | currency:'INR'}}</li>
</ul>

7.1 Routing

# html
<a routerLink="">Home</a>
<a routerLink="about">About</a>
<a routerLink="user">User</a>
<router-outlet></router-outlet>

# app-routing.module.ts 
const routes: Routes = [
  { component: AboutComponent, path: 'about' },
  { component: UserComponent, path: 'user' },
  { component: HomeComponent, path: '' },
];

8.1 Http - get - post - put - delete

# service file
getEmployees():Observable<Employee[]>{
  return this.http.get<Employee[]>("http://localhost:8080/employees");
}

addEmployee(employee:Employee):Observable<Employee>{
  return this.http.post<Employee>("http://localhost:8080/employees",employee);
}

updateEmployee(employee:Employee):Observable<Employee>{
  return this.http.put<Employee>("http://localhost:8080/employees/"+employee.id,employee);
}

deleteEmployee(id:number):Observable<Employee>{
  return this.http.delete<Employee>("http://localhost:8080/employees/"+id);
}

# ts file
public errorMessage: String = '';
onSubmit(dataFromForm:any) {
  console.log(dataFromForm);
  return this.consumerService.createBusiness(dataFromForm).subscribe(
    (data: any) => {
      console.log(data);
    },
    (error: any) => {
      if (error.error.error != null) this.errorMessage = error.error.error;
      else this.errorMessage = error.error.message;
    }
  );
}

8.2 Http - header

# service file
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
  }),
};

login(id: string, password: string): Observable<any> {
  return this.http.post(
    // BaseURLs - A classfile that holds all static URLS
    BaseURLs.AUTH_API + 'login',
    {
      id,
      password,
    },
    httpOptions
  );
}

8.3 Http - Authentication header - Interceptor

# app.module.ts
providers: [
SampleService1,
SampleService2,
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
]


# service file
import {
  HTTP_INTERCEPTORS,
  HttpEvent,
  HttpErrorResponse,
} from '@angular/common/http';

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

import {
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
} from '@angular/common/http';

import { BehaviorSubject, Observable, throwError } from 'rxjs';
import { catchError, filter, switchMap, take } from 'rxjs/operators';
import { AuthServiceService } from '../services/auth-service.service';
import { TokenServiceService } from '../services/token-service.service';

const TOKEN_HEADER_KEY = 'Authorization'; 

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  private isRefreshing = false;
  private refreshTokenSubject: BehaviorSubject<any> = new BehaviorSubject<any>(
      null
  );
  constructor(
      private tokenService: TokenServiceService,
      private authService: AuthServiceService
  ) { }
  intercept(
      req: HttpRequest<any>,
      next: HttpHandler
  ): Observable<HttpEvent<Object>> {
      let authReq = req;
      const token = this.tokenService.getToken();
      if (token != null) {
          authReq = this.addTokenHeader(req, token);
      }
      return next.handle(authReq).pipe(
          catchError((error) => {
              //console.log(error);
             // console.log(error.error.message);
              if (
                  error instanceof HttpErrorResponse &&
                  //!authReq.url.includes('authorization-service/login') &&
                  //error.status === 403
                  error.error.message == "Invalid token"
              ) {
                  alert("Session TimeOut. Login Agian!");
                  this.logout();
                  window.location.href = '/login';
                  return throwError(error);
                  // this.handle401Error(authReq, next);
              }
              return throwError(error);
          })
      );
  }
  
  private addTokenHeader(request: HttpRequest<any>, token: string) {
      /* for Spring Boot back-end */
      return request.clone({
          headers: request.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + token),
      });
  }

  logout(): void {
      this.tokenService.signOut();
      window.location.reload();
  }
}

export const authInterceptorProviders = [
  { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
];

9.1 Session storage - JWT Token

# service file
import { Injectable } from '@angular/core';
const TOKEN_KEY = 'auth-token';
const USER_KEY = 'auth-user';
@Injectable({
  providedIn: 'root'
})
export class TokenServiceService {

  constructor() {}


  public getToken(): string | null {
    return window.sessionStorage.getItem(TOKEN_KEY);
  }

  public saveToken(token: string): void {
    window.sessionStorage.removeItem(TOKEN_KEY);
    window.sessionStorage.setItem(TOKEN_KEY, token);
  }

  
  public getUser(): any {
    const user = window.sessionStorage.getItem(USER_KEY);
    if (user) {
      return JSON.parse(user);
    }
    return {};
  }
  

  public saveUser(user: any): void {
    window.sessionStorage.removeItem(USER_KEY);
    window.sessionStorage.setItem(USER_KEY, JSON.stringify(user));
  }


  signOut(): void {
    window.sessionStorage.clear();
  }

}

10.1 Bootstrap

# To install bootstrap and jquery
npm install bootstrap --save
npm install jquery --save
npm install popper.js

# To use bootstrap and jquery.
# Include this in angular.json file
"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.css"
            ],
"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ]

11.1 Error componant - undefined url pattern handle!

# create an ErrorComponent & add the path to the last
{path:'**',component : ErrorComponent}

11.2 Page redirect

import { Rourter } from '@angular/router';
constructor(private router : Router){}
this.router.navigate(['welcome'])

# pass parameter
this.router.navigate(['welcome',this.username])

11.3 Url parameter passing

# modules
{path:'login/:username',component : ErrorComponent}

# component file
import { ActivatedRoute } from '@angular/router';
constructor(private route : ActivatedRoute){}

ngOnInit(){
  console.log(this.route.snapshot.params['username']);
}

12.1 Class

# create class
export class Todo {
  constructor(
    public id: number,
    public description: string
  ){

  }
}

# list of Todo objects
todos = [
new Todo(1,'test'),
new Todo(2,'test')
]

13.1 Route Guard

# create a service - routeGuard
# inside routeGuard - service file
import { CanActivate } from '@angular/router';

export class RouteGuardService implements CanActivate{
  canActivate(ActivatedRouteSnapshot,RouterStateSnapshot){
    if(this.authService.isUserLoggedIn())
      return true;
    return false;
  }
}

# routing module file
{
  path: 'user-list', component: UserListComponent,
  canActivate: [RouteGuardService],
}