On tab click load the content dynamically using angular CLI

Issue

I am new to angular, I have created a tab list where on clicking on the tab respective content should load. On clicking the tab i am able to get the values in console as shown in below image.

Image

I need to get tab content dynamically on clicking the tab. How to add show the content in html page.

dashboard.component.html

<div class="container-fluid" style="padding-left: 0px!important; padding-right: 0px!important">
<ol class="breadcrumb tab_list" id="combo1">
    <li id="asset"><a (click) = "onClick($event)" *ngFor = "let a of assets" [id] = "a.id" class="btn basic"> {{ a.name }}<img class="img-responsive image" [src] = "imagePath"></a></li>
</ol> 
<router-outlet></router-outlet>

dashboard.component.ts

    import { Component, OnInit } from '@angular/core';
// import { MdTab } from '@angular/material'
import { MatTabsModule } from '@angular/material';
import { RouterModule } from '@angular/router';
import { Tab1Component } from './tab1/tab1.component';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  imagePath: string;
  constructor() { 
    this.imagePath = '/assets/images/right-arrow.svg'
  }
  values = [
    { id: 1, name: "floor1" },
    { id: 2, name: "floor2" },
    { id: 3, name: "floor3" },
    { id: 4, name: "floor4" }
  ];

  routes = [{
    path: 'tab1', 
    component: Tab1Component
  }];
  assets = [
    { id: 1, name: "ICU" },
    { id: 2, name: "Anesthesia" },
    { id: 3, name: "Cardiology" },
    { id: 4, name: "Gynecology" },
    { id: 5, name: "Neurology"}
  ];

  onClick(event) {
    const newVal = event.target.id;
    console.log(newVal);
    if(newVal == 1) {
      console.log("Content 1");
      var content = "This is content 1";
    } 
    if(newVal == 2) {
      console.log("Content 2");
    }
  }

  tabLoadTimes: Date[] = [];

  getTimeLoaded(index: number) {
    if (!this.tabLoadTimes[index]) {
      this.tabLoadTimes[index] = new Date();
    }

    return this.tabLoadTimes[index];
  }  

    ngOnInit() {
  }
}

Solution

Here’s a stackblitz that shows a way.

https://stackblitz.com/edit/angular-s8smcd

Answered By – Kenpachi

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.