how can i access component variable from css Angularjs2

Question

home.component.css

#first-example {
  margin-top: 20%;
   /*parallax_image_path not working*/
  background-image: url({{parallax_image_path}});
}

home.component.html

<div class="main_container">

  <div class="main_content">
    <h2>Coming Soon</h2>
  </div>

  <div parallax id="first-example"></div>

</div>

home.component.ts

import {Component} from "@angular/core";
/**
 * Created by sai on 3/7/17.
 */
@Component({
  selector: "home",
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class Home {
  parallax_image_path = '/assets/website_background.jpg'
}

Possible duplicate of [How to add background-image using ngStyle (angular2)?](http://stackoverflow.com/questions/34875426/how-to-add-background-image-using-ngstyle-angular2) — JayChase, Mar 08 '17 at 03:20

score 0 · Answer 1 · edited May 23 '20 at 20:57

0

Just call the variable but you need to angular attribute.

In Angular 1, I believe we can use ng-src or src width curly braces inside the value. In angular 2, we can do it this way:

<img [src]="parallax_image_path">

edited May 23 '20 at 20:57

marc_s

732,580
175
1,330
1,459

answered Mar 08 '17 at 03:19

hdotluna

5,514
4
20
31

How can i do this in .css file? – Sai Mar 08 '17 at 03:48
@SaiKiran In your component. You have `styleUrls array`. Store it there. – hdotluna Mar 08 '17 at 04:09

score 0 · Answer 2 · answered Oct 03 '17 at 16:13

You can not access it from home.component.css if that's what u are trying to do, but you can achieve the same effect using [ngStyle] angular directive.

import { Component, OnInit, Input } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})

export class MyComponent implements OnInit {

  private backgroundImg: SafeStyle;
  @Input() myObject: any;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
     this.backgroundImg = this.sanitizer.bypassSecurityTrustStyle('url(' + this.myObject.ImageUrl + ')');
  }

}

<div [style.background-image]="backgroundImg"></div>

how can i access component variable from css Angularjs2

2 Answers2