Angular-RU SDK
  • Getting Started
    • Introduction
  • CDK
    • @angular-ru/cdk/typings
    • @angular-ru/cdk/number
    • @angular-ru/cdk/string
    • @angular-ru/cdk/date
    • @angular-ru/cdk/array
    • @angular-ru/cdk/object
    • @angular-ru/cdk/regexp
    • @angular-ru/cdk/function
    • @angular-ru/cdk/runtime
    • @angular-ru/cdk/ivy
    • @angular-ru/cdk/utils
    • @angular-ru/cdk/class-transformer
    • @angular-ru/cdk/validators
    • @angular-ru/cdk/directives
    • @angular-ru/cdk/decorators
    • @angular-ru/cdk/pipes
    • @angular-ru/cdk/rxjs
    • @angular-ru/cdk/animations
    • @angular-ru/cdk/zone.js
    • @angular-ru/cdk/webworker
    • @angular-ru/cdk/node.js
    • @angular-ru/cdk/flex-layout
    • @angular-ru/cdk/http
    • @angular-ru/cdk/logger
    • @angular-ru/cdk/stream
    • @angular-ru/cdk/tooltip
    • @angular-ru/cdk/virtual-table
    • @angular-ru/cdk/big-decimal
  • NGXS
    • Introduction
    • @StateRepository
    • @DataAction
    • @Computed
    • @Persistence
    • Entity state adapter
    • Unit Testing
    • Lifecycle
    • Immutability
    • Extension API
Powered by GitBook
On this page
  • ngxsDataDoCheck and ngxsDataAfterReset
  • ngxsOnChanges, ngxsOnInit and ngxsAfterBootstrap

Was this helpful?

Edit on GitHub
  1. NGXS

Lifecycle

After creating the state by calling its constructor, NGXS calls the lifecycle hook methods in the following sequence at specific moments:

Hook
Purpose and Timing

ngxsOnChanges()

Called before ngxsOnInit() and whenever state changes.

ngxsOnInit()

Called once, after the first ngxsOnChanges() and before the APP_INITIALIZER token is resolved.

ngxsAfterBootstrap()

Called once, after the root view and all its children have been rendered.

ngxsDataDoCheck()

Called after ngxsAfterBootstrap() and called every time a state is reinitialized after a state reset.

ngxsDataAfterReset()

Called every time after reset()

ngxsDataDoCheck and ngxsDataAfterReset

@StateRepository()
@State<Customer[]>({
    name: 'customers',
    defaults: []
})
@Injectable()
class CustomersStates extends NgxsDataRepository<Customer[]> implements NgxsDataDoCheck, NgxsDataAfterReset {
    private subscription: Subscription;

    constructor(private customer: CustomerService) {
        super();
    }

    /**
     * @description:
     * This method guarantees that it will be called after the application is rendered
     * and all services of the Angular are loaded, so you can subscribe to the necessary
     * data streams (any observables) in this method and unsubscribe later in the method `ngxsDataAfterReset`
     */
    public ngxsDataDoCheck(): void {
        console.log(this.isInitialised); // true
        console.log(this.isBootstrapped); // true
        this.subscription = this.customer.events.subscribe((e) => console.log(e));
    }

    public ngxsDataAfterReset(): void {
        this.subscription?.unsubscribe();
    }
}

ngxsOnChanges, ngxsOnInit and ngxsAfterBootstrap

@StateRepository()
@State({
    name: 'counter',
    defaults: 0
})
@Injectable()
class CounterState extends NgxsDataRepository<number> implements NgxsOnChanges, NgxsOnInit, NgxsAfterBootstrap {
    public ngxsOnChanges(): void {
        super.ngxsOnChanges(); // be sure to call the parent method
        // your logic
    }

    public ngxsOnInit(): void {
        super.ngxsOnInit(); // be sure to call the parent method
        // your logic
    }

    public ngxsAfterBootstrap(): void {
        super.ngxsAfterBootstrap(); // be sure to call the parent method
        // your logic
    }
}
PreviousUnit TestingNextImmutability

Last updated 3 years ago

Was this helpful?