I have a task where I need to render a select tag in the server and send it to Angular client. I would like to also apply Angular Material style to it. When generating a normal tag, it is rendered correctly. However, when using mat-select it does display the response as a plain text, without applying styles or anything. I already bypassed the security warning that Angular displays concerning sanitizing the response so this is not the problem.

insert.service.ts: (service to get response from server)

getFamilies() {
    return this.http.get(this.familyUrl, { responseType: 'text' });
  }

insert.components.ts:

html: any;
ngOnInit(): void {
    this.getFamilies();
  }
getFamilies() {
    this.insertService.getFamilies().subscribe((response) => {
      this.html = response;
    });
  }

insert.component.html: (html file where the response needs to be displayed)

<div class="flex justify-start items-center px-6" [innerHTML]="html | families"> </div>

Note that 'families' is the name of the pipe that is used to bypass the security of html (bypassSecurityTrustHtml() function).

What can be a solution?