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?

Answer 1

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>