6

I am trying to add html content in angular material but the tags show as simple text in html for example "first line <br> .here should be a new line" How do I do it?

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
Anna
  • 101
  • 8

1 Answers1

7

You can use innerHTML attribute binding

<td mat-cell 
  *matCellDef="let element"
  [innerHTML]="element.name">
</td>

TS

const ELEMENT_DATA: PeriodicElement[] = [
  {
    position: 1,
    name: '<b>Hydrogen</b> <br>Test', 
    ...
  },
  ...
];

Output

Position Name
1 Hydrogen
Test

Stackblitz

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • You can use [`ngClass`](https://angular.io/api/common/NgClass#description) directive on `td` directive, like `[ngClass]="{'my-custom-class': element.name === 'something'}"` – Pankaj Parkar Aug 10 '22 at 07:04
  • @Anna sorry I don't get you completely – Pankaj Parkar Aug 10 '22 at 07:07
  • @Anna it would be great if you could open a new question, so that more people can be involved in the discussion, you may get varieties of approaches/solutions. – Pankaj Parkar Aug 10 '22 at 07:11
  • @Anna what's this now `obj.p343?.[0]?.koddf`? – Pankaj Parkar Aug 10 '22 at 07:22
  • I'm sorry, can you please explain with example. I'm unclear on what exactly you need – Pankaj Parkar Aug 10 '22 at 07:28
  • I got a bit, I don't get meaning of "*while I want it to do it only when it's mapped from shares*" what is mapped from shares? – Pankaj Parkar Aug 10 '22 at 07:37
  • You need some expression or condition that has to be satisfied with `ngClass` to work. I think you are a better person to decide that condition, as you know more about your project. Still from what I understood, I can guess `[ngClass]="{'my-custom-class': element.points === shares}` should work. This will only points object contains `shares` reference – Pankaj Parkar Aug 10 '22 at 07:59
  • yes, then only it apply CSS, that's right? using `[ngClass]="{'my-custom-class': element.points === shares}` – Pankaj Parkar Aug 10 '22 at 08:05
  • I applied the ngclass with a condition on another property of element that had const value, thanks a lot – Anna Aug 10 '22 at 08:59
  • @Anna great to know, you were able to solve the problem. Happy Coding! :) – Pankaj Parkar Aug 10 '22 at 09:00