简体   繁体   中英

Show text field (not input field) as type password in Angular

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>

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM