My goal was to create a dynamic form that displays icons for the fields I have created. Here is a snapshot of my UI screen showing the field explorer with the list coming from an API.
https://i.sstatic.net/4Ye9G.png
I need to place an icon in front of each text in the field explorer.
Below 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>
This is my TypeScript code snippet:
/*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;
});
For more detailed TypeScript code, please see the full-length answer below.
Here is a CSS snippet for displaying icons based on field type:
.number::before{
font-family: "Font Awesome 6 Free";
content: "\f893";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight:900;
}
...
The goal is to show relevant icons based on the field type. If it's text, show a text (T) icon; if it's a radio button, show a radio icon, and so on.
https://i.sstatic.net/Jo4PO.png
I'm unsure about where to implement the array logic within this code.