Angular2 Set CSS Class To Component Variable Value

Question

I'm trying to do something that sounds simple but I'm not finding any examples that meet my needs. I have a simple component that renders an ajax spinner, but I want to allow consumers to pass in a class or multiple classes (seperated by space) as input params to the component and have the components view template add the classes to an img tag in the template. Here is my component:

import { Component, OnInit, Input } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'loading',
    templateUrl: 'loading.html',
    inputs: ['imgClass']

})

export class LoadingComponent {
    @Input() imgClass: string;
}

Here is the view template:

<img [ngClass]="{ imgClass : true}" src="./Content/img/loading_spinner.gif" />

Here is how I want to use it:

 <div class="row" *ngIf="isLoading">
        <div class="col-xs-4"></div>
        <div class="col-xs-4 no-pad"><loading [imgClass]="center-block"></loading></div>
        <div class="col-xs-4"></div>
    </div>

So i want center-block to be added to the img tag through the loading component but It doesn't seem to be working.

When the app loads the markup is this:

It's not getting the imgClass variable value it's adding the literal 'imgClass' as the class.

Answer 1

Change the view template:

<img class="{{imgClass}}" src="./Content/img/loading_spinner.gif" />

This fits better for your needs.

Answer 2

Just

<img [ngClass]="imgClass"

ngClass supports object, string[], and string as parameter

class="{{...}}" 

caused issues on mobile Safare a while ago, but from what I remember this was fixed in the polyfill.