Stateful Component

00-stateful-component.ts

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

export class StatefulComponent<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 {StatefulComponent} from "./00-stateful-component";

export interface MyState {
    key: string
}

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

    constructor(changes: ChangeDetectorRef) {
        super(changes, {key: ''});
    }

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