I need to define a Date as an a @Input of a component:
<progress [start]="new Date()"></progress>
I get this error:
Parser Error: Unexpected token 'Date' at column 5 in [new Date()]
How to define a variable value when calling a component?
Add a comment
|
2 Answers
You cannot create/initialise and assign inside the attribute.
HTML
<progress [start]="getDate()"></progress>
Class
getDate(){
return new Date()
}
This said, you probably don't want to use it this way, as this way a new Date would be generated with the change detection. You might want to keep attribute's value in a property:
Class
myDate= new Date(); // This could be either on the top of the class, either in ngOnInit. Avoid putting in the constructor
HTML
<progress [start]="myDate"></progress>
3 Comments
ABOS
I don't know why this is an accepted answer. it seems to me that every change detection will trigger this function call, so it will pass different date every time to start date object which might not be what OP really wanted.
Vega
@ABOS, while it's more upvoted, it's not yet accepted :) I just reproduced the OP's idea and explained WHY it doesn't work. How to use after is up to the OP. It sure better to keep the value in a property, that I might suggest by editing
ABOS
@@Vega, roger :)
You have to initialize your date in the component.ts, in the ngOnInit for example:
myDate: Date;
ngOnInit() {
this.myDate = new Date();
}
And use it in your template:
<progress [start]="myDate"></progress>
