Advertisement
knagaraj5

Untitled

Oct 1st, 2020
2,830
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. ACCOUNTS.COMPONENT.HTML
  2.  
  3. <div class="container-fluid">
  4.     <div class="row">
  5.         <div class="col-2">
  6.             <!!=::=%;min-height: 100%;">
  7.                 <div>
  8.                     <h4 class="head-pad"> Manage Account</h4>
  9.                     <button class="btn btn-link" (click)="assignComponent('accStatement')">Account Statement</button>
  10.                     <button class="btn btn-link" (click)="assignComponent('accDetails')">Account Details</button>
  11.                 </div>
  12.                 <div>
  13.                     <h4 class="head-pad">My Profile</h4>
  14.                     <button class="btn btn-link" (click)="assignComponent('viewProfile')">View Profile</button>
  15.                 </div>
  16.                 <div>
  17.                     <h4 class="head-pad">Nominations</h4>
  18.                     <button class="btn btn-link" (click)="assignComponent('nomineeMaintain')">Nominee Maintainance</button>
  19.                 </div>
  20.             </div>
  21.         </div>
  22.         <div class="col-10">
  23.  
  24.             <div style="height: 100%;width: 100%; background-color: rgba(255,0,0,0.1);">
  25.                 <div>
  26.                     <ng-container *ngComponentOutlet="whichComponent"></ng-container>
  27.                 </div>
  28.             </div>
  29.  
  30.         </div>
  31.     </div>
  32. </div>
  33.  
  34.  
  35. ACCOUNTS.COMPONENT.TS
  36.  
  37. import { Component, OnInit } from '@angular/core';
  38. import { AccountDataComponent } from '../account-data/account-data.component';
  39.  
  40. @Component({
  41.   selector: 'app-accounts',
  42.   templateUrl: './accounts.component.html',
  43.   styleUrls: ['./accounts.component.css']
  44. })
  45. export class AccountsComponent implements OnInit {
  46.  
  47.   constructor() { }
  48.   whichComponent
  49.  
  50.   ngOnInit(): void {
  51.   }
  52.   assignComponent(component) {
  53.     if (component === "accStatement") {
  54.       this.whichComponent = AccountDataComponent;
  55.     }
  56.     else if (component === "accDetails") { this.whichComponent = AccountDetailsComponent }
  57.   }
  58.  
  59. }
  60.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement