Show Table Date in angular component both table and grid view

Hello guys,

Some Scenario , as per our client or company requirement, We have to render same data in 1 component both table and grid view. 

You can style according to as per our requirement and more functionality.

Lets set up first our angular project by terminal.(ng new grid-listangular). Here grid-listangular is the project name. you can choose different name as well.

Make sure to import all necessary module in app.modules.ts file.

Then now create a component ng g c gridlist(gridlist is component name).

Here we are fetching data from dummy api url, you can replace your own api. Make sure import  import {HttpClientModule} from "@angular/common/http";

   Here is the gridlist.component.html  code.

<div class="container">

<div class="main">

  <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="grid">

      <label ngbButtonLabel class="btn-primary">

    <input ngbButton type="radio" [value]="false"> List

  </label>

    <label ngbButtonLabel class="btn-primary">

    <input ngbButton type="radio" [value]="true"> Grid

  </label>

  </div>

</div>

  <div class="row">

      <div *ngIf="!grid" style="width:100%">

       <table class="table">

    <thead>

      <tr class="text-center">

        <th>UserId</th>

        <th>Id</th>

        <th>Title</th>

        <th>Completed</th>

      </tr>

    </thead>

    <tbody>

      <tr *ngFor="let data of totalData" class="text-center">

        <td>{{data.userId}}</td>

        <td>{{data.id}}</td>

        <td>{{data.title}}</td>

      <td>{{data.completed}}</td>

      </tr>

 

    </tbody>

  </table>

     </div>

    <div *ngIf="grid" style="width:100%">

    <div class="row">

  <div class="col-4" *ngFor="let data of totalData" >

<div class="card">

  <div class="card-header">User Details</div>

  <div class="card-body">

 <ul>

  <li>UserId : {{data.userId}}</li>

  <li>Id : {{data.id}}</li>

  <li>Title : {{data.title}}</li>

   <li>Completed : {{data.completed}}</li>

</ul> 

  </div>

</div>

  </div>

</div>

</div>

  </div>

</div>

   Here is the gridlist.component.ts  code.

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

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

@Component({

  selector: 'my-app',

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

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

})

export class AppComponent  {

constructor(private httpClient: HttpClient) { }

  grid = false;

  totalData = [];

 ngOnInit() {

   this.getData();

  }

  getData(){

this.httpClient.get<any>('https://jsonplaceholder.typicode.com/todos').subscribe(data => {

 this.totalData =data

 console.log("data",this.totalData)

})

  }

}

   Here is the gridlist.component.css  code.

p {

  font-family: Lato;

}

.btn-group-toggle {

  float: right;

}

.card{

  height:200px;

  margin-bottom :20px;

}

.main{

  margin-top :20px;

  height:80px;

}

   Here is the Final ui .

          data view in table list

  

data view in table list

 

Thanks You guys.Happy coding😀