What imports are needed for utilizing Rx.Observable in Angular 6?

Question

What imports are needed for utilizing Rx.Observable in Angular 6?

My goal is to incorporate the following code snippet:

    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: { lat: -25.363, lng: 131.044 }
});

var source = Rx.Observable.fromEventPattern(
    function (handler) {
        return map.addListener('center_changed', handler);
    },
    function (handler, listener) {
        google.maps.event.removeListener(listener);
    }
);
source.subscribe(function () {
    console.log(map.getCenter());
});

I have attempted various approaches, but I am encountering difficulty in configuring imports in a way that prevents errors related to "Rx.Observable.fromEventPattern".

Could someone please guide me on how to correctly set it up? I am using "rxjs": "~6.2.0" and Angular 6.

Thank you in advance

Hucho

angular typescript rxjs angular6 reactive

Answer 1

Answer №1

If you are utilizing Rxjs 6, make sure to import it in the following way:

import { fromEventPattern} from 'rxjs';

According to the documentation, all Observable creation methods should be imported as shown above in rxjs 6.

Your code should resemble this:

var source = fromEventPattern(
 function (handler) {
        return map.addListener('center_changed', handler);
    },
    function (handler, listener) {
        google.maps.event.removeListener(listener);
    }
  );

You can also import Observable using a similar method.

For more information on migration, check out the documentation here: https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md

Answer 2

If you are utilizing Rxjs 6, make sure to import it in the following way:

import { fromEventPattern} from 'rxjs';

According to the documentation, all Observable creation methods should be imported as shown above in rxjs 6.

Your code should resemble this:

var source = fromEventPattern(
 function (handler) {
        return map.addListener('center_changed', handler);
    },
    function (handler, listener) {
        google.maps.event.removeListener(listener);
    }
  );

You can also import Observable using a similar method.

For more information on migration, check out the documentation here: https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md

Answer 3

Answer №2

Thank you for your assistance. I was able to solve my issue with the following code:

public $getBounds(): Observable<any> {
    let map = this.map;
    return fromEventPattern(
      function (handler) {
        google.maps.event.addListener(map, 'idle', handler);
      },
      function (handler, listener) {
        google.maps.event.removeListener(listener);
      }
    )
  }

I realized that having a caller signature was necessary...

Hucho

Answer 4

Thank you for your assistance. I was able to solve my issue with the following code:

public $getBounds(): Observable<any> {
    let map = this.map;
    return fromEventPattern(
      function (handler) {
        google.maps.event.addListener(map, 'idle', handler);
      },
      function (handler, listener) {
        google.maps.event.removeListener(listener);
      }
    )
  }

I realized that having a caller signature was necessary...

Hucho

What imports are needed for utilizing Rx.Observable in Angular 6?

Answer №1

Answer №2

Similar questions

Problem with timing in token interceptor and authentication guard due to injected service

Cross-Platform: Varied functionalities in disabled input fields (avoiding any direct replication)

Learn how to efficiently transfer row data or an array object to a component within Angular by utilizing the MatDialog feature

Unfinished tags pairing with Angular HTML bindings

When setting a value through the DOM, the input's value bound with ngModel in Angular does not get updated

Learn how to navigate to a different page in Angular 4 using a button click

Angular 7 is taking an unusually long time to load the after login component

Is it possible to execute an npm command within a docker container?

Encountering an error in Angular 8 with the plugin: Unhandled ReferenceError for SystemJS

What is the best way to distinguish elements in the same HTML using Angular Material?

Implementing Custom Font Awesome Icons in Your Angular Project

Unveiling the seamless integration of TypeScript with webpack/metro mainFiles module resolution

Gatsby, in combination with TSC, does not properly transpile the rest operator

Troubleshooting problem with iPhone X responsiveness

What is the best way to separate the user interface module from the logic in Angular2?

What is the correct way to input the 'name' HTML attribute in an Ant Design select element?

Require assistance with Dhtmlx and Wijmo grid context menus, as well as touch events, specifically when utilized on an iPhone's Safari browser

Ensure that the hook component has completed updating before providing the value to the form

Is there a way to extract the HTMLElement[] type from the DOM?

Utilizing the functionalities provided by node.js, I came across an issue and sought out a solution for the error message "TypeError: __WEBPACK_IMPORTED_MODULE_3_fs__.writeFile is not a function"