How to set image url in html from typescript?

Question

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');
  }

}

@Yogesh,i don't get why you need code for this?Anyway i included code. — codewiz
– codewiz, Commented Oct 21, 2017 at 7:00
So that someone who's answering will do so by modifying it or pointing out the mistakes in it instead of writing it from scratch (At least I would do that). — Yogesh
– Yogesh, Commented Oct 21, 2017 at 7:05
<img [src]="theWallImageUrl" />, and in the code: this.theWallImageUrl = .... Simple property binding. — JB Nizet
– JB Nizet, Commented Oct 21, 2017 at 7:11
@Yogesh,i understand your point.I'm just asking how to set img url from typescript dynamically?Now tell me how to do that. — codewiz
– codewiz, Commented Oct 21, 2017 at 7:13

JB Nizet · Accepted Answer · 2017-10-21 07:23:39Z

2

It's a simple property binding:

<img [src]="theWallImageUrl" />

and in the code of the component:

this.theWallImageUrl = ...

answered Oct 21, 2017 at 7:23

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

5 Comments

codewiz Over a year ago

Can you also tell me,how to set dynamically set ion label?

JB Nizet Over a year ago

I have no idea what you mean by that.

codewiz Over a year ago

JB Nizet In question html there is <ion-label>Elephant</ion-label>.How can i set what is given between <ion-label> from typescript?

JB Nizet Over a year ago

So you want <ion-label>{{ someLabel }}</ion-label>? and in the component: this.someLabel = ...? You're asking basic questions about angular. You won't go very far if you don't take time to learn the framework. This is probably the very first things you normally learn about it. Read the documentation, or a good book (like books.ninja-squad.com/angular)

codewiz Over a year ago

JB Nizet thanks for the link,i know what you are trying to say.I'm 2 days experienced in this.So,i'm fresh in this.

Collectives™ on Stack Overflow

How to set image url in html from typescript?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related