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 }
  }

}