4

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?

Bilal Ahmed
  • 381
  • 2
  • 13
  • Please refer below url and it may be helpful for you. https://stackoverflow.com/questions/45661957/angular2-css-style-class-strings-as-inputs-to-component – veera srikanth vemula Apr 16 '18 at 19:06

1 Answers1

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>
Milad
  • 27,506
  • 11
  • 76
  • 85
  • When you say `dac-class="someCssClass"` this someCssClass is read as string. – Bilal Ahmed Apr 24 '17 at 11:19
  • class should be string, shouldn't it ? if you want variable , just pass [dac-class]="someCssClass" – Milad Apr 24 '17 at 14:44
  • 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 – Bilal Ahmed Apr 24 '17 at 14:55
  • What do you mean from .css file ? doesn't make any sense, show us some of your code base – Milad Apr 24 '17 at 14:56
  • `.xClass { width: 20px; height: 30px; }` this class is in the .css file, I want to pass it to another component as it is – Bilal Ahmed Apr 24 '17 at 15:01