Date object being treated as string in template

Question

I'm trying to use Angular2 date pipe to format a date. I have this class as model for my object:

export class Match {
    Id: number;
    MatchDate: Date;

    constructor(
        id: number,
        matchDate: Date
) {
        this.Id = id;
        this.MatchDate = matchDate;
    }
}

And I fetch Match objects to my Component:

import {Component, OnInit} from 'angular2/core';
import {Match} from '../core/models/match';
import {MatchService} from '../core/services/match.service';

@Component({
    selector: 'home',
    templateUrl: './app/components/home.html',
    directives: [],
    providers:[MatchService]
})

export class Home implements OnInit {
    nextMatch: Match;
    lastMatch: Match;
    errorMessage: string;


    constructor(
        private _matchService: MatchService
    ) { }

    getNextMatch() {
        this._matchService.getNextMatch()
            .subscribe(
            nextMatch => this.nextMatch = nextMatch,
            error => this.errorMessage = <any>error
            );
    }

    getLastMatch() {
        this._matchService.getLastMatch()
            .subscribe(
            lastMatch => this.lastMatch = lastMatch,
            error => this.errorMessage = <any>error
            );
    }

    ngOnInit() {
        this.getNextMatch();
        this.getLastMatch();
    }
}

In my template I try to display the MatchDate:

<div class="row">
    <div class="col-md-6 col-xs-12">
        <div *ngIf="lastMatch" class="card">
            <div class="card__content">
                <p>{{lastMatch.MatchDate | date:"short"}}</p>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xs-12">
        <div *ngIf="nextMatch" class="card">
            <div class="card__content">
                <p>{{nextMatch.MatchDate}}</p>
            </div>
        </div>
    </div>
</div>

When using {{nextMatch.MatchDate}} I get the correct date, but not formatted as I want. If I use {{lastMatch.MatchDate | date:"short"}} I get an error saying:

Invalid argument '2016-02-01T18:30:00' for pipe 'DatePipe'

Shouldn't MatchDate be a Date object, not a string?

EDIT:

Here's part of my MatchService:

getNextMatch() {
    return this.http.get(this._apiUrl + '/next')
        .map(res => <Match>res.json())
        .catch(this.handleError);
}

How does your `_matchService` retrieve dates? If it's from an HTTP request, do you convert them as dates? — Thierry Templier, Mar 16 '16 at 15:24
Your MatchService needs to return JavaScript Date objects. I assume it is returning strings. — Mark Rajcok, Mar 16 '16 at 15:24
I've added the code from my MatchService. I thought it would also map to the correct types, when doing this map. — spersson, Mar 16 '16 at 15:28
TypeScript doesn't convert values to the appropriate/declared types. — Mark Rajcok, Mar 16 '16 at 15:32
See https://github.com/angular/angular/issues/3261 and this [comment](https://github.com/angular/angular/issues/6336#issuecomment-173562587) — Eric Martinez, Mar 16 '16 at 15:32

score 3 · Accepted Answer · edited May 23 '17 at 11:46

3

I think that your service doesn't return dates. If you get dates from an HTTP request, there is no native support to get date from the response since the JSON format doesn't provide support for date.

See this question for more details:

How to get Date object from json Response in typescript

edited May 23 '17 at 11:46

Community

1
1

answered Mar 16 '16 at 15:28

Thierry Templier

198,364
44
396
360

Date object being treated as string in template

1 Answers1