在 Angular 中将文本字段（不是输入字段）显示为输入密码

Question

I am using Angular 8 for my Angular-Electron application. I have a field as API-Key stored in a tabular format which is quite sensitive and needs to be shown to user on user's account page. The problem is it needs to be shown as a password text-field. Whenever user will click on a button called "Show", the API-key would be visible for a few seconds perhaps or until user clicks the button again. It cannot be shown as an input field.

This is how the user account details are shown to user:

<table _ngcontent-ipg-c7="" class="table">
    <thead _ngcontent-ipg-c7="" class=" text-info">
        <th _ngcontent-ipg-c7="" style="text-align: center;"> Account Name </th>
        <th _ngcontent-ipg-c7="" style="text-align: center;"> API Key </th>
        <th _ngcontent-ipg-c7="" style="text-align: center;"> API Version </th>
        <th _ngcontent-ipg-c7="" style="text-align: center;"> Imported </th>
            </thead>
                <tbody _ngcontent-ipg-c7="">
                    <tr _ngcontent-ipg-c7="" *ngIf="accountDetails">
                        <td _ngcontent-ipg-c7="" style="text-align: center;"> {{accountDetails?.accountID}}</td>
                        <td _ngcontent-ipg-c7="" style="text-align: center;"> {{accountDetails?.apiKey}}</td>
                        <td _ngcontent-ipg-c7="" style="text-align: center;"> {{accountDetails?.apiVersion}}</td>
                        <td _ngcontent-ipg-c7="" style="text-align: center;">
                                        {{accountDetails?.is_imported}} </td>

                   </tr>
               </tbody>
</table>

Answer 1

The fastest solution is create function and write function in html.

<td _ngcontent-ipg-c7=""(click)="showApi()" style="text-align: center;"> {{getApiPass()}}</td>

isshow=false;


getApiPass(){
  if(this.isshow){
    return this.accountDetails?.apiKey;
  }
  return "******";
}

with click just change isshow such function below;

showApi(){
  this.isshow=!this.isshow;
}

this is example code u should change parameter names wtih real ones.