Skip to content

Instantly share code, notes, and snippets.

View app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
export interface Todo {
id: string;
text: string;
}
View app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
@ViewChild('todoInput') todoInput: ElementRef;
todos$: Observable<Todo[]>;
View app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { EzngrxModule } from '@woahn/ezngrx';
import { config } from './ezngrx.config';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatCardModule } from '@angular/material/card';
View ezngrx.config.ts
import { DynamicStoreConfig, DYNAMIC_DATA_PROVIDER } from '@woahn/ezngrx';
import { TodoDataService } from './todo-data.service';
export const config: DynamicStoreConfig = {
entities: [{ entity: 'Todo' }],
providers: [
{
multi: true,
useClass: TodoDataService,
provide: DYNAMIC_DATA_PROVIDER
View todo-data.service.ts
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { DefaultDataService } from '@woahn/ezngrx';
import { Injectable } from '@angular/core';
import { Todo } from './app.module';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
View todo-data.service.ts
import { DefaultDataService } from '@woahn/ezngrx';
import { Injectable } from '@angular/core';
import { Todo } from './app.module';
@Injectable({
providedIn: 'root'
})
export class TodoDataService extends DefaultDataService<Todo> {
entity = 'Todo';
View app.module.ts
const config: DynamicStoreConfig = {
entities: [{ entity: 'Todo' }],
providers: [],
enableOfflineSync: true,
};
View 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>
View app.component.ts
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',
View app.module.ts
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' }],