RXJS in Angular 6 returns only { "_isScalar": false }

Question

I'm trying RXJS for the first time. Although I'm following the steps I found in a tutorial literally my component isn't getting the sate in the Store but instead it's getting the object { "_isScalar": false }.

Here the code:

Component HTML:

<div>
    {{ selectedProcess }}
</div>

Component TS:

import { Component, OnInit, Input } from '@angular/core';

import { Store, Select } from '@ngxs/store';
import { Observable } from 'rxjs';
import { Process } from '../../../../models/process';
import { ProcessState } from '../../../../state/process.state';

@Component({
  selector: 'app-process',
  templateUrl: './process.component.html',
  styleUrls: ['./process.component.scss']
})
export class OneProcessComponent implements OnInit {
  @Select(ProcessState.getProcess) selectedProcess: Observable<Process>;

  constructor(private store: Store) { }

  ngOnInit() {}
}

PS: I checked the state file and realized the state is updating correctly. Still the receiving component can't get the data but getting the above-mentioned object instead.

Answer 1

Its observable. You cannot just print it like {{selectedProcess}}. You have to use async pipe which subscribes to observable and prints out the result:

{{selectedProcess | async}}