CODEWITHSUNDEEP
cssangularsass
João Ghignatti
João Ghignatti

Reputation: 2391

Access component variable inside SCSS file Angular 2

Is it possible to access a component variable inside .scss file defined for that component?
Ex:

example.component.ts

@Component({
  selector: 'example-selector',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css']
})
export class ExampleComponent {
  @Input() size: number;
}

example.component.scss

.some-class {
  width: calc(100% - {{ size }};
}

If not, how would be a good work around?

Thanks.

Upvotes: 15

Views: 10500

Answers (1)

João Ghignatti
João Ghignatti

Reputation: 2391

Oukei, the solution I found to work around that is actually simple and it does let you use component variables inside styles.
You basically use [ngStyle] directive to change the property of an element.

example.component.ts

@Component({
  selector: 'example-selector',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css']
})
export class ExampleComponent {
  @Input() size: number;
}

example.component.html

<div [ngStyle]="{ 'width': 'calc(100% - ' + size + 'px)' }"></div>

or you can use calc to divide with

<div [ngStyle]="{ 'width': 'calc(100% / ' + size + ')' }"></div>

or use any other given property like that.
And you can also have classes defined for that element and have a specific (or multiple) properties defined with ngStyle.

Thanks.

Upvotes: 17

Related Questions