Angular Directive -
has created sample angular directive using @directive decorator? searched lot on developers far created component directives. angular api review doesn't speak more on this.
simple-directive-demo . this simple example start angular2 directive.
i have component , directive.
i use directive update component's view. directive's changecolor function getting called component's changecolor function.
component
@component({ selector: 'my-app', host: {'[style.backgroundcolor]':'color',} template: ` <input type="text" [(ngmodel)]="color" (blur)="changecolor(color)" /> <br> <span > (span) i'm {{color}} color <span> <div myselectedcolor [selectedcolor]="color"> (div) i'm {{color}} color </div> `, directives: [selectedcolordirective] }) export class appcomponent implements afterviewinit{ @viewchild(selectedcolordirective) mydirective: selectedcolordirective; color:string; constructor(el:elementref,renderer:renderer) { this.color="yellow"; //renderer.setelementstyle(el, 'backgroundcolor', this.color); } changecolor(color) { this.mydirective.changecolor(this.color); } ngafterviewinit() { } } directive
@directive({ selector:"[myselectedcolor]", host: { // '(keyup)': 'changecolor()', // '[style.color]': 'selectedcolor', } }) export class selectedcolordirective { @input() selectedcolor: string = ''; constructor(el: elementref, renderer: renderer) { this.el=el; this.el.nativeelement.style.backgroundcolor = 'pink'; // renderer.setelementstyle(el, 'backgroundcolor', this.selectedcolor); } changecolor(clr) { console.log('changecolor called ' + clr); //console.log(this.el.nativeelement); this.el.nativeelement.style.backgroundcolor = clr; } }
Comments
Post a Comment