observable anatomy

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

@Component({
  selector: 'app-one',
  template: `<ol>
               <li *ngFor="let planet of planets$ | async"> {{ planet }} </li>
             </ol>
`,
  styleUrls: ['./one.component.css']
})
export class OneComponent implements OnInit {

  constructor() { }

  planets$: Observable<any>;

  ngOnInit() {

    this.planets$ = new Observable(o =>{
     
      o.next("Mercury");
      o.next("Venus");
      o.next("Earth");
      o.next("Mars");

  });

  }
    
}