I'm building a component that should be as reusable as possible. The current case is a modal which should allow the developer to show/hide the allowed buttons (primary:confirm, secondary:cancel). We have to use a style library that works with directives. I tried using a loop to add all buttons and set the directive dynamically. This doesn't work though. Simply "nothing" happens. <button *ngFor="let button of buttons" [attr.primary-button]="button.type === 'primary'" [attr.secondary-button]="button.type === 'secondary'" (click)="..." [class]="button.class" [disabled]="button.disabled" > {{ button.text }} </button> I'm aware that a directive is not an attribute but couldn't find any other ideas for this problem. Continue reading...