I'm facing an issue with accessing the style of a button in my directive. I want to add a margin-left property to the button using an onclick() function in the directive. However, it doesn't seem to be working. Strangely, setting the CSS from the constructor works fine. Can anyone help me figure out how to use this with onclick? Your assistance is greatly appreciated.
Here's the code for the 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);
}
}
And here's the template that uses the directive:
<p Bluecolored>
new-fom works!
</p>
<h1 Bluecolored>Blue Colored</h1>
<button (click)="clicked()" Bluecolored>Click</button>