How to insert HTML tags into an Anguar array?

Asked

Viewed 56 times

1

Good night!

I need to insert into an Angular-to-tag array <sup></sup>, I searched but found no solution.

In the browser being rendered: Decree n<sup>the</sup> 32.231, 09.03.2020 - Dom Salvador, 10.03.20200.

Could you help me please?

app.component.html

<app-act-card></app-act-card>

Act-card.component.html

<div *ngFor="let i of laws">
  <p>{{i.decree}}</p>
</div>

Act-card.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-act-card',
  templateUrl: './act-card.component.html',
  styleUrls: ['./act-card.component.scss']
})
export class ActCardComponent implements OnInit {

  public laws = [
    { 
      decree: 'Decreto n<sup>o</sup> 32.231, de 09.03.2020 - DOM Salvador de 10.03.20200',
    }
  ];

}
angular

  • You can’t just use the "°" character (on my keyboard it’s alt gr + ?)?

  • @Costamilam, using special characters directly in an HTML file can cause problems of character map.

  • @Lucassamuel only if you need compatibility with old or very bad browsers

  • Regardless, it’s not recommended. In the company where I work, charset generated problems because of the different OS’s and browsers used by our users. We had to change all accents to compatible ratings.

  • Thank you all! I know this is not good practice, but I need to deliver a functional mockup to the backend team, they will try to consume this information correctly.

1 answer

3


You must use the Property Binding Angular to determine the value of a property in an HTML element. How you want to determine the HTML inside an element p, the property innerHTML of that element shall be defined.

In Angular, you can define the property of an HTML element using this syntax: [propriedade]. Therefore, your HTML should look like this:

<div *ngFor="let i of laws">
  <p [innerHTML]="i.decree"></p>
</div>

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.