CODEWITHSUNDEEP
htmltypescriptionic-frameworkionic3
codewiz
codewiz

Reputation: 521

How to set image url in html from typescript?

I'm building ionic app for wallpaper/gallery.I want app to show wallpaper in full screen when user clicks on a particular image.

Thanks.

HTML code:

<ion-header>
  <ion-navbar color="dark">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Walldo</ion-title>
  </ion-navbar>
</ion-header>
<ion-slides zoom="true">
  <ion-slide>
    <div class="swiper-zoom-container">
      <img id="fullwall" src="some link">
    </div>
    <ion-label>Elephant</ion-label>
    <button ion-button round (click)="download('wall.jpg')">Download</button>      
  </ion-slide>
</ion-slides>

TYPESCRIPT code:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-popular',
  templateUrl: 'popular.html',
})
export class PopularPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }


  ionViewDidLoad() {
    console.log('ionViewDidLoad PopularPage');
  }

}

Upvotes: 1

Views: 8131

Answers (1)

JB Nizet
JB Nizet

Reputation: 691685

It's a simple property binding:

<img [src]="theWallImageUrl" />

and in the code of the component: 

this.theWallImageUrl = ...

Upvotes: 2

Related Questions