// components/app.component.ts
import { Component } from '@angular/core';
import { Store } from '../overmind'
selector: 'app-component',
<div class="container" *track>
<a href="/users">Users</a>
<h1 *ngIf="state.currentPage === 'home'">Hello world!</h1>
<users-list *ngIf="state.currentPage === 'users'"></users-list>
export class AppComponent {
state = this.store.select()
constructor(private store: Store) {}
// components/users-list.component.ts
import { Component } from '@angular/core';
import { Store } from '../overmind'
<div class="content" *track>
<h4 *ngIf="state.isLoadingUsers">Loading users...</h4>
<ul *ngIf="!state.isLoadingUsers">
<li *ngFor="let user of state.users;trackby: trackById">
<a href={"/users/" + user.id}>{{user.name}}</a>
<user-modal *ngIf="state.isLoadingUserDetails || state.userModal"></user-modal>
state = this.store.select()
constructor(private store: Store) {}
// components/user-modal.component.ts
import { Component } from '@angular/core';
import { Store } from '../overmind'
<a href="/users" class="backdrop">
<h4 *ngIf="state.isLoadingUserDetails">Loading user details...</h4>
<div *ngIf="!state.isLoadingUserDetails">
<h4>{{state.modalUser.name}}</h4>
<h6>{{state.modalUser.details.email}}</h6>
<a [href]="'/users/' + state.modalUser.id + '?tab=0'">bio</a>
<a [href]="'/users/' + state.modalUser.id + '?tab=1'">address</a>
*ngIf="state.currentUserModalTabIndex === 0"
{{modalUser.details.bio}}
*ngIf="state.currentUserModalTabIndex === 1"
{{modalUser.details.address}}
state = this.store.select()
constructor(private store: Store) {}