Angular http simulation

i am trying to simulate http request call for my ag grid rowData.

this is data service class

@Injectable({
    providedIn: 'root',
})

export class KoeficijentiZaVodneLinijeData {

    getData(): Observable<KoeficijentiZaVodneLinijeModel[]>{
        return new Observable<KoeficijentiZaVodneLinijeModel[]>((observer) => {
            of(new KoeficijentiZaVodneLinijeModel(0.00, 0.25)),
            of(new KoeficijentiZaVodneLinijeModel(0.25, 1.0)),
            of(new KoeficijentiZaVodneLinijeModel(0.50, 0.5)),
            of(new KoeficijentiZaVodneLinijeModel(0.75, 1.0)),
            of(new KoeficijentiZaVodneLinijeModel(1.00, 0.5)),
            of(new KoeficijentiZaVodneLinijeModel(1.25, 1.0)),
            of(new KoeficijentiZaVodneLinijeModel(1.50, 0.5)),
            of(new KoeficijentiZaVodneLinijeModel(1.75, 1.0)),
            of(new KoeficijentiZaVodneLinijeModel(2.00, 1.25)),
            of(new KoeficijentiZaVodneLinijeModel(3.00, 4.00)),
            of(new KoeficijentiZaVodneLinijeModel(4.00, 2.00)),
            of(new KoeficijentiZaVodneLinijeModel(5.00, 4.00)),
            of(new KoeficijentiZaVodneLinijeModel(6.00, 2.00)),
            of(new KoeficijentiZaVodneLinijeModel(7.00, 4.00)),
            of(new KoeficijentiZaVodneLinijeModel(8.00, 1.50)),
            of(new KoeficijentiZaVodneLinijeModel(4.50, 2.00)),
            of(new KoeficijentiZaVodneLinijeModel(9.00, 0.75)),
            of(new KoeficijentiZaVodneLinijeModel(9.25, 1.00)),
            of(new KoeficijentiZaVodneLinijeModel(9.50, 0.50)),
            of(new KoeficijentiZaVodneLinijeModel(9.75, 1.00)),
            of(new KoeficijentiZaVodneLinijeModel(10.00, 0.25))
        });
    }
}

this is where am i calling it

export class KoeficijentiZaVodneLinijeComponent implements OnInit {

  columnDefs: ColDef[]=[
    {field: 'r'},
    {field: 'y'},
    {field: 'x'},
    {field: 'xixi'},
    {field: 'koef'},
    {field: 'proizvod'},
    {field: 'deltaY'},
    {field: 'delta4y'},
    {field: 'proizvodSum'},
  ]

  rowData : Observable<KoeficijentiZaVodneLinijeModel[]>;
  constructor(private koeficijentiDataService: KoeficijentiZaVodneLinijeData) { }

  ngOnInit(): void {
    this.rowData = this.koeficijentiDataService.getData();
     
  }

}

i was following ag grid tutorial and at some point they switched the type of rowData to observable. My app will work without http request and all the data will be provided by me. i am not sure if this is the right way so please can you help

>Solution :

lets dive into the patterns you are using:

the first one is new Observable(observer => {/* observable logic */}). this "logic" will be executed just at the moment of subscription. so observer.next(10) will emit event 10. observer.complete() will complete the source and hopefully free the resources. with his observable constructor you can create your own observables for example:

new Observable(observer => {
  observer.next(10);
  setTimeout(() => observer.next(20), 1000);
  setTimeout(() => observer.next(30), 2000);
});

this observable will emit 10 at the moment of subscription, then after a second it will emit 20 and after another second – 30; but in vast majority of cases new Observable(...) is bad practice, because there is already an operator that does that.

then you are using of(data) – it creates an observables that just emits data. so the correct usage would be of([item1, item2, item3, ...]).

but I would improve that thing a bit (considering that there will be a delay, when you switch to a real data. final implementation will look like this:

    getData(): Observable<KoeficijentiZaVodneLinijeModel[]>{
        return of([
            new KoeficijentiZaVodneLinijeModel(0.00, 0.25),
            new Koef....
        ]).pipe(delay(800)); // lets assume your mock API responds in 800 msec
    }