Modifying iframe src using click event from a separate component in Angular 10

Question

Modifying iframe src using click event from a separate component in Angular 10

I am looking to dynamically update the src attribute of an iframe when the menu bar is clicked. The menu bar resides in a separate component and includes a dropdown menu for changing languages. Depending on which language is selected, I want to update the src attribute of the iframe.

Below is the HTML code for my menu containing the 'updateSrc()' function:

<nav>

<div class="select-box">
                      <div class="select-box__current" tabindex="1">
                        <div class="select-box__value" (click)="updateSrc(first_url)">
                          <input class="select-box__input" type="radio" id="0" value="1" name="Ben" checked="checked"/>
                          <p class="select-box__input-text">Es</p>
                        </div>
                        <div class="select-box__value" (click)="updateSrc(second_url)">
                          <input class="select-box__input" type="radio" id="1" value="2" name="Ben"/>
                          <p class="select-box__input-text">En</p>
                        </div>
                        <div class="select-box__value">
                          <input class="select-box__input" type="radio" id="2" value="3" name="Ben"/>
                          <p class="select-box__input-text">It</p>
                        </div>
                        <img class="select-box__icon" src="http://cdn.onlinewebfonts.com/svg/img_295694.svg" alt="Arrow Icon" aria-hidden="true"/>
                      </div>

                      <ul class="select-box__list">
                        <li>
                          <label class="select-box__option" for="0" aria-hidden="aria-hidden">Es</label>
                        </li>
                        <li>
                          <label class="select-box__option" for="1" aria-hidden="aria-hidden">En</label>
                        </li>
                        <li>
                          <a href="https://esourcecapital.it/">
                          <label class="select-box__option" aria-hidden="aria-hidden">It</label>
                          </a>
                        </li>
                      </ul>
                    </div> 

</nav>

Here is the TypeScript file for handling the logic:

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  menu:boolean = false;

  constructor(private translate: TranslateService,
              private sanitizer: DomSanitizer)
    {  }

  ngOnInit(): void {

  }

  first_url = "https://www.youtube.com/embed/4oP20QZxahk";
  second_url = "https://www.youtube.com/embed/Q_ZPBqVF0_8";
  current_url: SafeUrl;

  updateSrc(url) {
    this.current_url=this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }


}

The iframe element that needs to be updated is located in a different component:


<div class="center">
                            <iframe width="640" height="360" id="frame" frameborder="0" src="https://www.youtube.com/embed/4oP20QZxahk" [src]="current_url" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<!--                            <div class="pairs">
                                <button md-button (click)="updateSrc(first_url)" id="first" class="top-link">Video en español</button>
                                <button md-button (click)="updateSrc(second_url)" id="second" class="top-link">Video in english</button>
                            </div> -->
                        </div>

In summary, the issue arises from having the menu and the iframe in separate components, making it challenging to update the iframe based on the language selection in the menu.

javascript angular typescript angular10

Answer 1

Answer №1

To facilitate data sharing between components, consider using a subject and a service:

Iframe Service

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class IFrameService {

  private srcSubject = new Subject<string>();

  srcObservable$: Observable<string> = this.srcSubject.asObservable();

  constructor() { 
  }

  changeSrc(incomingSrc) {
    this.srcSubject.next(incomingSrc);
  }
}

Next, inject the service into both the menu and iframe components:

Menu TS File

In the header component file, modify the `changeSrc` method to call the `IFrameService`'s `next` method to emit a new value for the created subject.

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  menu: boolean = false;

  constructor(private translate: TranslateService,
              private sanitizer: DomSanitizer,
              private iframeService: IFrameService)
    {  }

  ngOnInit(): void {

  }

  first_url = "https://www.youtube.com/embed/4oP20QZxahk";
  second_url = "https://www.youtube.com/embed/Q_ZPBqVF0_8";
  current_url: SafeUrl;

  updateSrc(url) {
      this.iframeService.changeSrc(this.sanitizer.bypassSecurityTrustResourceUrl(url));
  }
}

IFrame Component File

In the Iframe component file, create an instance of the service similar to the header file. Remember to instantiate it as a public service so you can use it in your template. Subscribe to the observable in your HTML using the async pipe.

<div class="center">
  <iframe width="640" height="360" id="frame" frameborder="0" src="https://www.youtube.com/embed/4oP20QZxahk" [src]="iframeService.srcObservable | async" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<!--<div class="pairs">
      <button md-button (click)="updateSrc(first_url)" id="first" class="top-link">Video en español</button>
      <button md-button (click)="updateSrc(second_url)" id="second" class="top-link">Video in english</button>
  </div> -->
</div>

If you're still unsure about implementing subjects and observables, check out this video for further clarification.

Answer 2

To facilitate data sharing between components, consider using a subject and a service:

Iframe Service

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class IFrameService {

  private srcSubject = new Subject<string>();

  srcObservable$: Observable<string> = this.srcSubject.asObservable();

  constructor() { 
  }

  changeSrc(incomingSrc) {
    this.srcSubject.next(incomingSrc);
  }
}

Next, inject the service into both the menu and iframe components:

Menu TS File

In the header component file, modify the `changeSrc` method to call the `IFrameService`'s `next` method to emit a new value for the created subject.

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  menu: boolean = false;

  constructor(private translate: TranslateService,
              private sanitizer: DomSanitizer,
              private iframeService: IFrameService)
    {  }

  ngOnInit(): void {

  }

  first_url = "https://www.youtube.com/embed/4oP20QZxahk";
  second_url = "https://www.youtube.com/embed/Q_ZPBqVF0_8";
  current_url: SafeUrl;

  updateSrc(url) {
      this.iframeService.changeSrc(this.sanitizer.bypassSecurityTrustResourceUrl(url));
  }
}

IFrame Component File

In the Iframe component file, create an instance of the service similar to the header file. Remember to instantiate it as a public service so you can use it in your template. Subscribe to the observable in your HTML using the async pipe.

<div class="center">
  <iframe width="640" height="360" id="frame" frameborder="0" src="https://www.youtube.com/embed/4oP20QZxahk" [src]="iframeService.srcObservable | async" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<!--<div class="pairs">
      <button md-button (click)="updateSrc(first_url)" id="first" class="top-link">Video en español</button>
      <button md-button (click)="updateSrc(second_url)" id="second" class="top-link">Video in english</button>
  </div> -->
</div>

If you're still unsure about implementing subjects and observables, check out this video for further clarification.

Modifying iframe src using click event from a separate component in Angular 10

Answer №1

Similar questions

Creating Location-Specific Customer Data using AngularJS similar to Google Analytics

Create-react-app unable to activate Service Worker

What is the best way to wait for a series of subscriptions to complete?

Encountered issue: The type 'Teacher[]' cannot be assigned to the type 'Teacher'

Using Javascript in .NET to restrict the number of characters allowed in a textbox during typing and pasting

Generating random numbers within specified character limits using Javascript and Selenium

Using JavaScript to send formatted text through POST requests in a Rails application

What is the best way to hide a custom contextmenu in AngularJs?

Curious about the missing dependencies in React Hook useEffect?

Transform JSON data into a new object

Experience the seamless integration of Restful APIs with AngularJS and Querystring parameters

Have you noticed the issue with Angular's logical OR when using it in the option attribute? It seems that when [(ngModel)] is applied within a select element, the [selected] attribute is unable to change

Attempting to create a child process within the renderer by triggering it with a button click

After calling the PHP API, the http.get method in Ionic 2 is returning a value of isTr

Elegant switch in jQuery

Angular @Input set function not being activated during unit testing

Coordinate the timing of CSS animation with the loading of the page

Using Angular 5 to access a variable within a component while iterating through a loop

Having trouble getting rid of the border-bottom?

Is it possible to automatically close navigation dropdowns when the screen size changes?