CODEWITHSUNDEEP
javascriptangulartypescriptpipedate-pipe
Rey
Rey

Reputation: 1433

Using Angular's Date Pipe on Input with 2-Way Binding

I am aware of how to use Angular's date pipe with typical string interpolation examples and/or for loops. However, I have a situation that's different than both these scenarios - where I've created a kind of custom two-way binding in my Angular 2 app.

This is what my template code looks like:

<input class="app-input [(inputModel)]="staff.profile.hireDate" placeholder="None" 
    [field-status]="getPropertyStatus('profile.hireDate')"/>

Is there a way I can pass the date pipe in here? I've tried passing it in like this:

<input class="app-input [(inputModel)]="staff.profile.hireDate" placeholder="None" 
    [field-status]="getPropertyStatus('profile.hireDate') | date"/>

... but that doesn't work. It doesn't throw an error, it just doesn't modify the date formatting. I also tried wrapping the whole expression in brackets - and that through an error.

Is there a way I can pass the date pipe here in the view, or do I need to handle this differently - for instance as part of a function in my component? Looking for the simplest solution here.

Upvotes: 1

Views: 1242

Answers (1)

Ben Richards
Ben Richards

Reputation: 3575

One way to use the interpolated value instead of the binding:

<input class="app-input [(inputModel)]="staff.profile.hireDate" placeholder="None" 
    field-status="{{getPropertyStatus('profile.hireDate') | date}}" />

Upvotes: 1

Related Questions