v28
Addons
Guides
Angular
Install
1
npm install overmind overmind-angular
Copied!
Configure
Let us have a look at how you configure your app:
overmind/index.ts
app.module.ts
components/app.component.ts
main.ts
1
import { IConfig } from 'overmind'
2
import { Injectable } from '@angular/core'
3
import { OvermindService } from 'overmind-angular'
4
import { state } from './state'
5
import * as actions from './actions'
6
7
export const config = { state, actions }
8
9
declare module 'overmind' {
10
interface Config extends IConfig<typeof config> {}
11
}
12
13
@Injectable({
14
providedIn: 'root'
15
})
16
export class Store extends OvermindService<typeof config> {}
Copied!
1
import { NgModule } from '@angular/core';
2
import { BrowserModule } from '@angular/platform-browser';
3
import { createOvermind } from 'overmind';
4
import { OvermindModule, OvermindService, OVERMIND_INSTANCE } from 'overmind-angular'
5
6
import { config, Store } from './overmind'
7
import { AppComponent } from './app.component';
8
9
@NgModule({
10
imports: [ BrowserModule, OvermindModule ],
11
declarations: [ AppComponent ],
12
bootstrap: [ AppComponent ],
13
providers: [
14
{ provide: OVERMIND_INSTANCE, useFactory: () => createOvermind(config) },
15
{ provide: Store, useExisting: OvermindService }
16
]
17
})
18
export class AppModule { }
19
Copied!
1
import { Component, ChangeDetectionStrategy } from '@angular/core'
2
import { Store } from '../overmind'
3
4
@Component({
5
selector: 'app-root',
6
template: `
7
<div *track>
8
<h1 (click)="actions.changeTitle()">{{ state.title }}</h1>
9
</div>
10
`,
11
changeDetection: ChangeDetectionStrategy.OnPush
12
})
13
export class AppComponent {
14
state = this.store.select()
15
actions = this.store.actions
16
constructor(private store: Store) {}
17
}
Copied!
1
import { enableProdMode } from "@angular/core";
2
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
3
4
import { AppModule } from "./app/app.module";
5
import { environment } from "./environments/environment";
6
7
if (environment.production) {
8
enableProdMode();
9
}
10
11
platformBrowserDynamic()
12
.bootstrapModule(AppModule, {
13
// We do not need zones, we rather use the tracking
14
// directive, which gives us a pretty signifcant performance
15
// boost. Note that 3rd party libraries might need ngZone,
16
// in which case you can not set it to "noop"
17
ngZone: "noop"
18
})
19
.catch(err => console.log(err));
20
Copied!
The service is responsible for exposing the configuration of your application. The *track directive is what does the actual tracking. Just put it at the top of your template and whatever state you access will be optimally tracked. You can also select a namespace from your state to expose to the component:
components/app.component.ts
1
import { Component, ChangeDetectionStrategy } from '@angular/core'
2
import { Store } from '../overmind'
3
4
@Component({
5
selector: 'app-root',
6
template: `
7
<div *track>
8
<h1 (click)="actions.changeAdminTitle()">{{ state.adminTitle }}</h1>
9
</div>
10
`,
11
changeDetection: ChangeDetectionStrategy.OnPush
12
})
13
export class AppComponent {
14
state = this.store.select(state => state.admin)
15
actions = this.store.actions.admin
16
constructor(private store: Store) {}
17
},
Copied!
You can now access the admin state and actions directly with state and actions.
Polyfill environment
Angular does not inject the environment, so in your polyfill.ts file you have to add the following:
1
import { environment } from './environments/environment';
2
3
(window as any).process = {
4
env: {
5
NODE_ENV: environment.production ? 'production' : 'development'
6
},
7
};
Copied!
NgZone
The Overmind *track directive knows when your components should update, and so is much more efficient at change detection than Angular's default NgZone. In order to take advantage of the efficiency provided by the *track directive, you must set ngZone to "noop". Note that other 3rd party libraries may not support this. If for any reason you can't set ngZone to "noop", then the *track directive is redundant, and you can safely exclude it from your templates.
Rendering
When you connect Overmind to your component and expose state you do not have to think about how much state you expose. The exact state that is being accessed in the template is the state that will be tracked. That means you can expose all the state of the application to all your components without worrying about performance.
Passing state as input
When you pass state objects or arrays as input to a child component that state will by default be tracked on the component passing it along, which you can also see in the devtools. By just adding the *tracker directive to the child template, the tracking will be handed over:
components/todo.component.ts
components/todos.component.ts
1
import { Component, Input, ChangeDetectionStrategy } from '@angular/core'
2
import { Todo } from '../overmind/state'
3
4
@Component({
5
selector: 'todos-todo',
6
template: `
7
<li *track>{{ todo.title }}</li>
8
`,
9
changeDetection: ChangeDetectionStrategy.OnPush,
10
})
11
export class TodoComponent {
12
@Input() todo: Todo
13
}
Copied!
1
import { Component, ChangeDetectionStrategy } from '@angular/core'
2
import { Store } from '../overmind'
3
4
@Component({
5
selector: 'todos-list',
6
template: `
7
<ul *track>
8
<todos-todo *ngFor="let todo of state.todos;" [todo]="todo"></todos-todo>
9
</ul>
10
`,
11
changeDetection: ChangeDetectionStrategy.OnPush
12
})
13
export class ListComponent {
14
state = this.store.select()
15
constructor(private store: Store) {}
16
}
Copied!
What is important to understand here is that Overmind is not immutable. That means if you would change any property on any todo, only the component actually looking at the todo will render. The list is untouched.
Reactions
To run effects in components based on changes to state you use the reaction function in the lifecycle hooks of Angular.
components/app.component.ts
1
import { Component } from '@angular/core'
2
import { Store } from '../overmind'
3
4
@Component({
5
selector: 'app-root',
6
templateUrl: './app.component.html'
7
})
8
export class AppComponent {
9
disposeReaction: () => void
10
constructor (private store: Store) {}
11
ngOnInit() {
12
this.disposeReaction = this.store.reaction(
13
({ currentPage }) => currentPage,
14
() => document.querySelector('#app').scrollTop = 0
15
)
16
}
17
ngOnDestroy() {
18
this.disposeReaction()
19
}
20
}
Copied!
Last modified 1yr ago