How do u display ul & li from a string in typescript angular?-CodePudding

I want p >{{skie.extendedDescription}}/p> in skie.component.html to show the list aswell as the normal string from ski-equipments.ts

skie.component.html

<div  *ngIf="skie">
    <div >
      <img  [src]="skie.imageUrl">
      <div >
        <h2 >{{skie.header}}</h2>
        <p >{{skie.description}}</p>
        <p >{{skie.extendedDescription}}</p>
        <button type="button" >Buy</button>
      </div>
    </div>
  </div>

ski-equipments.ts

    export const skiEquipmentsData = [
    {
      id: 1,
      header: "Nybörjarpaketet",
      description: "Detta är ett perfekt paket för dig som inte är så van vid att åka, men ändå vill få ut det mesta möjliga av din tid i backen",
      extendedDescription: "Paket består av:<p><ul><li>Skida: Atomic Performer FB</li><li>Bindning: M10 GripWalk</li><li>Pjäxa: Nordica Trend LX 20/21</li></p>",
      imageUrl: "/assets/images/beginner.png"
    },
    {
        id: 2,
        header: "Medelpaketet",
        description: "Om du har åkt en del och vill ha en lite mer avancerad utrustning ska du välja detta paket. Här får du den bästa kompromissen mellan lättåkta skidor och bra prestanda.",
        extendedDescription: "Paket består av:<p><ul><li>Skida: Atomic Redster WT</li><li>Bindning: M10 GripWalk</li><li>Pjäxa: Atomic Hawx Magna 100 21/22</li></p>",
        imageUrl: "/assets/images/medium.png"
    },
    {
        id: 3,
        header: "Expertpaketet",
        description: "När du vill ha det bästa som går att få för att känna att din skidåkning kan nå nya höjder är detta paketet för dig. Med denna topputrustning garanterar vi att du kommer att få en riktigt minnesvärd tid i backarna.",
        extendedDescription: "Paket består av:<p><ul><li>Skida: Rossignol BlackOps Stargazer (Open) 21/22</li><li>Bindning: Touring Bindings Marker Alpinist 10 21/22</li><li>Pjäxa: Rossignol Alltrack Elite 90 GW (98 mm) 21/22</li></p>",
        imageUrl: "/assets/images/expert.png"
    }
  ];

see image to see how it is displayed in the browser
Image

CodePudding user response：

you can use attribute innerHTML on tag element to have an interpretation of HTML embed in your variables

[innerHTML]="yourVariable"

https://angular.io/guide/property-binding#binding-targets

<div  *ngIf="skie">
    <div >
      <img  [src]="skie.imageUrl">
      <div >
        <h2  [innerHTML]="skie.header"></h2>
        <p  [innerHTML]="skie.description"></p>
        <p  [innerHTML]="skie.extendedDescription"></p>
        <button type="button" >Buy</button>
      </div>
    </div>
  </div>