Refer SCSS variable value in HTML or TS file in Angular

Question

I was doing the research if it is possible to use the SCSS variable value in HTML or TS in Angular.

For example

I have a variable called $mdBreakpoint: 992px; inside _variable.scss file

In html I have a condition

[ngClass]="{'col-sm-3': innerWidth >= 992}"

992 is the same value as the $mdBreakpoint

My question is it possible to refer $mdBreakpoint in HTML condition.

I am using Angular 8

Answer 1

You can create a variable which holds value of mdBreakpoint and then use it HTML template:

TypeScript:

mdBreakpoint = 992;

HTML:

[ngClass]="{'col-sm-3': innerWidth >= mdBreakpoint }"

Answer 2

It's not directly supported by Angular, html or sass. You can't access scss variables in a html template without writing some logic.

See this answer if you want more information on how to do it: access SASS values ($colors from variables.scss) in Typescript (Angular2 ionic2)