Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ACCOUNTS.COMPONENT.HTML
- <div class="container-fluid">
- <div class="row">
- <div class="col-2">
- <!!=::=%;min-height: 100%;">
- <div>
- <h4 class="head-pad"> Manage Account</h4>
- <button class="btn btn-link" (click)="assignComponent('accStatement')">Account Statement</button>
- <button class="btn btn-link" (click)="assignComponent('accDetails')">Account Details</button>
- </div>
- <div>
- <h4 class="head-pad">My Profile</h4>
- <button class="btn btn-link" (click)="assignComponent('viewProfile')">View Profile</button>
- </div>
- <div>
- <h4 class="head-pad">Nominations</h4>
- <button class="btn btn-link" (click)="assignComponent('nomineeMaintain')">Nominee Maintainance</button>
- </div>
- </div>
- </div>
- <div class="col-10">
- <div style="height: 100%;width: 100%; background-color: rgba(255,0,0,0.1);">
- <div>
- <ng-container *ngComponentOutlet="whichComponent"></ng-container>
- </div>
- </div>
- </div>
- </div>
- </div>
- ACCOUNTS.COMPONENT.TS
- import { Component, OnInit } from '@angular/core';
- import { AccountDataComponent } from '../account-data/account-data.component';
- @Component({
- selector: 'app-accounts',
- templateUrl: './accounts.component.html',
- styleUrls: ['./accounts.component.css']
- })
- export class AccountsComponent implements OnInit {
- constructor() { }
- whichComponent
- ngOnInit(): void {
- }
- assignComponent(component) {
- if (component === "accStatement") {
- this.whichComponent = AccountDataComponent;
- }
- else if (component === "accDetails") { this.whichComponent = AccountDetailsComponent }
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement