STYLE GUIDE
Last updated
export class Todo {
constructor(
readonly title: string,
readonly isCompleted = false
) {}
}
@State<Todo[]>({
name: 'todos',
defaults: []
})
@Injectable()
class TodosState {
@Selector()
static getTodos(state: Todo[]) {
return state;
}
@Action(AddTodo)
add(ctx: StateContext<Todo[]>, action: AddTodo): void {
// Avoid new Todo(title)
ctx.setState((state: Todo[]) => state.concat(new Todo(action.title)));
}
}
@Component({
selector: 'app',
template: `
@for (todo of todos(); track todo) {
{{ todo.isCompleted }}
}
`
})
class AppComponent {
todos = inject(Store).selectSignal(TodosState.getTodos);
}export interface TodoModel {
title: string;
isCompleted: boolean;
}
@State<TodoModel[]>({
name: 'todos',
defaults: []
})
@Injectable()
class TodosState {
@Selector()
static getTodos(state: Todo[]) {
return state;
}
@Action(AddTodo)
add(ctx: StateContext<TodoModel[]>, action: AddTodo): void {
ctx.setState((state: TodoModel[]) =>
state.concat({ title: action.title, isCompleted: false })
);
}
}
@Component({
selector: 'app',
template: `
@for (todo of todos(); track todo) {
{{ todo.isCompleted }}
}
`
})
class AppComponent {
todos = inject(Store).selectSignal(TodosState.getTodos);
}export interface RowStateModel {
id: number;
}
export interface GridStateModel {
id: number;
rows: Map<number, RowState>;
}
export interface GridCollectionStateModel {
grids: Map<number, GridState>;
}
@State<RowStateModel>({
name: 'row',
defaults: {
id: -1
}
})
@Injectable()
export class RowState {}
@State<GridStateModel>({
name: 'grid',
defaults: {
id: -1,
rows: new Map<number, RowState>()
}
})
@Injectable()
export class GridState {}
@State<GridCollectionStateModel>({
name: 'grid-collection',
defaults: {
grids: new Map<number, GridState>()
}
})
@Injectable()
export class GridCollectionState {}export interface RowStateModel {
id: number;
}
export interface GridStateModel {
id: number;
rows: {
[id: number]: RowStateModel;
};
}
export interface GridCollectionStateModel {
grids: {
[id: number]: GridStateModel;
};
}
@State<RowStateModel>({
name: 'row',
defaults: {
id: -1
}
})
@Injectable()
export class RowState {}
@State<GridStateModel>({
name: 'grid',
defaults: {
id: -1,
rows: {}
}
})
@Injectable()
export class GridState {}
@State<GridCollectionStateModel>({
name: 'grid-collection',
defaults: {
grids: {}
}
})
@Injectable()
export class GridCollectionState {}