How to fetch url from backend to iframe when change in selection in angular material

Question

.html page

<iframe width="100%" height="100%" src="{{url}}" frameborder="0" allowfullscreen></iframe>

.ts file

 this.url = 'https://www.youtube.com';

On change of selection from dropdown list based on the url ifrmae src should get updated.

Answer 1

in .html page

<iframe width="100%" class="embed-responsive-item" height="100%" src="" frameborder="0" allowfullscreen></iframe>

in .ts file

import ElementRef from '@angular/core';

Initialise it in constructor as below

constructor(private hostElement: ElementRef)

add these lines wherever this you want to get triggered.

const iframe = this.hostElement.nativeElement.querySelector('iframe');
iframe.src = 'https://www.youtube.com';