Load relevant HTML page while clicking on each item in a list

Ionic Framework
1

Dear Friends,

iam creating an app with ionic 4 and angular. In my app I have two columns. First column contains list with list of items. second column (right side a iframe). I want to load different html page on right side for each click on left side items in list box. iam using below code:

{{item.name}} 
      <ion-col class="col2">
           <iframe class= 'webPage' name= "samplePage" src="./assets/content/M_1_1_ani.html">
            </iframe>
      </ion-col>

    </ion-row>

in my above code

I want to change the source input on every click on list pls help me to finish this.

iam getting content for list from a json, which has html files name:

Thanks in advance,

Syed Abdul Rahim

2

When i get you right, you have a list like [‘a.html’, ‘b.html’, etc] and want to use this as Social Club in the iFrame. So a working Code could be:

<ion-row>
  <ion-col class="col2">
    <div *ngFor="let item of list" (click)="setSrc(item)">{{item.name}}</div>
  </ion-col>
  <ion-col class="col2">
    <iframe class= 'webPage' name= "samplePage" src="./assets/content/{{fileName}}l">
    </iframe>
  </ion-col>
</ion-row>

(The HTML File)

fileName: string;

setSrc(item){
  this.fileName = item.name;
}

(The TS File)

What happens here is that you enter the Src in the iFrame dynamically over the fileName Variable. And you have a click Methode for every List Item and change the variable on Click on an item. :slight_smile:

3

Thanks Mr.EinfachHans

4

If it works for you, would be great if you can accept my above answer as the solution :blush: