Reputation: 11250
I think the issue is something simple in my example, as everything works when I reference the names but not when I try to use the custom short names.
I have a percent complete component moving the bar along which works when I reference the internal field PercentComplete, but I cannot get it to work when I use a custom name in the decorator.
My Component:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'progress-bar',
templateUrl: 'progress-bar.html'
})
export class ProgressBarComponent {
@Input() // @Input('Percent') does not work
PercentComplete: number = 0;
@Output()
PercentChange: EventEmitter<number> = new EventEmitter<number>();
constructor() { }
Increment() {
this.PercentComplete ++;
this.PercentChange.emit(this.PercentComplete);
}
}
Simple HTML header
<ion-header>
<ion-toolbar color="light" mode="md">
<progress-bar [PercentComplete]="15"></progress-bar>
</ion-toolbar>
</ion-header>
Component HTML:
<div class="progress-outer">
<div class="progress-inner" [style.width]="PercentComplete + '%'">
{{PercentComplete}}%
</div>
</div>
<div>
<button ion-button round (click)="Increment()">
<ion-icon name="add-circle"> </ion-icon>
</button>
</div>
If I change all the HTML references from PercentComplete to just be Percent, then it does not work.
Upvotes: 1
Views: 3788
Reputation: 790
Input and Output decorators are only applicable when you use a component inside another component. It is ment to be used for the communication between them. So the alias would only work in the component containing the progress bar. Inside the HTML of the progress bar itself you should reference the variable name (and not the alias).
So this should work:
The ProgressBarComponent:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'progress-bar',
templateUrl: 'progress-bar.html'
})
export class ProgressBarComponent {
@Input('Percent')
PercentComplete: number = 0;
@Output()
PercentChange: EventEmitter<number> = new EventEmitter<number>();
constructor() { }
Increment() {
this.PercentComplete++;
this.PercentChange.emit(this.PercentComplete);
}
}
ProgressBarComponent HTML:
<div class="progress-outer">
<div class="progress-inner" [style.width]="PercentComplete + '%'">
{{PercentComplete}}%
</div>
</div>
<div>
<button ion-button round (click)="Increment()">
<ion-icon name="add-circle"> </ion-icon>
</button>
</div>
Component containing the ProgressBarComponent
<ion-header>
<ion-toolbar color="light" mode="md">
<progress-bar [Percent]="15"></progress-bar>
</ion-toolbar>
</ion-header>
For more information about component interaction have a look at this page: Angular Cookbook: Component Interaction
Upvotes: 6