CODEWITHSUNDEEP
angulartypescript
Danny91
Danny91

Reputation: 163

How to include HTML inside of .ts file

I'm pretty new to Angular but have been asigned a project which is written in Angular.

Looking at the .ts file which contains the list of property types I need to include a span around the label text. Is this possible?

Current list inside .ts file 

export const extraQuestionsList = [
  {
    name: 'propertyType',
    type: 'radio',
    label: 'Purchase Type',
    value: 'residential',
    validators: [],
    options: [
      { id: 'residential', value: 'residential', label: 'Purchase for you (Residential)', class: 'btn-choice--left' },
      { id: 'bytolet', value: 'bytolet', label: 'Purchase to rent (Buy-to-Let)', class: 'btn-choice--right' },
    ],
    tooltip: '',
  },
];

Desired result 

export const extraQuestionsList = [
  {
    name: 'propertyType',
    type: 'radio',
    label: 'Purchase Type',
    value: 'residential',
    validators: [],
    options: [
      { id: 'residential', value: 'residential', label: '<span class="hidden-xs">Purchase for you</span> (Residential)', class: 'btn-choice--left' },
      { id: 'bytolet', value: 'bytolet', label: '<span class="hidden-xs">Purchase to rent</span> (Buy-to-Let)', class: 'btn-choice--right' },
    ],
    tooltip: '',
  },
];

any help would be much appreciated.

Thanks in advance

Upvotes: 2

Views: 2000

Answers (2)

Rushi Patel
Rushi Patel

Reputation: 601

You can create dynamic form as per your array and it should be in your HTML file as below.

<div *ngIf="extraQuestionsList[0].type == 'radio'">
  <label>{{extraQuestionsList[0].label}}</label>
  <div *ngFor="let item of extraQuestionsList[0].options" >
    <input type="radio" name="extraQuestionsList[0].propertyType" [value]="item.residential" [ngClass]="item.class">
  <span class="hidden-xs">{{item.label}}</span>
  </div>
</div>

Also, remove const export in ts file so it can be treated as an array and you can use it to HTML template.

Upvotes: 0

Oron Bendavid
Oron Bendavid

Reputation: 1533

<li *ngFor="let opt of options">
  <span class="hidden-xs">{{opt.id}}</span> {{opt.label}}
</li>

Upvotes: 1

Related Questions