How to set parameter in url in angular 6?

Question

Blockquote

how to set the parameter in the URL?

My code as TS below

import { KlassaktUserService,KlassaktStorageService, KlassaktApiService } from '../../core';
import { KlassaktDashboardService, Student, listData } from '../../core/api/dashboard.sevice';
import { DomSanitizer, SafeResourceUrl, SafeUrl} from '@angular/platform-browser';

declare var $: any;
@Component({ 
  selector: 'klassakt-photos',
  templateUrl: './photos.component.html' 
})
export class KlassaktPhotosComponent extends KlassaktDashboardComponent implements OnInit {
  }
  public loaderService: KlassaktLoaderService;

  async ngOnInit() {
    await super.ngOnInit();
  }
  public constructor(

    protected _dashboardService: KlassaktDashboardService,
    public _sanitizer: DomSanitizer) {      
    let  selectedStudent = {
      schoolId: "134"
    }
    this.src = this.sanitizer.bypassSecurityTrustResourceUrl(`http://designs.mydeievents.com/jq-3d-flip-book/index.html?id=${selectedStudent.schoolId}`)
  }
  }
  public get students(): Student[]
  {
    return this._dashboardService.account.students;
  } 
}

this is my parameter which is found in the component.html file.

<p>Hi Arjun this is school Id {{selectedStudent.schoolId}}</p>

from ts file, I want to pass the same parameter 134 is my static school id

 schoolId: "134"

if I want to set dynamic parameter the code is below but not getting "param"

 param : number = this.selectedStudent.schoolId;

But i am not getting static or dynamic parameter in my project.

If I am using the below code working fine.

@Input()
      url: string = "https://arjunwalmiki.blogspot.com/";
      urlSafe: SafeResourceUrl;
     this.urlSafe = this._sanitizer.bypassSecurityTrustResourceUrl(this.url);

    <iframe width="200px" height="300px" frameBorder="0" [src]="urlSafe"></iframe>

above code is working because of its parameterless call with a parameter not working.

@james thank you to edit my question – Arjun Walmiki Sep 24 '19 at 17:48 — Arjun Walmiki, Sep 24 '19 at 17:48

score 1 · Answer 1 · answered Sep 24 '19 at 12:36

1

Maybe this works:

<iframe [src]="'http://designs.mydeievents.com/jq-3d-flip-book/index.html?id='+selectedStudent.schoolId"></iframe>

answered Sep 24 '19 at 12:36

Ehsan Kiani

3,050
1
17
19

Dear All, Can anyone know solution this issue. – Arjun Walmiki Sep 27 '19 at 05:31
@ArjunWalmiki, did you put ' in your url? please copy and paste exactly my answer and see if it works – Ehsan Kiani Sep 27 '19 at 06:43
i try your solution for your refrence this is https://stackblitz.com/edit/angular-kizbtz?file=src%2Fapp%2Fapp.component.html try with id=134 but nothing is display any thing – Arjun Walmiki Sep 27 '19 at 07:43

Adrita Sharma · Answer 2 · 2019-09-24T13:27:57.817

0

Try like this:

TS:

import { DomSanitizer} from '@angular/platform-browser';

  constructor(private sanitizer: DomSanitizer) {

   let  selectedStudent = {
      schoolId: "101"
    }
    this.src = this.sanitizer.bypassSecurityTrustResourceUrl(`http://designs.mydeievents.com/jq-3d-flip-book/index.html?id=${selectedStudent.schoolId}`)
  }

HTML

<iframe [src]="src"></iframe>

Stackbiltz Demo

edited Sep 24 '19 at 13:27

answered Sep 24 '19 at 12:36

Adrita Sharma

21,581
10
69
79

Nevermind, I thought that was inline in the HTML at first glance. – kshetline Sep 24 '19 at 12:42
@kshetline FYI to make `src` a string you need wrap it single quote `"'src'"` – Karthick Manoharan Sep 24 '19 at 12:43
Definitely, @Karthick, I just misread the original reply and was thinking of something more like this: ``, which should also work. – kshetline Sep 24 '19 at 12:46
@kshetline This ain't work as `" "` tries to resolves the values between the quotes – Karthick Manoharan Sep 24 '19 at 12:51
@Ehsan i try but not working. – Arjun Walmiki Sep 24 '19 at 13:00
@kshetline i try not working – Arjun Walmiki Sep 24 '19 at 13:05
@AdritaSharma where in TS file i have to write this code "src = `http://designs.mydeievents.com/jq-3d-flip-book/index.html?id=${selectedStudent.schoolId}`" – Arjun Walmiki Sep 24 '19 at 13:07
It's just a property, you can write it above the constructor – Adrita Sharma Sep 24 '19 at 13:09
@AdritaSharma pls check is it correct :-@Component({ selector: 'klassakt-photos', templateUrl: './photos.component.html' }) export class KlassaktPhotosComponent extends KlassaktDashboardComponent implements OnInit { src: any = 'http://designs.mydeievents.com/jq-3d-flip-book/index.html?id=${selectedStudent.schoolId}'; FindLength: any; totalSecondd: any; corselimgcount: number = 0; tempcount: number = 0; previousval: number = 0; isipad: any; public isIPhone: boolean = false; public checkScreenSize() { this.isIPhone = true; this.isipad = true; } – Arjun Walmiki Sep 24 '19 at 13:18
What shall I check? – Adrita Sharma Sep 24 '19 at 13:19
@Karthick, Angular interpolation does work inside quoted attribute values: https://stackblitz.com/edit/interpolation-inside-quotes – kshetline Sep 24 '19 at 13:22
@ArjunWalmiki I have added a link – Adrita Sharma Sep 24 '19 at 13:28
@AdritaSharma yes i try your solution with schoolid 134 but it is not working – Arjun Walmiki Sep 24 '19 at 16:57

score 0 · Answer 3 · answered Sep 24 '19 at 13:09

Angular will sanitise the iframe url for you so you can't easily inject javascript into it, this is to protect you from XSS. There are workarounds in the following question.

How to set iframe src in Angular 2 without causing `unsafe value` exception?

Arjun Walmiki · Answer 4 · 2019-09-28T18:39:32.977

This is my code after mix typescript ,jquery and html i found the solution.

 <a (click)="showDiv(selectedStudent.schoolId)" data-toggle="modal" data-target="#exampleModal"> Arjun click here </a>


<!-- Modal -->

 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <!--<iframe id="myIframe" onload="delayedLoad()"></iframe>-->
                <div id="videoContainer">
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

              </div>
            </div>
          </div>
        </div>
showDiv(pageid) {

    this.autoPlayVideo(pageid)
  }

  autoPlayVideo(vcode) {
    $("#videoContainer").html('<iframe width="200px" height="200px" src="http://designs.mydeievents.com/jq-3d-flip-book/index.html?id=' + vcode + '" ></iframe>');
    };

Thank you to all for your valuable time .spl thanks to @Adrita Sharma.

How to set parameter in url in angular 6?

4 Answers4