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

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -