angular_boost_kit_component_with_state_management_and_change_detection.ts

1import { Component, OnInit } from '@angular/core';
2import { BoostComponent, BoostState } from 'angular-boost-kit';
3
4interface AppState {
5  title: string;
6  count: number;
7}
8
9@Component({
10  selector: 'app-root',
11  template: `
12    <div *ifBoost="state$ | async as state">
13      <h1>{{ state.title }}</h1>
14      <p>Current Count: {{ state.count }}</p>
15      <button (click)="increment()">Increment</button>
16    </div>
17  `,
18  styleUrls: ['./app.component.css']
19})
20export class AppComponent extends BoostComponent<AppState> implements OnInit {
21  
22  constructor() {
23    // Initialize the state with default values
24    super({
25      title: 'Welcome to Angular Boost Kit',
26      count: 0
27    });
28  }
29
30  ngOnInit(): void {
31    console.log('Boost Component Initialized');
32  }
33
34  increment(): void {
35    // Update state using the internal Boost State manager
36    this.setState((state) => ({
37      ...state,
38      count: state.count + 1
39    }));
40  }
41}