bars.component.ts

import { Component, OnInit } from '@angular/core';
import { EMPTY, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { Bar } from '../../share/models/bar.model';
import { BarsService } from '../../share/services/bars.service';

@Component({
  selector: 'app-bars',
  templateUrl: './bars.component.html',
  styleUrls: ['./bars.component.css']
})
export class BarsComponent implements OnInit {
	public bars: Bar[];

  constructor(private barsService: BarsService) {}

  ngOnInit(): void {
		this.barsService.getAllBars().pipe(
			map((bars: Bar[]) => {
				this.bars = bars;
			}),
			catchError((error: any) => {
				return EMPTY;
			}
			),
		);
	}
}