Component State Manager

00-state-manager.ts

import {ChangeDetectorRef} from "@angular/core";

export class StateManager<T> {

    private _state: T;
    get state() {
        return this._state;
    }

    set state(value: T) {
        this._state = value;
        Object.freeze(this._state);
        this.changes.markForCheck();
    }

    constructor(private changes: ChangeDetectorRef, private initialState: T) {
        this.setState(initialState);
    }

    setState(newState: T) {
        this.state = {
            ...newState
        };
    }

    patchState(partialState: Partial<T>) {
        this.state = {
            ...this.state,
            ...partialState
        };
    }
}

01-my-component.ts

import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from "@angular/core";
import {StateManager} from "./00-state-manager";

export interface MyState {
    key: string
}

@Component({
    selector: 'my-component',
    template: '<div>{{this.stateManager.state.key}}</div>',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
    stateManager: StateManager<MyState>;

    constructor(changes: ChangeDetectorRef) {
        this.stateManager = new StateManager<MyState>(changes, {key: ''});
    }

    ngOnInit() {
        setTimeout(() => {
            this.stateManager.setState({
                key: 'change!'
            })
        }, 3000);
    }
}