This project is the result of my code-along to the DevLogger App Project in Angular Front to Back by Brad Traversy. He is an excellent teacher, and I highly recommend taking his course to learn Angular!
The BEST part of this project is that he explains how to use RxJS to transfer data between sibling components. Additional information about this technique is detailed below:
- Angular CLI v1.6.4
- Angular v5.2.1
- Bootstrap v4.0.0
- Clone this repo
git clone https://github.com/Stanza987/angular-localStorage-devlogger.git
cd
into the folder of the cloned repo- Run
yarn install
to install dependencies - Run
ng serve
, and navigate tohttp://localhost:4200/
BehaviorSubject is a type of RxJS Subject that acts as both an Observer and an Observable. We can use BehaviorSubject to store initial data, which can then be updated and read throughout the application. This can be done synchronously through .getValue()
or asynchronously through .subscribe()
. This app uses the latter method to share data across components.
Consider the following static data set in log.service.ts
constructor() {
this.logs = [
{ id: '1', text: 'Generated components', date: new Date('12/26/2017 12:54:23') },
{ id: '2', text: 'Added Bootstrap', date: new Date('12/27/2017 9:33:13') },
{ id: '3', text: 'Added logs component', date: new Date('12/27/2017 12:00:23') }
];
}
In order for the component to access the data defined in the service, the component must call the getLogs()
method in log.service.ts
// log.service.ts
getLogs() {
return this.logs;
}
// logs.component.ts
logs: Log[];
ngOnInit() {
this.logs = this.logService.getLogs();
}
Although this is nice, if the data were to be updated, we can't share this new data asynchronously with another component. That's where BehaviorSubject can be useful!
-
Import BehaviorSubject into
log.service.ts
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-
Create a new BehaviorSubject with an initial value
logSource = new BehaviorSubject<Log>({id: null, text: null, date: null});
-
Update the value of an existing BehaviorSubject by calling the
next
method with a new value. In the project, this is done in the methodsetFormLog(log)
setFormLog(log: Log) { this.logSource.next(log); }
-
Update the
getLogs()
method to return an Observable by using theof
operator, which converts arguments into an observable sequence. Now,getLogs
will report data asynchronouslyimport { of } from 'rxjs/observable/of'; ... getLogs(): Observable<Log[]> { return of(this.logs); }
-
Populate data asynchronously into
logs.component.ts
throughlogService
ngOnInit() { this.logService.getLogs().subscribe(logs => this.logs = logs); }
-
Read this same data asynchronously in
log-form.component.ts
throughlogService
ngOnInit() { this.logservice.logSource.subscribe(log => { if (log.id !== null) { this.id = log.id; this.text = log.text; this.date = log.date; } }); }
Data shared from logs.component
to log-form.component
through a click
event
<!-- logs.component.html -->
<td><a href="#" (click)="onSelect(log)">{{ log.text }}</a></td>
// logs.component.ts
onSelect(log: Log) {
this.logService.setFormLog(log);
}
<!-- log-form.component.html -->
<input type="text" name="text" [(ngModel)]="text" class="form-control" placeholder="Add a log...">