title: Getting [Object Object] while trying to fetch value
body: <p>Trying to fetch the value of my accelerator but it says [object object].</p>
  <p>Here is the code which is fetching the value and showing on the html page. I want to get the current value when a button is clicked.</p>
  <p>Here is my <code>home.ts</code> code:</p>
  <pre><code>export class HomePage implements OnInit {
  
    private devicemotion0: BehaviorSubject&lt;string[]&gt; = new BehaviorSubject(['-']);
    devicemotion0$: Observable&lt;string[]&gt; = this.devicemotion0.asObservable();
  
    providers: Provider[] = [
      {
        index: 0,
        subtitle: 'ionic native',
        title: 'device’s accelerometer ',
        availability: Availability.unchecked,
        value: this.devicemotion0$
      },
  
    constructor(
      private deviceMotion: DeviceMotion,
      private deviceOrientation: DeviceOrientation,
      private platform: Platform,
      private eventManager: EventManager) { }
  
    ngOnInit() {
      this.platform.ready().then(() =&gt; {
        this.checkAvailibility();
        this.addEventListener();
      });
    }
  
    checkAvailibility() {
      let nav: any;
      nav = window.navigator;
  
      if (nav &amp;&amp; nav.accelerometer) { this.providers[1].availability = Availability.available; } else {
        this.providers[1].availability = Availability.notAvailable;
      }
  
    private addEventListener() {
      let nav: any;
      nav = window.navigator;
  
      /** LinearAccelerationSensor: Web API */
      if ('LinearAccelerationSensor' in window) {
        const accelerometer = new LinearAccelerationSensor();
        accelerometer.addEventListener('reading', e =&gt; { this.accelerationHandler(accelerometer, this.devicemotion0); });
        accelerometer.start();
      }
  
    private accelerationHandler(acceleration, subject) {
      let info;
      const xyz = '[X, Y, Z]';
      info = xyz.replace('X', acceleration.x &amp;&amp; acceleration.x.toFixed(3));
      info = info.replace('Y', acceleration.y &amp;&amp; acceleration.y.toFixed(3));
      info = info.replace('Z', acceleration.z &amp;&amp; acceleration.z.toFixed(3));
      subject.next(info);
    }
  
       onClick(){
       alert(this.providers[0].value); // showing [object object]
       alert(this.providers[0].title); // showing device’s accelerometer
  }
  </code></pre>
  <p><code>home.html</code></p>
  <pre><code>&lt;ion-button (click)=&quot;onClick()&quot; expand=&quot;block&quot; fill=&quot;clear&quot; shape=&quot;round&quot;&gt;
      Show data
    &lt;/ion-button&gt;
  
    &lt;ion-card *ngFor=&quot;let provider of providers&quot;&gt;
      &lt;ion-card-header&gt;
        &lt;ion-card-subtitle&gt; {{ provider.subtitle }} &lt;/ion-card-subtitle&gt;
        &lt;ion-card-title&gt; {{ provider.title }} &lt;/ion-card-title&gt;
  
  ...// some code
  
              &lt;ng-container *ngIf=&quot;provider.value | async as value&quot;&gt;
                &lt;p&gt;{{ value }}&lt;/p&gt;
              &lt;/ng-container&gt;
  </code></pre>
  <p>Html page screenshot:</p>
  <p><a href="https://i.stack.imgur.com/QqkNm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QqkNm.jpg" alt="enter image description here" /></a></p>
  <p>How do I get this <strong>value</strong> inside <code>onClick()</code> function?</p>