Binding is not working in Angular2 template - data-binding

Question

errorType is not showing when calling with Alert.showAlert("success","someMsg");from another Component but it's working when initializing at the declaration of errorType itself.
component :
import {Component} from 'angular2/core';
#Component({
selector: 'alert-component',
templateUrl: 'app/alert.template.html'
})
export class Alert {
public static errorType:string;
public static messageAlrt:string;
public static showAlert(type:string, message:string): void{
Alert.errorType=type;
}
}
template :
<div id="messageAlert" >
<strong>{{errorType}}:</strong> this is the error message at top of the page
</div>
Really apreciate your help in resolving this problem that errrorType value is not getting bound to erroType

Answer 1

It's because you use static fields. When using {{errorType}}, a non static property of the component is used.
I would refactor your component this way:
import {Component} from 'angular2/core';
#Component({
selector: 'alert-component',
templateUrl: 'app/alert.template.html'
})
export class Alert {
public errorType:string;
public messageAlrt:string;
}
When you want to display your alert, I would add it dynamically:
#Component({
(...)
template: `<div #target></div>`
})
export class SomeComponent {
#ViewChild('target', {read: ViewContainerRef}) target;
showAlert(type:string, message:string) {
this.resolver.resolveComponent(Alert).then(
(factory:ComponentFactory<any>) => {
this.cmpRef = this.target.createComponent(factory);
this.cmpRef.type = type;
}
);
}
See this great Günter's answer:
Angular 2 dynamic tabs with user-click chosen components