html - Angular:ログインしたユーザーがアカウントの詳細を非表示および表示するための非表示および表示オプションを作成したい

Question

ログインしているユーザーがアカウントの詳細を非表示および表示するための非表示および表示オプションを作成したいと考えています。設定アイコンをクリックすると、アカウントの詳細がポップアップ表示されます。非表示/表示オプションは、テーブルからデータを非表示にします。これにより、ユーザーがログアウトして再度ログインした後でも、[表示] をクリックするまでデータが非表示になります。これがangular htmlと.tsコードです。

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="card ">
        <div class="card-header ">
          Bank Accounts <span style="float: right;cursor: pointer;"><i class="  fa fa-cogs"
              (click)="showCards()"></i></span>
        </div>
        <div class="card-body " *ngIf="showCard">
          <h5 class="card-title">TOTAL Assets</h5>
          <p>{{users.account[0].balance | currency}}</p>
          <span class="text-center"><i>{{month}} {{day}}, {{year}}</i></span>
          <button class="btn btn-danger" style="float: right;"><i class=" text-white "
              (click)="getTrans()">Details</i></button><br><br>
          <hr>
          <h5 class="card-title">TOTAL Liability</h5>
          <p>{{users.account[0].balance | currency}}</p>
          <span class="text-center"><i>{{month}} {{day}}, {{year}}</i></span>
          <button class="btn btn-danger" style="float: right;"><i class=" text-white ">Details</i></button>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div *ngIf="isClicked">
        <table class="table table-info table-hover">
          <thead>
            <tr>

              <th scope="col">Date</th>
              <th scope="col">Transaction Number</th>
              <th scope="col">medium</th>
              <th scope="col">Transaction Type</th>
              <th scope="col">Amount</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let t of account[0].transaction">
              <th scope="row">{{t.dot | date}}</th>
              <td>{{t.tnumber}}</td>
              <td>{{t.medium}}</td>
              <td>{{t.tType}}</td>
              <td>{{t.amount | currency}}</td>
            </tr>
          </tbody>
          <button class="btn btn-secondary"><i (click)="getBalance()">Chart</i></button>
        </table>
      </div>
      <div *ngIf="isChart">
        <div *ngIf="chart">
          <div class="chartjs-container">
            <canvas id="canvas">{{chart}}</canvas>
          </div>

        </div>

      </div>
    </div>
    <div class="col-md-2">
      <div class="card ">
        <div class="card-header ">
          Settings <span style="float: right;cursor: pointer;"><i class="  fa fa-cogs" (click)="showSet()"></i></span>
        </div>
        <div class="card-body " *ngIf="settings">

        </div>
      </div>
    </div>
  </div>
</div>

import { Component, Input, OnInit } from '@angular/core';
import { Account, Balance, User } from '../_models';
import { UserService } from '../_services';
import { ChartDataSets, ChartType, ChartOptions } from 'chart.js';
import { Label } from 'ng2-charts';
import * as Chart from 'chart.js';


@Component({
  selector: 'app-account-balance',
  templateUrl: './account-balance.component.html',
  styleUrls: ['./account-balance.component.css']
})
export class AccountBalanceComponent implements OnInit {
  @Input() users: User;
  date = null;
  day = null;
  month = null;
  year = null;
  ac:number;
  account:Account;
  isClicked:boolean=false;
  isChart:boolean=false;
  chart:any=[];
  showCard:boolean;
  showLoan:boolean;
  showInsurance:boolean;
  settings:boolean;

  value=JSON.parse(localStorage.getItem("currentUser"));
  constructor(private service:UserService) { }

  ngOnInit(): void { 
    this.account=new Account(); 
    this.date = new Date();
    this.day = this.date.getDate();
    this.month = (this.date.toLocaleString('default', { month: 'long' }));
    this.year = this.date.getFullYear();
    
    this.ac=this.value.account[0].accountNumber;  
    // this.barChartData=this.account[0].total

  }
  getTrans(){
    this.isClicked=!this.isClicked;
    this.service.getTran(this.ac).subscribe(
      data => {
     this.account[0]=data;
    //  this.balancechart=this.account.amount.amount
    
      
  },error=>{
      console.log(error);
  });


  }
  getBalance(){
   
    this.isChart=!this.isChart;
    this.service.getTran(this.ac).subscribe(
      data => {
     this.account[0]=data;
    //  this.balancechart=this.account.amount.amount;
     console.log(this.account[0].total);
     let balancechart=data['total'].map(res=>res.amount);
     let balanceData=data['total'].map(res=>res.date);

     let dates=[];
     balanceData.forEach(res=>{
       let jsdate=new Date(res);
       dates.push(jsdate.toLocaleString('en',{year:'numeric',month:'short',day:'numeric'}))
     })
     console.log(dates);
     this.chart=new Chart('canvas',{
       type:'line',
       data:{
         labels:dates,
         datasets:[
           {
             data:balancechart,
             borderColor:'#3cba9f',
             fill:false
           }
         ]
       },
       options:{
         legend:{
           display:false
         },
         scales:{
           xAxes:[{display:true}],
           yAxes:[{display:true}]
         }
       }


    })

      
  },error=>{
      console.log(error);
  });

  }
  showCards(){
    this.showCard=!this.showCard;
    this.isClicked=false;
    this.isChart=false;
  }
  showCard2(){
    this.showLoan=!this.showLoan;
  }
  showIns(){
    this.showInsurance=!this.showInsurance;
  }
  showSet(){
    this.settings=!this.settings;
  }

}