jonathanwoahn

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FlexLayoutModule,
    MatCardModule,
    MatInputModule,
    MatListModule,
  ],

jonathanwoahn

@import '~@angular/material/theming';

@include mat-core();

$amp-app-primary: mat-palette($mat-light-blue);
$amp-app-accent:  mat-palette($mat-light-green);
$amp-app-warn:    mat-palette($mat-red);
$amp-app-theme: mat-light-theme($amp-app-primary, $amp-app-accent, $amp-app-warn);

@include angular-material-theme($amp-app-theme);

jonathanwoahn

/* You can add global styles to this file, and also import other style files */
@import 'theme.scss';

.mat-card {
  margin: 10px;
}

jonathanwoahn

<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">
        </mat-form-field>

jonathanwoahn

export interface Todo {
  id: string;
  text: string;
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,

jonathanwoahn

<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>

jonathanwoahn

<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>

jonathanwoahn

import { Component, ViewChild, ElementRef } from '@angular/core';
import { v4 as uuid } from 'uuid';
import { Todo } from './app.module';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

jonathanwoahn

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatCardModule, MatInputModule, MatListModule } from '@angular/material';
import { DynamicNgrxModule, DynamicStoreConfig } from 'dynamic-ngrx';

const config: DynamicStoreConfig = {
  entities: [{ entity: 'Todo' }],

jonathanwoahn

import { Component, ViewChild, ElementRef } from '@angular/core';
import { v4 as uuid } from 'uuid';
import { Todo } from './app.module';
import { DynamicFacadeService, DynamicFacade } from 'dynamic-ngrx';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',