CODEWITHSUNDEEP
angulartypescriptangular8
Mr.M
Mr.M

Reputation: 1480

Show icon based on the API value using Angular dynamically

I was trying to create a Dynamic forms where I need to show icon for my created fields. Here is my UI Screen where I am showing my field in a field explorer.

The list is coming from api.

enter image description here

Here I need to place a icon in from of the text

Here is my current html code

       <div class="fieldexplorer">
           <div class="sectionHeader_field">
                Field Explorer
           </div>
           <div *ngFor="let label of labels;">
                  {{label.labelName}}
           </div>
       </div>

Here is my ts code

    /*Display text from backend for field explorer*/
    this.labels = this.fieldData[0].fields.map(element => {
      const data = {
        labelName: element.labelName,
        fieldType: element.fieldType
      };
      console.log(this.data);
       return data; 
       
    });

Full length code ts as below answer

icons = {
  Number: "number",
  Text: "text",
  Radio: "radio",
  checkbox: "checkbox",
  list: "listbox"
}

getFieldData() {
const data = {
  module: this.data.entityName,
  entity: this.data.entityFormName
};

if (data.module && data.entity) {
  // if (!((data.module === undefined || null) && (data.entity === undefined || null))) {
  this.settingService.getFormData(this.fields, data.module, data.entity).subscribe((response) => {
    this.fieldData = response;
    
    /*Display text from backend for field explorer*/
    this.labels = this.fieldData[0].fields.map(element => {
      const data = {
        labelName: element.labelName,
        fieldType: element.fieldType
      };
      console.log(this.data);
       return data; 
       
    });
    
    console.log(this.labels);
    this.fieldData[0].sections[0].fields.forEach(element => {
      this.personalFieldsLocks[element.fieldName] = element.locked;
    });
    console.log( this.personalFieldsLocks);
    //console.log(this.fieldData[0].sections[0].fields,'this.fieldData');
    this.fieldData[0].sections[0].fields.forEach(element => {
      console.log(element.fieldName, element.locked,'lockedkey======')
    });
  })
}    
}

Here is my css

        .number::before{
        font-family: "Font Awesome 6 Free";
        content: "\f893";
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight:900;
    }
    .text::before{
        font-family: "Font Awesome 6 Free";
        content: "\f893";
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight:900;
    }
    .radio::before{
        font-family: "Font Awesome 6 Free";
        content: "\f140";
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight:900;
    }
    .checkbox::before{
        font-family: "Font Awesome 6 Free";
        content: "\f14a";
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight:900;
    }
    .listbox::before{
        font-family: "Font Awesome 6 Free";
        content: "\f022";
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight:900;
    }

What I thought is based on the field type I can show the relevant icons.

Here is the console for the reference. In the console there is a property call fieldType:

enter image description here

If it is text I need to show text (T) icon, if it is radio button (Round) I need to show radio icon like that.

Not sure where to put the array in this code.

Upvotes: 2

Views: 1258

Answers (1)

AVJT82
AVJT82

Reputation: 73357

I would create an object with all the possible icons, for example (please type the object, I'm just lazy here)

icons = {
  Number: "Number icon name here",
  Text: "Text icon name here",
  Radio: "Radio icon name here"
}

and if your array looks for example like this:

arr = [
  {fieldName: "fieldName1", fieldType: "Number"},
  {fieldName: "fieldName2", fieldType: "Text"},
  {fieldName: "fieldName3", fieldType: "Radio"},
]

Then in template, in iteration you can use:

<div *ngFor="let a of arr">
  <p>{{icons[a.fieldType]}}</p>
</div>

The p field and everything else is just a demonstration, you need to apply it to your usecase.

Upvotes: 1

Related Questions