Bounds attributes [attr.xxx] do not trigger directives about angular

[JeanMeche]

Hi,

You're looking for conditional directives. Directive matching needs the selector to be static so this isn't at all supported and currently works as designed.

The alternative here is to handle the condition in the directive itself by passing an input.

[JoostK]

We discussed this issue just now and this is working as intended, with no plans to change the behavior.

Our reasoning is that an attr. binding results in a conditional attribute, as the attribute is being removed if the binding evaluates to null.

If you want to achieve this behavior, you can setup an attribute mirror from a bound property:

@Component({
  host: {
    '[attr.mirror]': 'mirror',
  }
})
export class MyCmp {
  @Input()
  mirror: string;
}

which is then set using a property binding instead of an explicit attribute binding.

[Miedziaq]

But this will work only with components. What if i need to apply it on span 🤦.

[JoostK]

But this will work only with components. What if i need to apply it on span 🤦.

I don't follow. If you have e.g. <span [trimmed]="trimmed"></span> and a directive:

@Directive({
  selector: '[trimmed]',
  host: { '[attr.trimmed]': 'trimmed' }
})
export class MyDir {
  @Input() trimmed: boolean;
}

that should do the trick?

[Miedziaq]

i will check this thx. but still looks like shoot a fly with a cannon :)