Nested Child UI component is not working on keypress event in Parent component in Angular

I am trying to add shortcut to open nested child UI Tab component through keyboard keypress event. But, to load Child nested Tab component, first parent should be loaded.
Below is UI tree:

  • |–Parent Component
  • |—-Child Component — It contains 4 tabs.
  • |——Child Tab
    Component — First Tab.

Keypress event is written inside Parent Component,

@HostListener('window:keyup', ['$event'])
keyEvent(event: KeyboardEvent) {
    if(event.code === "KeyR") {
        //here storing event details in service
        MyService.store({
            key: HANDLE_KEY_EVENT,
            data: event
        })
    }
}

And in Child component, Child nested Tab should get open on the basis of subscribing the stored event details. Below is code snippet:

private readonly subscriber: Subscription[] = [];

    ngOnInit(): void {
        this.subscriber.push(
            MyService.observe(HANDLE_KEY_EVENT).subscribe((event)=>{
                if(event.code){
                    openTab()
                }
            })
        )
    } 

But openTab() function is not calling with above code snippet i.e. written inside subscribe.
In below code snippet openTab() function is calling, if it written directly inside ngOnInit() i.e. without subscribe:

ngOnInit(): void {
    openTab()
}

My requirement is to write openTab() function issue inside subscribe.

So, please help me in fixing above issue.

  • I think you need to post your methods store and observe of MyService.

    – 

  • In your function “store” of the service you make “something” (I imagine a “observe.next(..)”)?

    – 

Leave a Comment