Angular Cheat Sheet

February 4, 2021

5:15 am

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AddComponent } from './add/add.component';
import { HomeComponent } from './home/home.component';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { HttpClientModule } from '@angular/common/http'

@NgModule({
  declarations: [
    AppComponent,
    AddComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

if app-routing.module.ts is not present then run this in root folder
ng generate module app-routing –flat –module=app

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AddComponent } from './add/add.component';

const routes: Routes = [
  { path: 'add', component: AddComponent },
  { path: 'add/:num1/:num2', component: AddComponent },
  // { path: 'sub', component: SubComponent },
  // { path: 'mul', component: MulComponent },
  // { path: 'div', component: DivComponent },
  { path: '**', component: HomeComponent },
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

app.component.html

<a routerLink="/"  routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a> |
<a routerLink="/add"  routerLinkActive="active">Add</a>
<router-outlet></router-outlet>

app.component.css

.active {
  background-color: beige;
}

home.component.ts

ng g c home

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms'
import { HomeService } from './home.service'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  fruits = ["Orange", "Mango", "Banana", "Apple"];

  num1: number = 0;
  square: number = 0;

  form = new FormGroup({
    num1: new FormControl(),
    num2: new FormControl()
  });
  formResult: any;

  userRecords: any;

  constructor(private service: HomeService) { }

  ngOnInit() {
  }

  getSqr() {
    var x = this.num1;
    this.square = x * x;
  }

  addNum() {
    let x = parseInt(this.form.value.num1);
    let y = parseInt(this.form.value.num2);
    this.formResult = x + y;
  }

  getUsers() {
    this.service.getData().subscribe((response) => {
      console.log(response);
      this.userRecords = response;
    })
  }

}

home.component.html

<p>home works!</p>
{{ fruits }}

<div *ngFor="let fruit of fruits">
  {{fruit}}
</div>


<input type="text" (keyup)="getSqr()" [(ngModel)]="num1"/>
<div>
  Square of {{num1}} is {{square}}
</div>


<form [formGroup]="form" (submit)="addNum()">
  <input type="text" formControlName="num1"/>
  <input type="text" formControlName="num2"/>
  {{ form.value | json }}
  <div>
    Result: {{ formResult }}
  </div>
  <input type="submit" value="Add"/>
</form>


<button (click)="getUsers()">Get Data from Json Placeholder</button>
<div>
  {{userRecords}}
  <pre>
    {{userRecords | json}}
  </pre>
</div>

home.service.ts

cd home
ng g s home

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class HomeService {

  constructor(private http: HttpClient) { }

  getData() {
    let url = "https://jsonplaceholder.typicode.com/users";
    return this.http.get(url);
  }
}

add.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-add',
  templateUrl: './add.component.html',
  styleUrls: ['./add.component.css']
})
export class AddComponent implements OnInit {

  number: number;
  param1: number;
  param2: number;

  constructor(private route: ActivatedRoute, private router: Router) {
    console.log(this.route.snapshot.url)
    console.log(this.route.snapshot.params)
    this.number = parseInt(this.route.snapshot.queryParamMap.get('id'))
    this.param1 = parseInt(this.route.snapshot.params.num1);
    this.param2 = parseInt(this.route.snapshot.params.num2);
  }

  ngOnInit() {
    console.log(this.number)
    console.log(this.param1)
    console.log(this.param2)

    // setTimeout(() => {
    //   this.router.navigate(['home']);
    // }, 3000)
  }

}

my-app\src\app\interceptor\httpconfig.interceptor.ts

import { Injectable } from '@angular/core';
import {
    HttpInterceptor,
    HttpRequest,
    HttpResponse,
    HttpHandler,
    HttpEvent,
    HttpErrorResponse
} from '@angular/common/http';

import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

@Injectable()
export class HttpConfigInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const token: any = localStorage.getItem('token');
        // const token: string = `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1X25hbWUiOiJhZG1pbiIsInB3ZCI6IkBkbWluIiwiaWF0IjoxNjEyNjM2OTc5fQ.ehlxu7z_1HSW4bPK902nLOAZOpHtutfkJ43lCxQnL68`;
        if (token) {
            request = request.clone({ headers: request.headers.set('Authorization', 'Bearer ' + token) });
        }

        if (!request.headers.has('Content-Type')) {
            request = request.clone({ headers: request.headers.set('Content-Type', 'application/json') });
        }

        request = request.clone({ headers: request.headers.set('Accept', 'application/json') });

        return next.handle(request).pipe(
            map((event: HttpEvent<any>) => {
                if (event instanceof HttpResponse) {
                    console.log('event--->>>', event);
                }
                return event;
            }));
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';

import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'
import { HttpConfigInterceptor } from './interceptor/httpconfig.interceptor';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    HttpClientModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HttpConfigInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]

})
export class AppModule { }