angular 4 sibling component communication -
sibling component communication service (emulate redux fn) todo create service
- add mission date && quantity in dashboard cmp updated
- remove mission date && quantity in dashboard cmp updated
- delete button dashboard cmp empties array in heroes- todos cmp
is feasible, elegantly , using angular?
//our root app component import {component, ngmodule, input, output, eventemitter, version} '@angular/core' import {browsermodule} '@angular/platform-browser' @component({ selector: 'my-app', template: ` <div> <h2>{{name}}</h2> <app-heroes-todos></app-heroes-todos> <app-heroes-dashboard></app-heroes-dashboard> </div> `, }) export class app { name:string; constructor() { this.name = `we honor angular! v${version.full}`; } } interface todos { title: string; iscompleted: boolean; date: number; } @component({ selector: 'app-heroes-todos', styles: [` .completed { text-decoration: line-through; } `], template: ` <h2>mission list</h2> <input #input> <button (click)="add(input)">add</button> <ul> <li *ngfor="let todo of todos"> <span [class.completed]="todo.iscompleted" (click)="toggle(todo)" >{{todo.title}}</span> <button (click)="remove(todo)">x</button> </li> </ul>` }) export class heroestodos { todos: todos[] = []; totalitems = 0; lastupdate: any; add(input) { this.todos.push({title: input.value, iscompleted: false, date: new date().gettime()}); this.lastupdate = new date().gettime(); this.totalitems++; input.value = ''; } remove(todo) { let index = this.todos.indexof(todo); this.lastupdate = new date().gettime(); this.totalitems--; this.todos.splice(index, 1); } toggle(todo) { todo.iscompleted = !todo.iscompleted; } deleteall(cleardata: boolean) { if (cleardata) { this.todos = []; this.totalitems = 0; this.lastupdate = new date().gettime(); } } } @component({ selector: 'app-heroes-dashboard', template: ` <div> <h2>dashboard</h2> <p><b>last update:</b>{{ lastupdate | date:'medium' }}</p> <p><b>total missions:</b> {{ totalitems }}</p> <button (click)="deleteall()">delete all</button> </div> ` }) export class heroesdashboard { @input() totalitems; @input() lastupdate; @output() ondeleted = new eventemitter<boolean>(); constructor() { } deleteall() { this.ondeleted.emit(true); } } @ngmodule({ imports: [ browsermodule ], declarations: [ app, heroestodos, heroesdashboard ], bootstrap: [ app ] }) export class appmodule {}
import { injectable } '@angular/core'; import { subject } 'rxjs/subject'; @injectable() export class sharedservice { //observable string source private totalcount = new subject<number>(); private lastupdate = new subject<number>(); private clearall = new subject<boolean>(); // observable string streams totalcount$ = this.totalcount.asobservable(); lastupdate$ = this.lastupdate.asobservable(); clearall$ = this.clearall.asobservable(); // service message commands publishtotalcount(count: number) { this.totalcount.next(count); } publishlastupdate(date: number) { this.lastupdate.next(date); } publishclearall(clear: boolean) { this.clearall.next(clear); } } 
Comments
Post a Comment