pass data from component to html in angular

Question

I trying to pass data from component to html in specific case :

i have in component method that get a id:

component.ts:

getId(){


this.id = 3; // example, i have in id number 3 (example)

}

component.html:

i have here a link url in iframe

<iframe width="1000" height="1000" src="http://....../watcher/ {{ here i want this.id}}" style="border:0"></iframe>

How i can pass this id in component.html?

Make a dynamic src variable in your component.ts itself, and directly use it in the iframe src. — Soumil Khandelwal
– Soumil Khandelwal, Commented Jun 28, 2021 at 10:45

Juan Vicente Berzosa Tejero · Accepted Answer · 2021-06-28 11:20:42Z

2

in your ts:


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

id = 100; // for instance

  constructor(protected _sanitizer: DomSanitizer) {}

  public getUrl(id: number) {
    const urlSanitazed = `http://http.cat/${id}`; // Your url `http://.../watcher/${id}`;

    return this._sanitizer.bypassSecurityTrustResourceUrl(urlSanitazed);
  }

in html:

<iframe
    width="1000"
    height="1000"
    [src]="getUrl(id)"
    style="border: 0"
  ></iframe>

answered Jun 28, 2021 at 11:20

Juan Vicente Berzosa Tejero

3,0422 gold badges8 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

pass data from component to html in angular

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related