0

I am trying to change the [icon]="ractAtom" to use a value from Json but it does not seem to work. Please, could someone help with this. In other words, the [icon]'s value should be based on the 'featureItem' that is being received from the parent

HTML

<div>
    <fa-icon [icon]="reactAtom" class="icon-automation"></fa-icon>
    <h3>{{featureItem.name}}</h3>
    <p class="card-title-features">{{featureItem.description}}</p>
    <hr class="line-separator">
    <accordion closeOthers="true" *ngFor="let accGroup of featureItem.accorditions">
        <accordion-group [isOpen]="false" #accordionGroupRef>
            <span accordion-heading style="display:flex;justify-content:space-between;align-items:center">
                <div>
                    <fa-icon [icon]="heart"></fa-icon> <span class="card-title-accordtion">{{accGroup.accorditionTitle}}</span>
                </div>
                <fa-icon *ngIf="accordionGroupRef.isOpen" [icon]="caretDown"></fa-icon>
                <fa-icon *ngIf="!accordionGroupRef.isOpen" [icon]="caretUp"></fa-icon>
            </span>
            <p>{{accGroup.accordtitionDescription}}</p>
        </accordion-group>
    </accordion>
</div>

TS

import { Component, Input, OnInit } from '@angular/core';
import {faReact} from '@fortawesome/free-brands-svg-icons';
import {faPeopleGroup, faBullseye, faHeart,faCaretUp, faCaretDown} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-features-item',
  templateUrl: './features-item.component.html',
  styleUrls: ['./features-item.component.scss']
})
export class FeaturesItemComponent implements OnInit {
  @Input() featureItem:any;
  
  reactAtom = faReact;
  peopleGroup = faPeopleGroup;
  bullseye = faBullseye;
  heart = faHeart;
  caretDown = faCaretDown;
  caretUp = faCaretUp;

  constructor() { }

  ngOnInit(): void {
  }

}

Here is the JSON that I am using:

featuresJson = [
      {
        "name":"Automation",
        "mainIcon":"reactAtom",
        "mainIconClass":"icon-automation",
        "description": "Automate admin work and cut costs by 60%",
        "accorditions":[
          {"icon":"heart",
            "accorditionTitle":"Complience",
            "accordtitionDescription":"Certify employees on the latest policy and regulatory requirements."
          },
          {"icon":"heart",
            "accorditionTitle":"HCM Sync",
            "accordtitionDescription":"Streamline the learning experience for employees and administrators."
          },
          {"icon":"heart",
            "accorditionTitle":"Live",
            "accordtitionDescription":"Schedule training sessions, increase fill rates & verify attendance digitally."
          }
        ]
      },
      {
        "name":"Enablement",
        "mainIcon":"peopleGroup",
        "mainIconClass":"icon-enablement",
        "description": "Enable client-facing teams to over perform",
        "accorditions":[
          {"icon":"heart",
            "accorditionTitle":"Mobile Advanced",
            "accordtitionDescription":"Provide frontline teams with shared device access, video evaluation & mobile content creation."
          },
          {"icon":"heart",
            "accorditionTitle":"Coaching",
            "accordtitionDescription":"Boost confidence and performance through Coaching."
          },
          {"icon":"heart",
            "accorditionTitle":"Extended Enterprise",
            "accordtitionDescription":"Onboard new clients, partners & other non-employees in your 360Learning environment."
          },
          {"icon":"heart",
            "accorditionTitle":"Software Adoption",
            "accordtitionDescription":"Turn your team into tool experts with interactive training experiences."
          }
        ]
      },
      {
        "name":"Development",
        "mainIcon":"bullseye",
        "mainIconClass":"icon-development",
        "description": "Make professional growth a pillar of your company's culture",
        "accorditions":[
          {"icon":"heart",
            "accorditionTitle":"Onboarding",
            "accordtitionDescription":"Make sure new employees hit the ground running and ramp-up quickly."
          },
          {"icon":"heart",
            "accorditionTitle":"Curated Programs",
            "accordtitionDescription":"Give learners access to catalogs of best-in-class courses."
          }
        ]
      }
    ]

So, I was trying to do the following but it would simply not work. I'd appreciate any input.

<fa-icon [icon]="[featureItem.mainIcon]" class="icon-automation"></fa-icon>

1 Answer 1

1

First off I would recommend to create an interface to represent this structure so you can type your variables (@Input() featureItem).

Next, this

<fa-icon [icon]="[featureItem.mainIcon]" class="icon-automation"></fa-icon>

should be

<fa-icon [icon]="featureItem.mainIcon" class="icon-automation"></fa-icon>

Those brackets are incorrect.

Sidenote:
You can remove all the quotes around the property names in the object. It is a javascript object. If you originally have a JSON (e.g. you had a http response) you can either use implicit type casting (with an interface) or explicitly use JSON.parse.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.