How can I pass dynamic value to pipe in Angular 8

Question

How can i pass dynamic value to pipe in Angular.

<tr *ngFor="let users of Users | sortpipe: 'name'">
        <td>{{ users.name }}</td>
        <td>{{ users.email }}</td>
        <td>{{ users.mobile }}</td>
        <td><input type="button" (click)="getUser(users._id)" class="btn btn-info" value="Edit"></td>
        <td><input type="button" (click)="deleteUser(users._id)" class="btn btn-danger" value="Delete"></td>
</tr>

I would like to pass dynamic value at sortpipe: 'name' instead of name on click event.

Answer 1

you just create a property and pass that property as pipe parameter when the proprty change this will update the pipe parameter value

<div>
  set sort key
    <input type="button" name="key" (click)="name ='name'" value="name">
    <input type="button" name="key" (click)="name ='mobile'" value="mobile">
</div>

<div>
  method 
  <label >
    <input type="radio" name="method" [(ngModel)]="method" value="asc"> ASC
    </label>

  <label >
    <input type="radio" name="method" [(ngModel)]="method" value="desc"> DESC
    </label>
</div>

<tr *ngFor="let users of Users | sort: name : method ">
  ....
</tr>

component

export class AppComponent  {
 name = "name"; // 👈
 method="asc"  //  👈

  Users = [...]
}

demo 🚀

Answer 2

Your template.html... change 'name' to class object reference name, and then in your component you have to define this class member variable, and assign value to it...

<tr *ngFor="let users of Users | sortpipe: name " >
    <td>{{ users.name }}</td>
    <td>{{ users.email }}</td>
    <td>{{ users.mobile }}</td>
    <td><input type="button" (click)="getUser(users._id)" 
                 class="btn btn-info" value="Edit">
    </td>
    <td><input type="button" (click)="deleteUser(users._id)" 
                 class="btn btn-danger" value="Delete">
    </td>
</tr>

and in your component.ts file...

export class AppComponent {
     name = 'name'
}