Angular route

Click to setup Angular environment 

In this demonstration, we will demonstrate how to navigate from one component to another component using routing?.

Let's Start

Step 1: - Create “AngularDemo” folder in the D drive

Step 2: - Open Visual Studio Code

Step 3: - Go to File => Click on Open Folder… => Browse and select created folder “AngularDemo” in the D drive

Step 4: - Open Terminal => Go to Terminal => Click on New Terminal => Type ng new AngularRoute => Press Enter 

Step 5: -? Would you like to add Angular routing? (y/N) => Type Y => Press Enter

Step 6: -? Which stylesheet format would you like to use? (Use arrow keys) => Select CSS => Press Enter

Note: - Project created

Step 7: - Go to File => Click on Open Folder… => Browse and select created Project AngularRoute from path D:\AngularDemo\AngularRoute

Step 8: -Project Loaded in Visual Studio Code

Step 9: - Open Terminal => Go to Terminal => Click on New Terminal

Step 10: - Add products class => Type ng g cl products => Press Enter 

Step 11: - Add ProductList component => Type ng g c ProductList => Press Enter 

Step 12: - Add ProductDetails component =>Type ng g c ProductDetails => Press Enter 

Step 13: - Open products.ts file => Copy Past following in products.ts file

export const Products = [
    {
        name: 'Apple Phone',
        price: 699,
        description: 'The Phone runs the iOS operating system (OS)'
    },
    {
        name: 'Samsung Phone',
        price: 599,
        description: 'The Phone runs the android operating system (OS)'
    },
    {
        name: 'China Phone',
        price: 149,
        description: ''
    }
];

Step 14: - Open product-list.component.ts file => Copy Past following in product-list.component.ts file

import { Component, OnInit } from '@angular/core';
import { Products } from '../products';
 
@Component({

  selector: 'app-product-list',

  templateUrl: './product-list.component.html',

  styleUrls: ['./product-list.component.css']

})
export class ProductListComponent implements OnInit {
 
  products = Products;
 
  constructor() { }
 
  ngOnInit(): void {
  }
}

Step 15: - Open product-list.component.html file => Copy Past following in product-list.component.html file

<h2>Products List</h2>

<div *ngFor="let product of products; index as productId">

  <a [title]="product.name+ ' details'" [routerLink]="['/productdetails',productId]">

    <h1>{{product.name}}</h1>

  </a>

  <div *ngIf="product.description">

    Description: {{product.description}}

  </div>

</div>

Step 16: - Open product-details.component.ts file => Copy Past following in product-list.component.ts file

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

import { ActivatedRoute } from '@angular/router';

import { Products } from '../products'
 
@Component({

  selector: 'app-product-details',

  templateUrl: './product-details.component.html',

  styleUrls: ['./product-details.component.css']

})
export class ProductDetailsComponent implements OnInit {
 
  product;
 
  constructor(private route : ActivatedRoute) { }
 
  ngOnInit(): void {

    this.route.paramMap.subscribe(params => {

      this.product = Products[+ params.get('productId')];

    });

  }

}

Step 17: - Open product-details.component.html file => Copy Past following in product-details.component.html file

<h2>Product Details</h2>

<div *ngIf="product">

  <h3>{{ product.name }}</h3>

  <h4>{{ product.price | currency }}</h4>

  <p>{{ product.description }}</p>

</div>

<button [routerLink]="['/']">Back to List</button>

Step 18: - Open app-routing.modules.ts file => Copy Past following in app-routing.modules.ts file

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

import { Routes, RouterModule } from '@angular/router';

import { ProductListComponent } from './product-list/product-list.component';

import { ProductDetailsComponent } from './product-details/product-details.component';

const routes: Routes = [

  { path: '', component: ProductListComponent },

  { path: 'productdetails/:productId', component: ProductDetailsComponent }

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

Step 19: - Open app.component.ts file => Copy Past following in app.component.ts  file

import { Component, VERSION } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'Angular Route ' + VERSION.major;

}

Step 20: - Open app.component.html file => Copy Past following in app.component.html file

<div class="container">

  <h1>Hello {{title}}!</h1>

  <router-outlet></router-outlet>

</div>

Step 21: - To use bootstrap => Open index.html file and add bootstrap CDN link in html head tag.

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>AngularRoute</title>

  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>

  <app-root></app-root>

</body>

</html>

Step 22: - Open Terminal => Type ng serve --o => Press Enter

ALL DONE

Output