Routing

abhishekrathore · abhishekrathore · commit 782dc6fea9ba · 2021-07-26T12:30:19.000+05:30
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,2 +1,6 @@
-<h1>cart : {{cart.length}}</h1>
-<app-home></app-home>
+<h1>cart : {{cart.length}}
+<!-- <app-home></app-home>  -->
+<button class="btn btn-outline-primary" routerLink="/">Home</button>
+<button class="btn btn-outline-primary" routerLink="/cart">Cart</button>
+
+<router-outlet></router-outlet>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -6,7 +6,14 @@ import { AppComponent } from './app.component';
 import { CartComponent } from './cart/cart.component';
 import { ShortenPipe } from './shorten.pipe';
 import { HomeComponent } from './home/home.component';
+import { RouterModule, Routes } from '@angular/router';
 
+
+const routes:Routes = [
+  {path:'',component:HomeComponent},
+  {path:'cart',component:CartComponent},
+
+]
 @NgModule({
   declarations: [
     AppComponent,
@@ -16,7 +23,8 @@ import { HomeComponent } from './home/home.component';
   ],
   imports: [
     BrowserModule,
-    FormsModule
+    FormsModule,
+    RouterModule.forRoot(routes)
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/cart/cart.component.ts b/src/app/cart/cart.component.ts
@@ -24,16 +24,17 @@ export class CartComponent implements OnInit, OnChanges {
     },2000)
 
     this.cart = this.dService.cart; //reference binding
+    this.customer = this.dService.name
    }
 
   ngOnInit(): void {
-    console.log('ngOnInit')
+    console.log(this.constructor.name,'ngOnInit')
   }
   ngOnChanges(): void {
-    console.log('ngOnChanges')
+    console.log(this.constructor.name,'ngOnChanges')
   }
   ngOnDestroy(): void {
-    console.log('ngOnDestroy')
+    console.log(this.constructor.name,'ngOnDestroy')
   }
   // getItem(e:any){
   //   this.item= e.target.value;
diff --git a/src/app/data.service.ts b/src/app/data.service.ts
@@ -5,6 +5,7 @@ import { Injectable } from '@angular/core';
 })
 export class DataService {
   cart = [];
+  name='dummyName';
   constructor() {
     console.log(this.constructor.name)
    }
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -7,4 +7,4 @@ <h3> Total Items via Service: {{cart.length}}</h3>
 
 <br>
 
-<app-cart [customer]="name" (cartEvent)="updateCart($event)"></app-cart>
+<!-- <app-cart [customer]="name" (cartEvent)="updateCart($event)"></app-cart> -->
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
@@ -1,12 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnChanges, OnDestroy, OnInit } from '@angular/core';
 import { DataService } from '../data.service';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
-export class HomeComponent implements OnInit {
+export class HomeComponent implements OnInit,OnChanges,OnDestroy {
   name=''
   items=[];
   cart =[];
@@ -16,13 +16,21 @@ export class HomeComponent implements OnInit {
 
    }
 
-  ngOnInit(): void {
+   ngOnInit(): void {
+    console.log(this.constructor.name,'ngOnInit')
+  }
+  ngOnChanges(): void {
+    console.log(this.constructor.name,'ngOnChanges')
+  }
+  ngOnDestroy(): void {
+    console.log(this.constructor.name,'ngOnDestroy')
   }
 
   enterName(n:any){
-    this.name = n.value;
-    n.value = ''
-   console.log(n.value)
+  //   this.name = n.value;
+  //   n.value = ''
+  //  console.log(n.value)
+  this.dService.name = n.value;
   }
 
   updateCart(e:any){

Original file line number	Diff line number	Diff line change
`@@ -24,16 +24,17 @@ export class CartComponent implements OnInit, OnChanges {`
`24`	`24`	`},2000)`
`25`	`25`
`26`	`26`	`this.cart = this.dService.cart; //reference binding`
	`27`	`+ this.customer = this.dService.name`
`27`	`28`	`}`
`28`	`29`
`29`	`30`	`ngOnInit(): void {`
`30`		`- console.log('ngOnInit')`
	`31`	`+ console.log(this.constructor.name,'ngOnInit')`
`31`	`32`	`}`
`32`	`33`	`ngOnChanges(): void {`
`33`		`- console.log('ngOnChanges')`
	`34`	`+ console.log(this.constructor.name,'ngOnChanges')`
`34`	`35`	`}`
`35`	`36`	`ngOnDestroy(): void {`
`36`		`- console.log('ngOnDestroy')`
	`37`	`+ console.log(this.constructor.name,'ngOnDestroy')`
`37`	`38`	`}`
`38`	`39`	`// getItem(e:any){`
`39`	`40`	`// this.item= e.target.value;`
Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@ import { Injectable } from '@angular/core';`
`5`	`5`	`})`
`6`	`6`	`export class DataService {`
`7`	`7`	`cart = [];`
	`8`	`+ name='dummyName';`
`8`	`9`	`constructor() {`
`9`	`10`	`console.log(this.constructor.name)`
`10`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,4 +7,4 @@ <h3> Total Items via Service: {{cart.length}}</h3>`
`7`	`7`
`8`	`8`	`<br>`
`9`	`9`
`10`		`-<app-cart [customer]="name" (cartEvent)="updateCart($event)"></app-cart>`
	`10`	`+<!-- <app-cart [customer]="name" (cartEvent)="updateCart($event)"></app-cart> -->`