Cacher is the code snippet organizer for pro developers

import { Component } from '@angular/core';
import { DataService } from '../../services/data.service'

@Component({
    selector: 'sandbox',
    template: `
            <h1>Hello World</h1>
            <ul class="list-group">
                <li *ngFor="let element of data" class="list-group-item">
                    {{ element }}
                </li>
            </ul>
            `
})

export class SandboxComponent {
  
    data:any[] = [];

    constructor(public dataService:DataService) {
        this.dataService.getData().subscribe(data => {
            this.data.push(data);
        });
    }

}

import { Injectable } from '@angular/core'
import { Observable } from 'rxjs';

@Injectable()
export class DataService {
    
    data: Observable<any>;

    constructor(){
    }

    getData(){
        this.data = new Observable(observer => {
            setTimeout(()=>{
                observer.next(1);
            }, 1000);

            setTimeout(()=>{
                observer.next(2);
            }, 2000);

            setTimeout(()=>{
                observer.next(3);
            }, 3000);

            setTimeout(()=>{
                observer.next('hello');
            }, 4000);

            setTimeout(()=>{
                observer.next(5);
            }, 5000);

            setTimeout(()=>{
                observer.complete();
            }, 6000);
        });

        return this.data;
    }
}