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.
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.
