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

Question

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

skie.component.html

<div class="card-deck" *ngIf="skie">
    <div class="card">
      <img class="card-img-top" [src]="skie.imageUrl">
      <div class="card-body">
        <h2 class="card-title">{{skie.header}}</h2>
        <p class="card-text">{{skie.description}}</p>
        <p class="card-text">{{skie.extendedDescription}}</p>
        <button type="button" class="btn btn-primary">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

I think you will find the answer in this question. stackoverflow.com/questions/49013217/… — Woogielicious
– Woogielicious, Commented Mar 2, 2022 at 13:07

jeremy-denis · Accepted Answer · 2022-03-02 12:50:06Z

2

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 class="card-deck" *ngIf="skie">
    <div class="card">
      <img class="card-img-top" [src]="skie.imageUrl">
      <div class="card-body">
        <h2 class="card-title" [innerHTML]="skie.header"></h2>
        <p class="card-text" [innerHTML]="skie.description"></p>
        <p class="card-text" [innerHTML]="skie.extendedDescription"></p>
        <button type="button" class="btn btn-primary">Buy</button>
      </div>
    </div>
  </div>

edited Mar 2, 2022 at 12:50

answered Mar 2, 2022 at 12:39

jeremy-denis

6,8963 gold badges23 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related