Access viewchild from another component

https://stackoverflow.com/questions/50935728/access-viewchild-from-another-component

=================

 

I have two components, one videoComponent and videoControlsComponent. The video component contains a <video> element and the video component has some buttons to manipulate the videoComponent <video> element.

<video controls="{{ controls }}" [src]="streamUrl" #myVideo>
    Your browser does not support the video tag or the file format of this video.
</video>

videoComponent:

@ViewChild('myVideo') myVideo: any;
public playVideo() {
    this.myVideo.nativeElement.play();
}

videoControlComponent:

constructor(private videoComponent: VideoComponent) { }
public videoPlay() {
    this.videoComponent.playVideo()
}

The problem is that when I click the button I get the following error: Cannot read property 'nativeElement' of undefined at VideoControlsComponent.

But when I have exactly the same code but create the button not in the videoControlsComponent but videoComponent everything works fine.

Can you help me out please?

javascript angular

shareedit

asked Jun 19 '18 at 19:34

Lil jonson

111

add a comment

1 Answer

activeoldestvotes

2

you need to use @ViewChild like you did with "myVideo" with videoComponent as well so like this @ViewChild(VideoComponent) videoComponent: VideoComponent

that's assuming videoComponent is a child of videoControls

if they are siblings you can use @Output to trigger an event in the parent, the parent would then change a boolean that is set to an input in videoControls and then set up ngOnChanges on videoControls to detect when that input changes

or you can set up a service to communicate between them. That might be the easiest option if they are not a parent-child relationship

Example of a Service to communicate between components:

@Injectable()
export class MyService {
    private myFunctionCallSource = new Subject();

    myFunctionCalled$ = this.myFunctionCallSource.asObservable();

    callMyFunction(){
        this.myFunctionCallSource.next()
    }
}

in videoComponent

this.myService.myFunctionCalled$.subscribe(
    res => this.myVideo.nativeElement.play(),
    err => console.log('MyService error', err)
);

in videoControlsComponent

this.myService.callMyFucnction()