Here is the HTML code for my custom component:
<div>
{{text}}
{{percentLeft}}
{{innerColor}}
</div>
And here is the TypeScript file for my component:
import { Component, Input } from '@angular/core';
@Component({
selector: 'time-left-bar',
templateUrl: 'time-left-bar.html'
})
export class TimeLeftBarComponent {
@Input('text') text: string;
@Input('percentLeft') percentLeft: number;
@Input('innerColor') innerColor: string;
constructor() {}
}
When I try to use this component, only the first parameter seems to display properly:
For example:
<time-left-bar [percentLeft]="50" [text]="text" [innerColor]="black">
</time-left-bar>
This outputs just 50
And when I change the order of the parameters:
<time-left-bar [text]="text" [innerColor]="black" [percentLeft]="50">
</time-left-bar>
This outputs just text
Similarly, when I change the order again:
<time-left-bar [innerColor]="black" [percentLeft]="50" [text]="text">
</time-left-bar>
This outputs just black
I am not sure what I am doing wrong. Can someone please help me figure this out?