CODEWITHSUNDEEP
htmljsonangular
Micah
Micah

Reputation: 273

Parsing json in angular 2 and displaying correct html element

I am trying to figure out how to achieve the following:

I have a JSON file containing data that looks like this:

  [
    {
    "title": "Homepage",
    "link": "somelink",
    "designer": "some designer",
    "status": "5",
    "dateupdated": "2019-02-08"    
    }    
  ]

I am then referencing this JSON file in an html document using ngtemplate. Something like this: 

<ng-template
  let-row="row"
  let-value="value"
  #statusColumnTemplate>
  {{ value }}
</ng-template>

I am trying to figure out how to take the status data from the JSON file and then display a colored circle corresponding to the status. There are 6 different statuses that could be entered, so numbers 1,2,3,4,5 and 6 will each have a different color. I was planning to use some css to achieve the circles.

.status1 {
    height: 15px;
    width: 15px;
    background-color: #686c73;
    border-radius: 50%;
    display: inline-block;
  }

However, I am unsure how to parse the data and display the correct "<span class="status1"></span>" tag, instead of what it does now which is just displaying the number entered. Any help would be appreciated!

Upvotes: 0

Views: 73

Answers (2)

Wang
Wang

Reputation: 15

You can simple use *ngIf

<span *ngIf="status==1" class="status1"></span>
<span *ngIf="status==2" class="status2"></span>

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222700

You are looking out for ngClass, and your code should look something like,

<ng-template
  let-row="row"
  let-value="value"
  [ngClass]="{
            'status1' : row.status = 1,
            'status2' : row.status = 2
         }"
  #statusColumnTemplate>
  {{ row.status}}
</ng-template>

Upvotes: 1

Related Questions