I am working to a little framework based on Angular/Material 9. I want to create custom directives that apply standard Material directives to their host element. For some UI elements, I prefer to use directives instead of creating custom wrapper components (using ng-content). For example, for buttons, I want use a "custom-button" directive like this:
<button type="button" custom-button>Hello world!</button>
The directive should apply the standard Material directives (and some other attribute, too) for buttons to the host element. The rendered HTML button should be:
<button type="button" custom-button mat-button mat-raised-button color="accent">Hello world!</button>
I know how to set properties/attributes, but obviously the button does not act like a "real" mat-button (it hasn't custom inner elements added by Material, nor the for the ripple effect). I am pretty new with Angular, so I searched a lot for an answer. But I only found very complicated or outdated solutions (AngularJS). Any help?
