Angular 4 使用从 something.component.ts 到 something.component.css 的值

Question

I am a bit new on Angular 4 so this might be a bit stupid question.. I got a value photourl:string; on my component.ts which contains the url of an image from my firebase database.. and I want to use this url as background-image for a div I got in my component.html so dispite {{photourl}} works fine in my component.html {{photourl}} in not recognised in my component.css.. Is there any way I can use typescript values in my component.css file directly or I need to use javascript from component.ts to intervene in the component.css?

Answer 1

Use the ngStyle directive.

<my-component [ngStyle]="{ 'background-image': photoUrl }"></my-component>

Source: https://angular.io/api/common/NgStyle