Angular 2 - How to listen to event without a template?

Jefftopia

The Problem

Normally, in Angular 2, one would listen to an event via the following syntax:

<my-elem (customEvent)="customEventProcessor"></my-elem>

But when I use a router, that host - <my-elem> - does not exist in any template. Instead, there's a <router-outlet>, and my component is loaded upon navigation. Thus, the crux of my problem is, How can I force my host to listen to my custom event without relying on a template?

Optional Details

Suppose I have some element list-view, which is a child of my root component. list-view listens for a custom event via the normal syntax:

<list-view (customEvent)="customEventProcessor()"></list-view>

Just for completeness, the list-view component that emits the event also has a predictable structure:

<button (click)="onDetailsClick(propertyOfInterest)">Click here</button>

The list-view sends the event up to the parent via observation.

class ListView {

    ...

        public onDetailsClick(property: string): void {

            this.customEvent.next({ value: property });
    
        }

}

and that event triggers the customEventProcessor() function. So far so good. However, when I use a router to control whether list-view is present, I cannot (to my knowledge) insert a command to monitor some event.

I am not sure what the best approach is to handle this case.

alexpods

This problem isn't resolved yet (see this github issue). Here is one of the possible solutions at this moment (see this plunk):

@Component({
  selector: 'my-app',
  directives: [RouterOutlet, RouterLink],
  template: `
    <h1>{{ message }}</h1>
    <a [router-link]="['./MyElem1']">MyElem1</a>
    <a [router-link]="['./MyElem2']">MyElem2</a>
    <router-outlet></router-outlet>
  `
})
@RouteConfig([
  { path: '/', redirectTo: '/my-elem1' },
  { path: '/my-elem1', name: 'MyElem1', component: MyElem1 },
  { path: '/my-elem2', name: 'MyElem2', component: MyElem2 },
])
export class App {
  message: string = 'Click on the button';

  @ViewChild(MyElem1) myElem1: MyElem1;
  @ViewChild(MyElem2) myElem2: MyElem2;

  constructor(router: Router) {
    let subs = null;
    router.subscribe(() => {
      if (subs) { subs.unsubscribe(); subs = null; }

      if (this.myElem1) {
        subs = this.myElem1.customEvent1.subscribe(m=>this.processCustomEvent(m));
      }
      if (this.myElem2) {
        subs = this.myElem2.customEvent2.subscribe(m=>this.processCustomEvent(m));
      }
    });
  }

  processCustomEvent(message) { this.message = message }
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Angular 2 listen to custom event inside component

how to listen of angular template driven form changes

How to listen to an external js event on angular app?

How to listen the close event of a modal in ngBootstrap and Angular?

Angular: How to listen on window.onload event?

How to listen for mousemove event on Document object in Angular

How can I listen to one event from two template handlers?

VueJS how to listen to event from method not from template

Angular2 How to trigger (click) event without clicking

Angular2 Click Event Not Updating Template

How to listen sortChange(event) on Angular for ag-Grid?

How to listen for a click-and-hold in Angular 2?

How to listen to a *unnamed* Event?

How can I bind click event to an angular2 template interpolation?

How to get the last element of an array in Angular2 template WITHOUT LOOPING EVERYTHING?

Listen for keydown event without browser window active

How to listen to a DialogFragment dismiss event

How to listen to inAppBrowser closed event

How to listen event with Python threading

Angular2 write on console from template click event

workbox-webpack-plugin & Angular. How to listen to broadcastUpdate event in Angular

How to listen to the event(commit event) in Hyperledger Fabric?

Listen for template driven form changes in Angular 10

angular 8: Listen to an Event on unreachable element

How to listen to angular 2 events MANUALLY on a dependency injected instance?

how can I listen to changes in code in angular 2?

Angular2 use `listen` method from `Renderer` class to bind keyboard event like `keydown`

Angular - how to add class when receiving event in template

Angular 2 click event callback without triggering change detection