Use variables inside @component styles

Question

I want to generate some dynamic CSS and use it inside the styles of @component. I don't know exactly how to pass that variable and wonder even if it is possible to do this. Here is the piece of code that uses the variable "stylesArray".

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    styles: stylesArray,
    encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
    stylesArray: string[] = [
        // Generate some dynamic css here
    ];
}

Answer 1

You can do it with the host decorator property:

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    encapsulation: ViewEncapsulation.None,
    host: {
      '[style]': 'stylesArray'
    }
})
export class AppComponent {
    stylesArray: string[] = [
        // Generate some dynamic css here
    ];
}