Angular: как использовать настраиваемый плагин EventPlugin только внутри определенного компонента вместо всего ngModule?

У меня есть этот плагин углового события: (скопировано из там)

@Injectable()
    export class UndetectedEventPlugin {
    manager: EventManager;

    supports(eventName: string): boolean {
        return eventName.indexOf('undetected.') === 0;
    }

    addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
        const realEventName = eventName.slice(11);
        return this.manager.getZone().runOutsideAngular(() => this.manager.addEventListener(element, realEventName, handler));
    }
}

Если я добавлю его к провайдеру модуля, он будет отлично работать везде в приложении:

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent,... ],
  bootstrap:    [ AppComponent ],
  providers: [{
      provide: EVENT_MANAGER_PLUGINS,
      useClass: UndetectedEventPlugin,
      multi: true
  }]
})
export class AppModule {}

Но вместо этого, если я добавлю его к определенному поставщику компонентов следующим образом:

@Component({
  selector: 'hello',
  providers: [{
    provide: EVENT_MANAGER_PLUGINS,
    useClass: UndetectedEventPlugin,
    multi: true
  }],
  template: `<button (click) = "test()">BTN 1: (click) = "test()"</button><br><br>
             <button (undetected.click) = "test()">BTN 1: (undetected.click) = "test()"</button>`,
})
export class HelloComponent {
  test() {
    console.info('TEST FUNCTION')
  }
}

Не работает. Кажется, он должен быть глобальным для всего приложения, но я не уверен в этом ..

Знаете ли вы, как ограничить область действия eventPlugin компонентом?

Демо: https://stackblitz.com/edit/angular-jk4gpm?file=src%2Fapp%2Fhello.component.ts