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.