CODEWITHSUNDEEP
angularjsangularjs-directiveangularangular2-directives
Gillardo
Gillardo

Reputation: 9818

How can i style an angular2 component tag dynamically?

New to angular2, so sorry if this is a stupid, easy question.

In angular1, i could create a simple directive like this, which will add a css class to the element, if a property of the model is true.

angular.module('app').directive('myDirective', function () {
    'use strict';

    return {
        restrict: 'E',
        templateUrl: '<div>Hello</div>',
        scope: {},
        bindToController: {
            myModel: '='
        },
        controller: function() {

        },
        controllerAs: 'ctrl',
        link: function(scope, element, attrs, ctrl) {
            if (myModel.addClass)
                element.addClass('col-xs-2');
        }
    };

});

How can i do this in angular2? Here is the component code for angular2, but i cannot find out how to add the class to the root element tag.

imports { Input } from '@angular/core';

@Component({
    selector: 'my-directive',
    template: `
        <div>Hello</div>
    `,
})

export class MyDirectiveComponent {
    @Input()
    myModel: Object;
}

Upvotes: 0

Views: 206

Answers (2)

brewsky
brewsky

Reputation: 617

I think you are looking for ngClass binding...

<div [ngClass]="{'col-xs-2': myModel.addClass}">

Upvotes: 1

Pratik Kelwalkar
Pratik Kelwalkar

Reputation: 1632

Easy way (but not recommended ) would be

<div [style]="myStyle"></div>

and in your component

export class MyDirectiveComponent {
    @Input()
    myModel: Object;

   changeModel(col : number){
    this.myModel = 'col-xs-'+col; // Gives you col-xs-1 or 2 ....based on input
   }
}

Upvotes: 0

Related Questions