Binding style values inside directive template

To bind style values inside a directive template in Angular, you can use Angular's binding syntax with the ngStyle directive. The ngStyle directive allows you to set inline CSS styles dynamically based on expressions in your component's template.

Here's how you can achieve this:

Step 1: Create the Directive First, create an Angular directive using the Angular CLI or manually create the necessary files.

bashCopy code
ng generate directive myCustomStyle

Step 2: Define the Directive Open the directive file (e.g., my-custom-style.directive.ts) and define the style properties you want to bind dynamically.

typescriptCopy code
import { Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core';

@Directive({
  selector: '[myCustomStyle]'
})
export class MyCustomStyleDirective implements OnChanges {
  @Input() backgroundColor: string;
  @Input() color: string;

  constructor(private elementRef: ElementRef) {}

  ngOnChanges(changes: SimpleChanges) {
    this.applyStyles();
  }

  private applyStyles() {
    const element = this.elementRef.nativeElement;
    element.style.backgroundColor = this.backgroundColor;
    element.style.color = this.color;
  }
}

In this example, the directive has two input properties: backgroundColor and color. These properties will be used to set the background color and text color, respectively.

Step 3: Use the Directive Now, you can use the myCustomStyle directive in your components' templates and bind the style values dynamically.

htmlCopy code
<!-- app.component.html -->
<div myCustomStyle [backgroundColor]="bgColor" [color]="txtColor">
  This text has dynamic styles!
</div>

Step 4: Set Component Properties In your component class (e.g., app.component.ts), set the properties bgColor and txtColor to the desired values.

typescriptCopy code
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  bgColor = 'lightblue';
  txtColor = 'white';
}

With this setup, the div element with the myCustomStyle directive will have its background color and text color dynamically bound to the values of bgColor and txtColor properties in the component. If you change the values of these properties in your component, the styles in the template will automatically update accordingly.

Remember to include your directive in the declarations array of your app module or the module where you want to use the directive.

That's it! You now have a directive that allows you to bind style values dynamically inside your Angular template.