Angular : Access component variable in css file

Issue

Here is my css file and I'm trying to do like this :

.login-wrapper {
  background-image: url({{imagePath}});
}

My component:

export class LoginComponent implements OnInit {
  imagePath: any = 'assets/discord-logo.png';

  constructor() {}

  ngOnInit() {}
}

It doesn't work.

How can I do to inject the 'imagePath' from my component to the css file ?

Thanks for any help

Solution

you can apply inline css in html file like this:

<div class="div"  [style.backgroundImage]="'url('+imageUrl+')'">
</div>

demo link:https://stackblitz.com/edit/angular-ivy-1rf1tl?file=src/app/app.component.html

Answered By - Aniruddh Thakor