CODEWITHSUNDEEP
functiontypescriptionic-frameworkionic2ionic3
TC Roberts
TC Roberts

Reputation: 185

Passing a function to another function on a separate component in Ionic 2 or 3

a bit of a tricky one here. I've been trying to wrap my head around this one with no success. Ok, here it goes... I've got a function in a different ionic component set out like this:

home.ts

   playAudio() { 

    this.streamingMedia.playAudio('MY-URL');

    this.play = false;

    }

    stopAudio() {
    this.streamingMedia.stopAudio();

    this.play = true;
    }

Then I set up this boolean within the same home.ts file to toggle between the play and pause buttons

play: boolean = true;

Now, in my home.html file I have it setup as follows:

home.html

<div *ngIf="play">
<img src="assets/img/play.png" class="play" (tap)="playAudio()" />
</div>

<div *ngIf="!play">
<img src="assets/img/pause.png" class="play animated flip"     
(tap)="stopAudio()" />
</div>

Essentially what is happening here is, when I click the play button, play starts and then it shows the pause button. And likewise, when I click the pause button, play stops and shows the play button.

So, here is my problem, I'm trying to call the function in a different page/component. I want it to automatically play the stream when I open the page, I tried doing that by writing the same playAudio() function (as in the home.ts file) in the app.component.ts file where I need to set the function:

app.component.ts

play: boolean = true;

constructor() {
this.playAudio(); }

playAudio() {       
this.streamingMedia.playAudio('MY_URL');
this.play = false;
}

but when the page opens, the stream plays but I then don't have the option to set the pause button in place of the play button.

I hope I'm making sense.

Upvotes: 2

Views: 3859

Answers (1)

Anjil Dhamala
Anjil Dhamala

Reputation: 1622

First, a suggestion: On your playAudio() function in home.ts, set this.play = true and vice versa in stopAudio(). In your html, do a checkpoint for !play instead of play and you have a sensible logic that can be understood by anybody else that reads your code.

For your dilemma, I'd suggest using an angular service injectable

Basically, create your service. Decorate it as an injectable. Reference it as a provider in your app.module.ts and inject it into your app.component.ts's and home.ts's constructor. write and retrieve your playAudio() and stopAudio() in and from that service.

something like this:

    import {Injectable} from '@angular/core';
    import {StreamingMedia} from '@ionic-native/streaming-media';

    @Injectable()
    export class PlayerService {
    playing: boolean;
    audioUrl: string = //whatever url;

    //Inject your dependencies here
    constructor(public streamingMedia: StreamingMedia){
      this.playing = false;
    }

    playAudio(){
    this.streamingMedia.playAudio(this.audioUrl);
    this.playing = true;
    }

    stopAudio(){
    this.streamingMedia.stopAudio();
    this.playing = false;
    }

    }

reference this as a provider in your app.module.ts under providers section: providers: [PlayerService]

In your home.ts's constructor, inject the service you just made

constructor(public playerService: PlayerService){}

To use the playAudio() and stopAudio() function, just type this.playerService.playAudio() and so on. Use the playing property of the service to tie up with the html.

I hope that clears things up with injectables.

In your app.component.ts, inject the service in the constructor as I showed before. Implement OnInit interface as

export class AppComponent implements OnInit {} and then create a ngOnInit(){} function where you can call the service's playAudio() function to start playing on initialization. And use service's playing property to again tie up with the UI.

Upvotes: 1

Related Questions