{"id":1023,"date":"2021-02-04T05:15:54","date_gmt":"2021-02-04T05:15:54","guid":{"rendered":"https:\/\/codeinsightacademy.com\/blog\/?p=1023"},"modified":"2024-06-21T10:15:49","modified_gmt":"2024-06-21T10:15:49","slug":"angular-cheat-sheet","status":"publish","type":"post","link":"https:\/\/codeinsightacademy.com\/blog\/angular-js\/angular-cheat-sheet\/","title":{"rendered":"Angular Cheat Sheet"},"content":{"rendered":"\n

https:\/\/angular.io\/guide\/setup-local<\/a><\/p>\n\n\n\n

app.module.ts<\/strong><\/p>\n\n\n\n

import { BrowserModule } from '@angular\/platform-browser';\nimport { NgModule } from '@angular\/core';\n\nimport { AppComponent } from '.\/app.component';\nimport { AppRoutingModule } from '.\/app-routing.module';\nimport { AddComponent } from '.\/add\/add.component';\nimport { HomeComponent } from '.\/home\/home.component';\n\nimport { FormsModule, ReactiveFormsModule } from '@angular\/forms';\n\nimport { HttpClientModule } from '@angular\/common\/http'\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    AddComponent,\n    HomeComponent\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    FormsModule,\n    ReactiveFormsModule,\n    HttpClientModule<\/strong>\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }<\/code><\/pre>\n\n\n\n
app-routing.module.ts<\/strong><\/p>\n\n\n\n
if app-routing.module.ts is not present then run this in root folder
ng generate module app-routing –flat –module=app<\/p>\n\n\n\n
import { NgModule } from '@angular\/core';\nimport { CommonModule } from '@angular\/common';\nimport { RouterModule, Routes } from '@angular\/router';\nimport { HomeComponent } from '.\/home\/home.component';\nimport { AddComponent } from '.\/add\/add.component';\n\nconst routes: Routes = [\n  { path: 'add', component: AddComponent },\n  { path: 'add\/:num1\/:num2', component: AddComponent },<\/strong>\n  \/\/ { path: 'sub', component: SubComponent },\n  \/\/ { path: 'mul', component: MulComponent },\n  \/\/ { path: 'div', component: DivComponent },\n  { path: '**', component: HomeComponent },<\/strong>\n];\n\n@NgModule({\n  declarations: [],\n  imports: [\n    CommonModule,\n    RouterModule.forRoot(routes)\n  ],\n  exports: [\n    RouterModule\n  ]\n})\nexport class AppRoutingModule { }\n<\/code><\/pre>\n\n\n\n
app.component.html<\/strong><\/p>\n\n\n\n
<a routerLink=\"\/\"  routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{exact: true}\">Home<\/a> |\n<a routerLink=\"\/add\"  routerLinkActive=\"active\">Add<\/a>\n<router-outlet><\/router-outlet>\n<\/code><\/pre>\n\n\n\n
app.component.css<\/strong><\/p>\n\n\n\n
.active {\n  background-color: beige;\n}\n<\/code><\/pre>\n\n\n\n
home.component.ts<\/strong><\/p>\n\n\n\n
ng g c home<\/p>\n\n\n\n
import { Component, OnInit } from '@angular\/core';\nimport { FormGroup, FormControl } from '@angular\/forms'\nimport { HomeService } from '.\/home.service'\n\n@Component({\n  selector: 'app-home',\n  templateUrl: '.\/home.component.html',\n  styleUrls: ['.\/home.component.css']\n})\nexport class HomeComponent implements OnInit {\n\n  fruits = [\"Orange\", \"Mango\", \"Banana\", \"Apple\"];\n\n  num1: number = 0;\n  square: number = 0;\n\n  form = new FormGroup({\n    num1: new FormControl(),\n    num2: new FormControl()\n  });\n  formResult: any;\n\n  userRecords: any;\n\n  constructor(private service: HomeService) { }\n\n  ngOnInit() {\n  }\n\n  getSqr() {\n    var x = this.num1;\n    this.square = x * x;\n  }\n\n  addNum() {\n    let x = parseInt(this.form.value.num1);\n    let y = parseInt(this.form.value.num2);\n    this.formResult = x + y;\n  }\n\n  getUsers() {\n    this.service.getData().subscribe((response) => {\n      console.log(response);\n      this.userRecords = response;\n    })\n  }\n\n}\n<\/code><\/pre>\n\n\n\n
home.component.html<\/strong><\/p>\n\n\n\n
<p>home works!<\/p>\n{{ fruits }}\n\n<div *ngFor=\"let fruit of fruits\">\n  {{fruit}}\n<\/div>\n\n\n<input type=\"text\" (keyup)=\"getSqr()\" [(ngModel)]=\"num1\"\/>\n<div>\n  Square of {{num1}} is {{square}}\n<\/div>\n\n\n<form [formGroup]=\"form\" (submit)=\"addNum()\">\n  <input type=\"text\" formControlName=\"num1\"\/>\n  <input type=\"text\" formControlName=\"num2\"\/>\n  {{ form.value | json }}\n  <div>\n    Result: {{ formResult }}\n  <\/div>\n  <input type=\"submit\" value=\"Add\"\/>\n<\/form>\n\n\n<button (click)=\"getUsers()\">Get Data from Json Placeholder<\/button>\n<div>\n  {{userRecords}}\n  <pre>\n    {{userRecords | json}}\n  <\/pre>\n<\/div>\n<\/code><\/pre>\n\n\n\n
home.service.ts<\/strong><\/p>\n\n\n\n
cd home
ng g s home<\/p>\n\n\n\n
import { Injectable } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class HomeService {\n\n  constructor(private http: HttpClient) { }\n\n  getData() {\n    let url = \"https:\/\/jsonplaceholder.typicode.com\/users\";\n    return this.http.get(url);\n  }\n}\n<\/code><\/pre>\n\n\n\n
add.component.ts<\/strong><\/p>\n\n\n\n
import { Component, OnInit } from '@angular\/core';\nimport { ActivatedRoute, Router } from '@angular\/router';\n\n@Component({\n  selector: 'app-add',\n  templateUrl: '.\/add.component.html',\n  styleUrls: ['.\/add.component.css']\n})\nexport class AddComponent implements OnInit {\n\n  number: number;\n  param1: number;\n  param2: number;\n\n  constructor(private route: ActivatedRoute, private router: Router) {\n    console.log(this.route.snapshot.url)\n    console.log(this.route.snapshot.params)\n    this.number = parseInt(this.route.snapshot.queryParamMap.get('id'))\n    this.param1 = parseInt(this.route.snapshot.params.num1);\n    this.param2 = parseInt(this.route.snapshot.params.num2);\n  }\n\n  ngOnInit() {\n    console.log(this.number)\n    console.log(this.param1)\n    console.log(this.param2)\n\n    \/\/ setTimeout(() => {\n    \/\/   this.router.navigate(['home']);\n    \/\/ }, 3000)\n  }\n\n}\n<\/code><\/pre>\n\n\n\n
my-app\\src\\app\\interceptor\\httpconfig.interceptor.ts<\/h5>\n\n\n\n
import { Injectable } from '@angular\/core';\nimport {\n    HttpInterceptor,\n    HttpRequest,\n    HttpResponse,\n    HttpHandler,\n    HttpEvent,\n    HttpErrorResponse\n} from '@angular\/common\/http';\n\nimport { Observable, throwError } from 'rxjs';\nimport { map, catchError } from 'rxjs\/operators';\n\n@Injectable()\nexport class HttpConfigInterceptor implements HttpInterceptor {\n    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {\n        const token: any = localStorage.getItem('token');\n        \/\/ const token: string = `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1X25hbWUiOiJhZG1pbiIsInB3ZCI6IkBkbWluIiwiaWF0IjoxNjEyNjM2OTc5fQ.ehlxu7z_1HSW4bPK902nLOAZOpHtutfkJ43lCxQnL68`;\n        if (token) {\n            request = request.clone({ headers: request.headers.set('Authorization', 'Bearer ' + token) });\n        }\n\n        if (!request.headers.has('Content-Type')) {\n            request = request.clone({ headers: request.headers.set('Content-Type', 'application\/json') });\n        }\n\n        request = request.clone({ headers: request.headers.set('Accept', 'application\/json') });\n\n        return next.handle(request).pipe(\n            map((event: HttpEvent<any>) => {\n                if (event instanceof HttpResponse) {\n                    console.log('event--->>>', event);\n                }\n                return event;\n            }));\n    }\n}<\/code><\/pre>\n\n\n\n
app.module.ts<\/strong><\/p>\n\n\n\n
import { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\n\nimport { AppRoutingModule } from '.\/app-routing.module';\nimport { AppComponent } from '.\/app.component';\nimport { RouterModule } from '@angular\/router';\n\nimport {FormsModule, ReactiveFormsModule} from '@angular\/forms';\nimport { HttpClientModule, HTTP_INTERCEPTORS } from '@angular\/common\/http'\nimport { HttpConfigInterceptor } from '.\/interceptor\/httpconfig.interceptor';\n\n\n@NgModule({\n  declarations: [\n    AppComponent,\n  ],\n  imports: [\n    HttpClientModule\n  ],\n  providers: [\n    { provide: HTTP_INTERCEPTORS, useClass: HttpConfigInterceptor, multi: true }\n  ],\n  bootstrap: [AppComponent]\n\n})\nexport class AppModule { }\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
https:\/\/angular.io\/guide\/setup-local app.module.ts app-routing.module.ts if app-routing.module.ts is not present then run this in root folderng generate module app-routing –flat –module=app app.component.html app.component.css home.component.ts ng g c home home.component.html home.service.ts cd homeng g s home add.component.ts my-app\\src\\app\\interceptor\\httpconfig.interceptor.ts app.module.ts<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,18],"tags":[30],"_links":{"self":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/1023"}],"collection":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/comments?post=1023"}],"version-history":[{"count":11,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/1023\/revisions"}],"predecessor-version":[{"id":2723,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/1023\/revisions\/2723"}],"wp:attachment":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/media?parent=1023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/categories?post=1023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/tags?post=1023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}