CODEWITHSUNDEEP
javascriptangular
Marc Rasmussen
Marc Rasmussen

Reputation: 20555

angular 6 pipe with multiple arguements html

i have the following pipe:

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

@Pipe({
    name: 'isInPast'
})
export class IsInPastPipe implements PipeTransform {
    transform(date: Date, time: any) {
        let today = new Date();
        if (date < today) {

            return 'inPast';
        }
        return '';
    }

}

This takes two parameters.

Now i wish to send those in my html but i don't know how. i have tried: 

 [ngClass]="isInPast:row.day:task.time"

i have also tried: 

 [ngClass]="row.day task.time | isInPast:row.day:task.time"

Can anyone tell me how i can do this?

Upvotes: 0

Views: 75

Answers (3)

Ethan Vu
Ethan Vu

Reputation: 2987

If you want to toggle the inPast class based on date, implement it like this:

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

@Pipe({
    name: 'isInPast'
})
export class IsInPastPipe implements PipeTransform {
    transform(date: Date, time: any) {
        let today = new Date();
        if (date < today) {

            return true;
        }
        return false;
    }

}

Then apply it like this

 [ngClass]="{'inPast' : row.day | isInPast:task.time }"

Upvotes: 1

Hsuan Lee
Hsuan Lee

Reputation: 2330

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

@Pipe({
    name: 'isInPast'
})
export class IsInPastPipe implements PipeTransform {
    transform(date: Date, time: any) {
        // I don't know what type is at time, let's assume it is Date type.
        let today = time || new Date();
        if (date < today) {
            return 'inPast';
        }
        return '';
    }

}

[ngClass]="row.day | isInPast: task.time"

Upvotes: 2

Patricio Vargas
Patricio Vargas

Reputation: 5522

{{ yourData | isInPast: 'arg1':'arg2':'arg3'... }}

How do I call an Angular 2 pipe with multiple arguments?

Upvotes: 0

Related Questions