0

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?

Marcellin Khoury
  • 336
  • 5
  • 13
  • Does this answer your question? [Style is not applied after sanitization and \[innerHTML\]](https://stackoverflow.com/questions/63610520/style-is-not-applied-after-sanitization-and-innerhtml) – Zze Mar 14 '22 at 23:48
  • @Zze No, this solution did not solve my problem. – Marcellin Khoury Mar 17 '22 at 20:15

0 Answers0