Angular - custom elements combined with Angular Material

I’ve created a custom button using an attribute selector (which I want to keep in place for maintaining native button functionality), but I’m struggling to incorporate the Angular Material mat-flat-button directive into it. I’ve searched around online and tried different AI tools, but I haven’t found any relevant solutions. Am I trying to do the impossible here?

Here’s my current button implementation:

import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';

@Component({
selector: 'button[m-primary-btn]',
template: '<ng-content></ng-content>',
styleUrls: ['./button.component.scss'],
standalone: true,
imports: [MatButtonModule],
host: {
'class': 'primary'
}
})
export class PrimaryButtonComponent {}


I’ve attempted to add the mat-flat-button directive to the selector and template, but with no success. Does anyone have any suggestions? Also, I’d like to avoid manually adding the Material directive to each button instance.

Continue reading...