In this article, we will display the products into a component. First of all, we need to create the following component using angular CLI generators.

ng g c ./crud/view
ng g c ./crud/create
ng g c ./crud/update
ng g c ./crud/read

Created components are automatically injected into your app module under declaration section. Now, your app module code like this.

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {HttpClientModule} from "@angular/common/http";
import { ViewComponent } from './crud/view/view.component';
import { CreateComponent } from './crud/create/create.component';
import { UpdateComponent } from './crud/update/update.component';
import { ReadComponent } from './crud/read/read.component';

@NgModule({
declarations: [
AppComponent,
ViewComponent,
CreateComponent,
UpdateComponent,
ReadComponent
],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Next, we will configure routes for the components. Open the app-routing.module.ts file and define the paths.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {ViewComponent} from "./crud/view/view.component";
import {CreateComponent} from "./crud/create/create.component";
import {UpdateComponent} from "./crud/update/update.component";
import {ReadComponent} from "./crud/read/read.component";

const routes: Routes = [
{path: '', component: ViewComponent},
{path: 'create', component: CreateComponent},
{path: 'update/:id', component: UpdateComponent},
{path: 'view/:id', component: ReadComponent}
];

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

Finally, your app route module files like this.

const routes: Routes = [
{path: '', component: ViewComponent},
{path: 'create', component: CreateComponent},
{path: 'update/:id', component: UpdateComponent},
{path: 'view/:id', component: ReadComponent}
];

Here, we have configured the path of each component. The view component will display as the root component.

Next, inject CURD service and Router using dependency injection on view component.

constructor(private crudService: CrudService, private router: Router) { }

Declare a variable for $ to accessing the jquery elements into our angular application.

declare var $;

create the following class variables

public products: any = [];
@ViewChild('productsTable') Table;
public dataTable: any;

Next, create a method for loading all products. It is using the crud service to getting data from our web API.

loadProducts(){
this.crudService.getProducts().subscribe(
productData => {
this.products = productData;
this.dataTable = $(this.Table.nativeElement);
setTimeout(()=>{this.dataTable.DataTable();}, 2000);
}
);
}

the following code will initialize datatables after the data render.

this.dataTable = $(this.Table.nativeElement);
setTimeout(()=>{this.dataTable.DataTable();}, 2000);

We will create another one method for processing navigation. It has two input parameters. One is a path, and another one is product id.

getNavigation(link, id){
if(id === ''){
this.router.navigate([link]);
} else {
this.router.navigate([link + '/' + id]);
}
}

Now we want load products during application initialisation. So we need to call the loadProducts method on ngOnInit method.

ngOnInit() {
this.loadProducts();
}

Finally, our component class file like the following.

view.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {CrudService} from "../../services/crud.service";
import {Router} from "@angular/router";
declare var $;
@Component({
selector: 'app-view',
templateUrl: './view.component.html',
styleUrls: ['./view.component.scss']
})
export class ViewComponent implements OnInit {
public products: any = [];
@ViewChild('productsTable') Table;
public dataTable: any;
constructor(private crudService: CrudService, private router: Router) { }

ngOnInit() {
this.loadProducts();
}

loadProducts(){
this.crudService.getProducts().subscribe(
productData => {
this.products = productData;
this.dataTable = $(this.Table.nativeElement);
setTimeout(()=>{this.dataTable.DataTable();}, 2000);
}
);
}

getNavigation(link, id){
if(id === ''){
this.router.navigate([link]);
} else {
this.router.navigate([link + '/' + id]);
}
}

}

Everything perfect on the component class file. Next, we will move on to component template file.

Open view.component.html file. And write the following code.

<div class="container">
<div class="row">
<div class="col-12 col-lg-12 col-md-12 col-sm-12 col-xl-12 col-xs-12">
<button class="btn btn-success" (click)="getNavigation('create', '')">Create New Product</button>
</div>
</div>
<br>
<div class="row">
<div class="col-12 col-lg-12 col-md-12 col-sm-12 col-xl-12 col-xs-12">
<table #productsTable class="display" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let product of products; let i =index;">
<td>{{i + 1}}</td>
<td>{{product.p_name}}</td>
<td>{{product.p_description}}</td>
<td>$ {{product.p_price}}</td>
<td>
<button type="button" class="btn btn-success" (click)="getNavigation('view', product.p_id)">View</button>
<button type="button" class="btn btn-warning" (click)="getNavigation('update', product.p_id)">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Create button navigates to create page during click event triggered.

<button class="btn btn-success" (click)="getNavigation('create', '')">Create New Product</button>
</div>

We will create a table with a template reference variable. The template reference variable will help for accessing that element into the component class file.

<table #productsTable class="display" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<button type="button" class="btn btn-success">View</button>
<button type="button" class="btn btn-warning">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

use ngFor to iterate the products into the table.

<tr *ngFor="let product of products; let i =index;">
<td>{{i + 1}}</td>
<td>{{product.p_name}}</td>
<td>{{product.p_description}}</td>
<td>$ {{product.p_price}}</td>
<td>
<button type="button" class="btn btn-success" (click)="getNavigation('view', product.p_id)">View</button>
<button type="button" class="btn btn-warning" (click)="getNavigation('update', product.p_id)">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</td>
</tr>

now our table looks likes the following.

<table #productsTable class="display" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let product of products; let i =index;">
<td>{{i + 1}}</td>
<td>{{product.p_name}}</td>
<td>{{product.p_description}}</td>
<td>$ {{product.p_price}}</td>
<td>
<button type="button" class="btn btn-success" (click)="getNavigation('view', product.p_id)">View</button>
<button type="button" class="btn btn-warning" (click)="getNavigation('update', product.p_id)">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>

Finally, our view component template file like the following

<div class="container">
<div class="row">
<div class="col-12 col-lg-12 col-md-12 col-sm-12 col-xl-12 col-xs-12">
<button class="btn btn-success" (click)="getNavigation('create', '')">Create New Product</button>
</div>
</div>
<br>
<div class="row">
<div class="col-12 col-lg-12 col-md-12 col-sm-12 col-xl-12 col-xs-12">
<table #productsTable class="display" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let product of products; let i =index;">
<td>{{i + 1}}</td>
<td>{{product.p_name}}</td>
<td>{{product.p_description}}</td>
<td>$ {{product.p_price}}</td>
<td>
<button type="button" class="btn btn-success" (click)="getNavigation('view', product.p_id)">View</button>
<button type="button" class="btn btn-warning" (click)="getNavigation('update', product.p_id)">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

our output like this