CODEWITHSUNDEEP
htmlangular
theCode
theCode

Reputation: 2347

Angular 2: how to hide a field in table and show when mouse hover?

I have this simple Angular2/html table: 

    <tr *ngFor="let item of mf.data; let i = index;">
      <td><input type="checkbox" value=""   [(ngModel)]="item.checked" ></td>

      <td>{{i}}</td>
      <td>{{item.name}}</td>
      <td>{{item.password}}</td>
      <td>{{item.number}}</td>
      <td>Infos</td>
      <td><button type="button" class="btn btn-success" [disabled]="!item.checked">start</button></td>
    </tr>

I would like to hide field password with ***** or ....., but display clear text when mouse hovers in and hide when mouse hovers out. Basically, I is sensitive data and I don't want some one to be able to take a photo when I open my app. How can I do this ?

Upvotes: 0

Views: 1812

Answers (3)

theCode
theCode

Reputation: 2347

I have finally found something that work find. Fill free to improve this solution.

Basically I added an index to every of my rows.

      <td align="center"  (mouseover)="displayPassword(item.index)" (mouseout)="hiddePassword(item.index)">{{item.showpassword? item.password:'00000000000000000000000000000000000'}}</td>

In my app.component.ts, I added this two functions:

  displayPassword(index){
    console.log(index)
    this.data[index].showpassword = true;
  }

  hiddePassword(index){
    this.data[index].showpassword = false;
  }

now it is working as expected ...

Upvotes: 0

Deblaton Jean-Philippe
Deblaton Jean-Philippe

Reputation: 11398

maybe something like this could do the trick :

//  not working  <td title="{{item.password}}">{{item.password.split('').forEach(p => '*')}}</td>

      <td title="{{item.password}}">******</td>

Upvotes: 0

Andrew Dyster
Andrew Dyster

Reputation: 2318

Use the mouseover and mouseout events and bind a display variable to them.

E.g.: 

<td (mouseover)="displayPassword = true" (mouseout)="displayPassword = false">{{displayPassword? item.password : '****'}}</td>

Upvotes: 3

Related Questions