angular reuse component with different material styles

Question

I have a component with a button that opens contact form. I have to reuse the same button in different places with different material button styles like mat-raised-button, mat-icon-button.etc., But i could not figure out how? It would be great if someone could help.

contact.component.ts

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ContactFormComponent } from './contact-form.component';

@Component({
  selector: 'sm-contact',
  template: `
  <button (click)="openDialog()"><ng-content></ng-content></button>
  `,
  styles: [
    'button {border-radius: 24px;}'
  ]
})
export class ContactComponent implements OnInit {

  constructor(public contact: MatDialog) { }

  ngOnInit(): void {
  }

  openDialog(){
    this.contact.open(ContactFormComponent, {
      panelClass: 'mat-elevation-12'
    });
  };

}

and in template

    <sm-contact mat-icon-button class="nav-button" aria-label="Contact" fxHide.xs>
        <mat-icon>headset_mic</mat-icon>
    </sm-contact>
    <sm-contact mat-stroked-button class="nav-button" aria-label="Contact" fxHide.gt-xs>
        Contact
        <mat-icon>headset_mic</mat-icon>
    </sm-contact>

question from:https://stackoverflow.com/questions/65559520/angular-reuse-component-with-different-material-styles

Answer 1

Waitting for answers