How to define a specific location in each item from loop ANGULAR

Issue

I created activity.json and I want to call data from json file. So, I made a ngFor loop in another file for getting the each item/data from json. I thought it could get the location url-link from json file and put it to "<iframe src=" line of html file as a src link.

Following code, that mention about above issue.

[this is html file][1]

<div *ngFor="let seminer of activities">

  <!-- <p>dive giriyor 6/6</p> -->
  <h6>{{seminer.name}}</h6>
  <iframe src="{{seminer.location}}" width="95%" height="225" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

The spesific definition, this expression "{{seminer.location}}" couldn't accept as src link. How can I fix this issue. I mean I want to call each different location from json file.

[this is json file][2] {

"activities":
[
    {

        "id":1,
        "name":"Akınsoft Robotik Yarışması",
        "location":"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d97887.93596631498!2d32.725496907783025!3d39.9414344280414!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbda608ad56f1f424!2zQWvEsW5zb2Z0IEFua2FyYSBCw7ZsZ2UgTcO8ZMO8cmzDvMSfw7wtIEJpcmV5c2VsIEJpbGnFn2lt!5e0!3m2!1str!2str!4v1623673068413!5m2!1str!2str"
        
    },
    {

        "id":2,
        "name":"Parantez Teknoloji Arge Çalışması",
        "location":"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3059.4160712434614!2d32.829206315242146!3d39.932081979424524!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14d34ec5db5faa51%3A0xc30ca1837518daa4!2sParantez%20Teknoloji!5e0!3m2!1str!2str!4v1623673296169!5m2!1str!2str"
        
    },
    {

        "id":3,
        "name":"Tusaş Ionic Mobil Tasarımlama",
        "location":"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3049.556596789323!2d32.651176815249194!3d40.15215957939679!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x408276c02c887105%3A0x1c5ec14c2922033f!2zR0FaxLAgw5xOxLBWRVJTxLBURVPEsCBUVVNBxZ4gS0FaQU4gTUVTTEVLIFnDnEtTRUtPS1VMVQ!5e0!3m2!1str!2str!4v1623673780177!5m2!1str!2str"

    }
]

}

Solution

I guess the html tool don't let to use us a specific variable for routing a URL-link in other file. It has to used link in that place from direct, like this;

src="https://..."

I tried to different way for solving this issue. I tried to reach with different id's of each item. My solution is;

  <iframe *ngIf="seminer.id==1" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d97887.93596631498!2d32.725496907783025!3d39.9414344280414!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbda608ad56f1f424!2zQWvEsW5zb2Z0IEFua2FyYSBCw7ZsZ2UgTcO8ZMO8cmzDvMSfw7wtIEJpcmV5c2VsIEJpbGnFn2lt!5e0!3m2!1str!2str!4v1623673068413!5m2!1str!2str" style="border:0;" allowfullscreen="" loading="lazy" class="center"></iframe>
  <iframe *ngIf="seminer.id==2" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3059.4160712434614!2d32.829206315242146!3d39.932081979424524!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14d34ec5db5faa51%3A0xc30ca1837518daa4!2sParantez%20Teknoloji!5e0!3m2!1str!2str!4v1623673296169!5m2!1str!2str" style="border:0;" allowfullscreen="" loading="lazy" class="center"></iframe>
  <iframe *ngIf="seminer.id==3" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3049.556596789323!2d32.651176815249194!3d40.15215957939679!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x408276c02c887105%3A0x1c5ec14c2922033f!2zR0FaxLAgw5xOxLBWRVJTxLBURVPEsCBUVVNBxZ4gS0FaQU4gTUVTTEVLIFnDnEtTRUtPS1VMVQ!5e0!3m2!1str!2str!4v1623673780177!5m2!1str!2str" style="border:0;" allowfullscreen="" loading="lazy" class="center"></iframe>      

Answered By - Abdullah Gür