CODEWITHSUNDEEP
ionic3angular5datatriggereventtriggerion-select
Rhodney Noquiao
Rhodney Noquiao

Reputation: 49

Selected data will trigger the image

what i want to do is to when i select "studio unit" the image of the studio unit will display only the studio unit ... the problem is when i select the studio unit the image still shows the 3 image it should show the studio unit iamge...

enter image description here

here is my code. .html

<div style="margin-top: -10px"  *ngFor="let house of house_designs; let i - index">
      <div>
    <img src="{{url_asset}}{{house.photo_name}}">
  </div>
  </div>
  <button ion-button full (click)="design()">{{ switchbtn }}</button>
</ion-card>


<form [formGroup]="registerForm"(ngSubmit)="onSubmit()">
<ion-card>
  <ion-item no-lines>
      <ion-label color="primary">House Design:</ion-label>
      <ion-select 
        formControlName="house_design_id"  
        placeholder="Select house design"
         [(ngModel)]="qa_form.house_designs_id">
        <ion-option 
          value="{{house.id}}" 
          *ngFor="let house of house_designs; let i - index"
           name="house_design_id"  
           >{{house.description}}</ion-option>

      </ion-select>
  </ion-item>
</ion-card>

Can someone help me tnx...

Upvotes: 0

Views: 42

Answers (1)

Mukul_Vashistha
Mukul_Vashistha

Reputation: 106

I have created a working example for you. Check the StackBlitz you had created. I have made changes there for you to understand it.

https://angular-c7x7gc.stackblitz.io

First the .ts file:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
 url:any;
 house_designs:any=[]; 

  ngOnInit(){
    this.house_designs = 

   [
    {
      "id": 1,
      "name": "Studio",
      "url": "https://images.unsplash.com/photo-1502759683299-cdcd6974244f?auto=format&fit=crop&w=440&h=220&q=60",

    },
    {
      "id": 2,
      "name": "1 BHK",
      "url": "https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg",
    }
  ]

this.url = this.house_designs[0].url;
  } //ngOnInit

  onSelectChange(selectedValue: any) 
  { 
    this.url = selectedValue; 
  } 
}

Now html file:

<div>
<img src="{{url}}">
</div>

<select (change)="onSelectChange($event.target.value)" > 
  <option [value]="data.url" *ngFor="let data of house_designs">{{data.name}}</option>
</select>

Try changing the dropdown and you'll be able to see that image changes with the value.

Upvotes: 0

Related Questions