app.component.html

<div fxLayout="row" fxLayoutAlign="center center">
  <div fxLayout="column" fxFlex="60%">
    <mat-card>
      <mat-card-title>
        My Easy NGRX Todo List
      </mat-card-title>
      <mat-card-content fxLayout="column">
        <mat-form-field>
          <input matInput placeholder="Add New Todo" #todoInput (keyup)="addTodo($event)">
        </mat-form-field>
      </mat-card-content>
    </mat-card>
    <mat-card>
      <mat-card-title>
        Todos
      </mat-card-title>
      <mat-action-list>
        <button mat-list-item *ngFor="let todo of todos; let i = index;">
          {{i + 1}}. {{todo.text}}
        </button>
      </mat-action-list>
    </mat-card>
  </div>
</div>