How to display hidden (stars **) in place of password in angular2+

Question

I have to display a Password column in a table in UI. However, i want the password to be hidden (denoted by -->**). So how do i do it.I display the data through *ngFor.

code -

component.html

   <tbody>
    <tr *ngFor="let data of result| orderBy: key : reverse|filter:filter| 
    paginate: { itemsPerPage: 5, currentPage: p }; let i = index">
      <td>
        <a [hidden]= "accessIdHide" [routerLink]="['/eai/update- 
       inward-
   filter']"  (click)="forUpdateInward(data)" data-toggle="tooltip"  
   title="Update" >
          <span class="glyphicon glyphicon-plus-sign"></span>
        </a>{{data.SENDER_ID}}
      </td>
      <td>{{data.SERVICE_ID}}</td>
      <td>{{data.INWARD_IP}}</td>
      <td>{{data.INWARD_PORT}}</td>
      <td>{{data.USER_ID}}</td>
      <td>{{data.PASSWORD}}</td>
    </tr>
    </tbody>

component.ts

 export class InwardFilterMasterComponent implements OnInit {

 ngOnInit() {

  this.viewData();
  }


  viewData() {

   //Get the data from the database via http request

   this.loading = true;
   var url = config.url;
   var port = config.port;
   this.http.post("http://....) })
  .map(result => this.result = result.json())
  .subscribe((res: Response) => {
    this.loading = false;
    console.log("XXXXXXXXXXXX", res);
    });
   console.log("INSIDE COMPONENT");

  }
 }

Answer 1

You can create a pipe e.g. password and apply that on your value. The benefit of the pipe is that you'll be able to use it in your entire app and a change in single file will be reflected in all the places where the pipe is used.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'password'
})
export class PasswordPipe implements PipeTransform {

  transform(value: string, replaceChar?: string): any {
    if (value === undefined) {
      return value;
    }
    // Replace with the specified character
    if (replaceChar) {
      return replaceChar.repeat(value.length);
    }
    // Replace value with asterisks
    return '*'.repeat(value.length);
  }
}

Use it on your object property like this:

<td>{{data.PASSWORD | password}}</td>

You can even use the pipe to specify your own replace character instead of "*" e.g.

<td>{{data.PASSWORD | password:'+'}}</td>

StackBlitz Demo

Answer 2

You can create a pipe e.g. password and apply that on your value. The benefit of the pipe is that you'll be able to use it in your entire app and a change in single file will be reflected in all the places where the pipe is used.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'password'
})
export class PasswordPipe implements PipeTransform {

  transform(value: string, replaceChar?: string): any {
    if (value === undefined) {
      return value;
    }
    // Replace with the specified character
    if (replaceChar) {
      return replaceChar.repeat(value.length);
    }
    // Replace value with asterisks
    return '*'.repeat(value.length);
  }
}

Use it on your object property like this:

<td>{{data.PASSWORD | password}}</td>

You can even use the pipe to specify your own replace character instead of "*" e.g.

<td>{{data.PASSWORD | password:'+'}}</td>

StackBlitz Demo

Answer 3

There is no point in displaying password if you want to put stars instead (I guess there is no point in displaying password at all). If you don't care about number of stars depending on password length you can display plain text '******'. If you care about number of stars you can display result of method hashPassword(data.PASSWORD) and in your ts file declare it as:

  hashPassword(password: string){
    return "*".repeat(password.length)
  }