ng_boost_core_view_state_management_quickstart_angular.ts

1import { Component, OnInit } from '@angular/core';
2import { BoostState, ViewState } from '@ng-boost/core';
3import { Observable, of } from 'rxjs';
4
5interface User {
6  id: number;
7  name: string;
8}
9
10@Component({
11  selector: 'app-root',
12  template: `
13    <div *ngIf="userState$ | async as state">
14      <div *ngIf="state.isLoading">Loading...</div>
15      <div *ngIf="state.data as user">
16        <h1>Welcome, {{ user.name }}</h1>
17      </div>
18      <div *ngIf="state.error">
19        Error loading user.
20      </div>
21    </div>
22  `
23})
24export class AppComponent implements OnInit {
25  // BoostState provides a wrapper for handling asynchronous view data states
26  userState$: Observable<ViewState<User>>;
27
28  ngOnInit() {
29    const userMock$: Observable<User> = of({ id: 1, name: 'John Doe' });
30
31    // Using BoostState.pipe to automatically handle loading and data states
32    this.userState$ = userMock$.pipe(
33      BoostState.pipe()
34    );
35  }
36}