Styling components with inline CSS - Ionic2, AngularJS

Question

I am trying to append an inline CSS rule for background-image using a dynamic variable set inside the constructor like so:

<div style="background-image: url('{{backgroundImage}}');">
  ...
</div>

then in my Component:

export class SomeComponent {

  backgroundImage = '';

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.backgroundImage = 'https://unsplash.it/200/300' ; }

}

However, when the element is rendered to the screen, the inline CSS rule gets omitted.

I tried using Angular's ng-style, but it returns "Can't bind to 'ng-style' since it isn't a known property of 'div'".

I also tried setting styles inside my @Component declaration as noted in this answer, but this wouldn't fly in my case, as I need the backgroundImage variable to be dynamic.

sebaferreras · Accepted Answer · 2017-06-17 10:39:52Z

6

Since Ionic2 (or just Ionic) is built on top of Angular (an not AngularJS), you can do that like this:

<div [ngStyle]="{ background: 'url(' + backgroundImage + ')' }"></div>

or

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

edited Jun 17, 2017 at 10:39

answered Jun 17, 2017 at 5:40

sebaferreras

44.7k11 gold badges120 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ruffo Over a year ago

2nd one worked for me on Ionic 3 as [style.borderColor]="stat.color" with no interpolation. Thanks

sebaferreras Over a year ago

Glad to hear that @Ruffo :)

Collectives™ on Stack Overflow

Styling components with inline CSS - Ionic2, AngularJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related