how to bind class name from a json file using Angular [ngClass]

Question

I have a json file contains a icons object like this:

"icons" : {
        "logo" : "fa fa-caret-down",
        "search" : "fas fa-search",
        "bell" : "far fa-bell"
    }

In my component.ts, I am able to get this icons object using a service successfully like this:

navIcons: object;
   getNavIcons(): void {
    this.navbarService.getNavIcons()
    .subscribe(navIcons => {
      this.navIcons = navIcons;
      console.log(this.navIcons)
    //   icons : {
    //     logo : "fa fa-caret-down",
    //     search : "fas fa-search",
    //     bell : "far fa-bell"
    // }
    });
  }

How can I bind thoes class in the component.html template? I tried like this:

 <i id="logo" [ngClass]="['navIcons.logo']" class="nav-icon"></i>

but it failed. I also have another calss: nav-icon need to added into this logo? Thank you in advanced!

Martin Parenteau · Accepted Answer · 2019-03-25 02:22:50Z

1

Try this ngClass syntax :

[ngClass]="navIcons?.logo"

Since navIcons is initially undefined, use the safe navigation operator ?. to prevent the exception when trying to access the logo property.

answered Mar 25, 2019 at 2:22

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

Collectives™ on Stack Overflow

how to bind class name from a json file using Angular [ngClass]

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related