Is it possible to create my own custom attribute in angular similar to [class.some-class]="expression"? I want to create my own directive/components supporting this type of input. E.g.

<my-component [myinput.some-dynamic-value]="expression" />

Thank you

Is it possible to create my own custom attribute in angular similar to [class.some-class]="expression"? I want to create my own directive/components supporting this type of input. E.g.

<my-component [myinput.some-dynamic-value]="expression" />

Thank you

• angular

Share Improve this question Follow asked Mar 23 at 14:09 vitalyvitaly 5366 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

[myinput.some-dynamic-value]="expression" is impossible afaik. However

If you want to bind just a random html attribute to the element you can use it like this

<my-anything  [attr.my-something]="boundValue" attr.my-something-else="String value with interpolation {{10 + 15}}!"  />

also aliases in inputs could be useful to make a pretty directive activateable by an attribute

@Directive({
  selector: '[somethingCool]'
})
class SomethingCoolDirective {
  value = input<string>({
    alias: 'somethingCool' // alias can help you bind inputs from other names
  })
}

usage 

<div [somethingCool]="'value'">

Yes, it is possible to create your own custom directive in Angular that works similarly to [class.some-class]="expression". In Angular, directives allow you to extend HTML functionality. You can create a custom directive that binds to an attribute and handles dynamic behavior as you described.

To implement something like this ([myinput.some-dynamic-value]="expression"), you would need to use a custom directive, and it would need to handle binding to a specific input dynamically, similar to how ngClass works.

Steps to implement your custom directive:

1. Create a custom directive that listens for changes to the attribute.

2. Dynamically create the property (or class) on the element based on the input expression.

Here's an example of how you might implement such a directive:

Step 1: Create the Directive

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

@Directive({
  selector: '[myinput]' // Your custom selector
})
export class MyInputDirective implements OnChanges {
  
  @Input() myinput: any; // The input expression bound to this directive
  @Input() myinputClass: string = ''; // Class name or dynamic value

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['myinput']) {
      this.updateInput();
    }
  }

  private updateInput(): void {
    if (this.myinput && this.myinputClass) {
      // Dynamically apply the class or value to the element
      this.renderer.setProperty(this.el.nativeElement, this.myinputClass, this.myinput);
    }
  }
}

Step 2: Apply the Directive in the Template Now you can use your custom directive in the template with a syntax similar to what you want ([myinput.some-dynamic-value]="expression"):

<my-component [myinput]="expression" [myinputClass]="'some-dynamic-value'"></my-component>

• The @Input() property myinput holds the dynamic value passed to the directive
• The @Input() myinputClass could hold the dynamic value or class name. In this case, you're specifying the property you want to modify on the host element (like setting a dynamic class or value).
• The ngOnChanges lifecycle hook ensures the directive reacts to any changes in the bound expression (myinput).

Conclusion: This example creates a custom directive that allows you to bind to an input (like myinput) and apply a dynamic value (like some-dynamic-value). The key is to use Renderer2 to modify the DOM based on your custom input. You can modify this further to support more complex behaviors like adding classes or dynamic styles, depending on your needs.