Is it possible to change/put pipe to format a specific column in Angular 2 on button click? Like for example I have a table with 'Name' and 'Hours' columns, when I click a button the data displayed for 'Hours' should be converted into days and vice-versa.

<button class="btn btn-secondary" (click)="convertToDays()">Days</button>
<button class="btn btn-secondary" (click)="convertToHours()">Hours</button>

<tbody>
<td>{{availableLeave.hours}}</td>
</tbody>

convertToDays(){
//put pipe to format availableLeave.hours to display as days ex.('48' hours should be displayed as '2' days)
}

convertToHours(){
//will just revert the original formatting of availableLeave.hours which is in hour format
}

Is it possible to change/put pipe to format a specific column in Angular 2 on button click? Like for example I have a table with 'Name' and 'Hours' columns, when I click a button the data displayed for 'Hours' should be converted into days and vice-versa.

<button class="btn btn-secondary" (click)="convertToDays()">Days</button>
<button class="btn btn-secondary" (click)="convertToHours()">Hours</button>

<tbody>
<td>{{availableLeave.hours}}</td>
</tbody>

convertToDays(){
//put pipe to format availableLeave.hours to display as days ex.('48' hours should be displayed as '2' days)
}

convertToHours(){
//will just revert the original formatting of availableLeave.hours which is in hour format
}

• javascript
• angular
• angular2-pipe

Share Improve this question Follow edited Feb 13, 2017 at 10:02 xird asked Feb 13, 2017 at 3:47 xirdxird 78511 gold badge88 silver badges1616 bronze badges 2

• 1 Please post the code that demonstrates what you try to acplish. Yes, it's possible, but hard to tell which of the 200 ways would fit your need. – Günter Zöchbauer Commented Feb 13, 2017 at 7:02
• hi Gunter, thanks for checking out, I added some pseudo of what I want to achieve, but seems like someone posted an answer that could help, I'll check which way fits the most. – xird Commented Feb 13, 2017 at 10:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can pass a parameter to the pipe like

{{someValue | myPipe:param}}

<button class="btn btn-secondary" (click)="param = 'd'">Days</button>
<button class="btn btn-secondary" (click)="param = 'h'">Hours</button>

class MyPipe implements PipeTransform {
  transform(value, param) {
    if(param === 'h') {
      return "...";
    } else {
      return "...";  
    }
  }
}

As per your requirement, you can use Pipe directly in your ponent file. You can make two pipes one for Hours and one for Days then call the transform function of required pipe.

for more details on how to use pipes in ponent or in service, check this post.