Angular 2 Parent Component Losing Input Binding from Child Component

Question

I'm working with a parent component that references a child component that plays an audio file in Angular 2. Initially, I'm passing the audio file an input variable of _audioState which contains a string value of "Listen". When the audio button is clicked, this value changes to "Playing" and then "Replay" once the audio file is done playing. These string value changes happen in the audio child component.

When the button with the nextAudio function is clicked in the parent component, I want to reassign _audioState back to "Listen", but the input binding isn't working in the parent once the child component changes this value.

I'm still learning Angular 2 and wasn't sure the best way to get this working. I appreciate any suggestions. My code is below.

Parent Component:

 @Component({
    selector: 'parent-component',
    template: ' <div>
                    <button (click)="nextAudio()"></button>
                    <audio-button [audioPath]="_audioPath"  
                    [audioSrc]="_audioCounter" [audioState]="_audioState">          
                    </audio-button>
                </div>',
    styleUrls: ['./parent-component.less']
})

export class ParentComponent {
 _audioPath: string = "../audio/";
 _audioCounter: number = 1;
 _audioState: string = "Listen";

  nextAudio(): void{
    this._audioCounter = this._audioCounter + 1;
    this._audioState = "Listen";
  }  
}

Child Component:

@Component({
    selector: 'audio-button',
    template: '<button (click)="playSound()"><i class="fa fa-volume-up"></i>    
    {{audioState}}</button>',
    styleUrls: ['./audio-button.component.less']
})
export class AudioButtonComponent {
    @Input() audioPath: string;
    @Input() audioSrc: string;
    @Input() audioState: string;

playSound(): void {
    let sound: any = new Audio(this.audioPath + this.audioSrc + ".mp3");
    sound.play();
    this.audioState = "Playing";
    sound.addEventListener('ended', () => {
        this.audioState = "Replay";
    }, false)

    event.preventDefault();
   }
}

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

there are several ways to do it, including of

1. (Recommand) Using ngrx/store

References

Adding Redux with NgRx/Store to Angular (2+) – Part 1 (Oren Farhi)

2. EventEmitter

For example,

@Component({
selector: 'parent-component',
template: `<div>
                Current state : {{_audioState}}
                <hr />
                <audio-button [audioPath]="_audioPath"
                [audioSrc]="_audioCounter" [audioState]="_audioState"
                (emit-status)="updateStatus($event)"
                >
                </audio-button>
            </div>`
})

export class ParentComponent {
  _audioPath: string = "../audio/";
  _audioCounter: number = 1;
  _audioState: string = "Listen";

  nextAudio(): void{ 
    this._audioCounter = this._audioCounter + 1;
    this._audioState = "Listen";
  }

  private updateStatus(status:string){
    this._audioState= status;
  }
}

import { Component, OnInit, Input, Output, EventEmitter } from           '@angular/core';

@Component({
   selector: 'audio-button',
   template: `<button (click)="playSound()"><i class="fa fa-volume-up"></i>
{{audioState}}</button>`,
})

export class AudioButtonComponent {
  @Input() audioPath: string;
  @Input() audioSrc: string;
  @Input() audioState: string;
  @Output('emit-status') emitStatus = new EventEmitter<any>();

  
  playSound(): void {
    //...

    //emit data to parent
    this.emitStatus.emit("playing");
  }
}

3.ViewChild

@Component({
   selector: 'parent-component',
   template: `<div>
            Current state : {{audioBtn.audioState}}
            <hr />
            <audio-button [audioPath]="_audioPath"
            [audioSrc]="_audioCounter" [audioState]="_audioState"
            (emit-status)="updateStatus($event)"
            >
            </audio-button>
        </div>`
})

export class ParentComponent {
    @ViewChild(AudioButtonComponent) audioBtn: AudioButtonComponent;
}

export class AudioButtonComponent {
   //...
  @Input() audioState: string;
  playSound(): void {
     //...
     this.audioState = "playing";
  }
}

Result

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 26, 2017 at 6:00

KarateJB

9612 gold badges10 silver badges22 bronze badges

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

3 Comments

MMM Bacon Over a year ago

Thanks! Appreciate the help. I've used output and EventEmitter before, but wasn't sure if there was a better way to do it.

KarateJB Over a year ago

I think one of the cleanest way on state management is using ngrx/stroe. However in a not-so-complex application, we can use EventEmitter or ViewChild to do it.

MMM Bacon Over a year ago

Sounds good. I was looking into using ViewChild but couldn't reference the child component properly. ViewChild can only be used in ngAfterViewInit() right?

Collectives™ on Stack Overflow

Angular 2 Parent Component Losing Input Binding from Child Component

1 Answer 1

1. (Recommand) Using ngrx/store

2. EventEmitter

3.ViewChild

Result

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1. (Recommand) Using ngrx/store

2. EventEmitter

3.ViewChild

Result

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related