The basic angular app example to get started with the TanStack angular-store.
app.component.ts
import { Component } from '@angular/core'
import { DisplayComponent } from './display.component'
import { IncrementComponent } from './increment.component'
@Component({
selector: 'app-root',
imports: [DisplayComponent, IncrementComponent],
template: `
<h1>How many of your friends like cats or dogs?</h1>
<p>
Press one of the buttons to add a counter of how many of your friends like
cats or dogs
</p>
<app-increment animal="dogs" />
<app-display animal="dogs" />
<app-increment animal="cats" />
<app-display animal="cats" />
`,
})
export class AppComponent {}
import { Component } from '@angular/core'
import { DisplayComponent } from './display.component'
import { IncrementComponent } from './increment.component'
@Component({
selector: 'app-root',
imports: [DisplayComponent, IncrementComponent],
template: `
<h1>How many of your friends like cats or dogs?</h1>
<p>
Press one of the buttons to add a counter of how many of your friends like
cats or dogs
</p>
<app-increment animal="dogs" />
<app-display animal="dogs" />
<app-increment animal="cats" />
<app-display animal="cats" />
`,
})
export class AppComponent {}
store.ts
import { Store } from '@tanstack/angular-store';
// You can instantiate the store outside of Angular components too!
export const store = new Store({
dogs: 0,
cats: 0,
});
export function updateState(animal: 'dogs' | 'cats') {
store.setState((state) => {
return {
...state,
[animal]: state[animal] + 1,
};
});
}
import { Store } from '@tanstack/angular-store';
// You can instantiate the store outside of Angular components too!
export const store = new Store({
dogs: 0,
cats: 0,
});
export function updateState(animal: 'dogs' | 'cats') {
store.setState((state) => {
return {
...state,
[animal]: state[animal] + 1,
};
});
}
display.component.ts
import { injectStore } from '@tanstack/angular-store';
import { store } from './store';
@Component({
selector: 'app-display',
template: `
<!-- This will only re-render when animal changes. If an unrelated store property changes, it won't re-render -->
<div>{{ animal() }}: {{ count() }}</div>
`,
standalone: true
})
export class Display {
animal = input.required<string>();
count = injectStore(store, (state) => state[this.animal()]);
}
import { injectStore } from '@tanstack/angular-store';
import { store } from './store';
@Component({
selector: 'app-display',
template: `
<!-- This will only re-render when animal changes. If an unrelated store property changes, it won't re-render -->
<div>{{ animal() }}: {{ count() }}</div>
`,
standalone: true
})
export class Display {
animal = input.required<string>();
count = injectStore(store, (state) => state[this.animal()]);
}
increment.component.ts
import { injectStore } from '@tanstack/angular-store';
import { store, updateState } from './store';
@Component({
selector: 'app-increment',
template: `
<button (click)="updateState(animal())">My Friend Likes {{ animal() }}</button>
`,
standalone: true
})
export class Increment {
animal = input.required<string>();
updateState = updateState;
}
import { injectStore } from '@tanstack/angular-store';
import { store, updateState } from './store';
@Component({
selector: 'app-increment',
template: `
<button (click)="updateState(animal())">My Friend Likes {{ animal() }}</button>
`,
standalone: true
})
export class Increment {
animal = input.required<string>();
updateState = updateState;
}
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.