implémenter onclick() dans la directive personnalisée angulaire 4

Question

J'ai un simple bouton et une directive Je veux accéder au style du bouton, ajouter MarginLeft avec une fonction onclick() dans la directive, ça ne fonctionne pas mais régler le css depuis le constructeur comment puis-je l'utiliser avec un clic? s'il vous plaît aider:

la directive:

import { Directive, ElementRef } from '@angular/core'; 

@Directive({ 
    selector: '[Bluecolored]' 
}) 
export class BluecoloredDirective { 

    constructor(private element:ElementRef) { 
    console.log(element); 
    element.nativeElement.style.color="blue"; 
    } 
clicked(){ 
    this.element.nativeElement.style.marginLeft=20; 
    console.log("marzi"+this.element.nativeElement.style.marginLeft); 
} 
} 

c'est le modèle:

<p Bluecolored> 
    new-fom works! 
</p> 
<h1 Bluecolored>Blue Colored</h1> 
<button (click)="clicked()" Bluecolored>Click</button> 

Answer 1

Vous pouvez utiliser un HostListener dans votre directive:

@HostListener('onClick') onClick(){ 
    this.element.nativeElement.style.marginLeft=20; 
    console.log("marzi"+this.element.nativeElement.style.marginLeft); 
} 

cette façon, vous pouvez à distance (click)="clicked()" à partir du bouton également

J'ai appelé le mien onClick, mais vous pouvez le nommer cliqué ainsi