How to use the devextreme/events.on function in devextreme

ngAfterViewInit() {
        let element = this.element.nativeElement;

        extractTemplate(this, this.element, this.renderer, this.document);

        element.classList.add('dx-visibility-change-handler');
        events.on(element, 'dxshown', function() {
            this.shownEventFired = true;
        }.bind(this));

        this.template.render({
            container: document.querySelector('dx-test-widget')
        });
    }
}

fixture.ngZone.runOutsideAngular(() => {
            events.on(element, 'click', () => {
                expect(NgZone.isInAngularZone()).toBe(true);
                counter++;
            });
        });

ngAfterViewInit() {
    events.on(this.elementRef.nativeElement, 'dxclick', (e) => {
      this.openMenu.next(e);
    });
  }

getElementRef = ref => {
    if (this.elementRef) {
      events.off(this.elementRef, 'dxclick');
    }

    this.elementRef = ref;
    events.on(this.elementRef, 'dxclick', e => {
      this.props.openMenu(e);
    });
  };