How to pass a CSS class as input in Angular2?

Question

I'm trying to use angular2 @Input directive to get a CSS class from another component. Say I have the following:

<custom-component ngClass="xClass"> </custom-component>

I have "xClass" in the current component css file, and I want to pass this class as input to the custom-component using @Input like so:

@Input('dac-class') private class: CSS //not sure about this;

is that possible in one way or another?

Please refer below url and it may be helpful for you. stackoverflow.com/questions/45661957/… — veera srikanth vemula
– veera srikanth vemula, Commented Apr 16, 2018 at 19:06

Milad · Accepted Answer · 2017-04-23 12:12:17Z

0

@Input('dac-class') private Klass: string

The word class is reserved , so you cannot use it as an alias in javascript or typescript, also , it's always nicer to have input with the same name as the alias .:

@Input('dac-class') private decClass: string

and then you'd use it :

 <custom-component dac-class="someCssClass"  ngClass="xClass"> </custom-component>

answered Apr 23, 2017 at 12:12

Milad

28.8k11 gold badges78 silver badges91 bronze badges

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

5 Comments

Bilal Ahmed Over a year ago

When you say dac-class="someCssClass" this someCssClass is read as string.

Milad Over a year ago

class should be string, shouldn't it ? if you want variable , just pass [dac-class]="someCssClass"

Bilal Ahmed Over a year ago

Yes, this would be true if I'm reading this input as object from the .ts file, but this isn't the case. I want to read the css class object with its properties from the .css file

Milad Over a year ago

What do you mean from .css file ? doesn't make any sense, show us some of your code base

Bilal Ahmed Over a year ago

.xClass { width: 20px; height: 30px; } this class is in the .css file, I want to pass it to another component as it is

Collectives™ on Stack Overflow

How to pass a CSS class as input in Angular2?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related