CODEWITHSUNDEEP
cssangulartypescriptsassionic3
Gocha Gochitashvili
Gocha Gochitashvili

Reputation: 305

Ionic 3 - ion-slide inline css

I have Ionic3 App and ion-slides component on main page.

<ion-slides pager>
    <ion-slide *ngFor="let blog of blogs | async" >
      <h2>{{ blog.title }}</h2>
      <p>
      <a target="_blank" class="slider-read-more" ion-button outline color="secondary" (click)="blogDetail(blog)">ვრცლად</a>
      </p>
    </ion-slide>
  </ion-slides>

I want to add inline css background image using style

<ion-slide *ngFor="let blog of blogs | async" style="background:url(blog.image) no-repeat center center fixed;">

but can't pass blog.image inside. how to do this?

Upvotes: 5

Views: 850

Answers (2)

Prashant
Prashant

Reputation: 1385

I have used ngStyle directive to set an ion-slides style. v-3.0

[ngStyle]="{'background-image': 'url(' + blog.image + ')'}"

Upvotes: 2

Sampath
Sampath

Reputation: 65920

You can try as shown below:

i.e. use backgroundImage as a property binding:

 <ion-slide [style.backgroundImage]="'url(' + blog.image + ')'"> ...

Upvotes: 4

Related Questions