observable sample

app.component.html

<h1>{{ title }}</h1>

<button (click)="subscribe()">
  Subscribe
</button>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable, range } from 'rxjs';
import {map, filter } from 'rxjs/operators'
import { ObserveOnMessage } from 'rxjs/internal/operators/observeOn';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Observables';

  source$: Observable<number> = range(0,10);
  mapfil$;

  ngOnInit() {
    console.log("on init");
    this.mapfil$ = this.source$.pipe(
      map(x => x * x),
      filter(x => x % 2 === 0)
    );
    console.log(typeof(this.mapfil$));
  }
  subscribe() {
    this.mapfil$.subscribe(x => console.log(x));
  }
}