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

1. Clone this repo git clone https://github.com/Stanza987/angular-localStorage-devlogger.git
2. cd into the folder of the cloned repo
3. Run yarn install to install dependencies
4. Run ng serve, and navigate to http://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!

1. Import BehaviorSubject into log.service.ts

   import { BehaviorSubject } from 'rxjs/BehaviorSubject';

2. Create a new BehaviorSubject with an initial value

   logSource = new BehaviorSubject<Log>({id: null, text: null, date: null});

3. Update the value of an existing BehaviorSubject by calling the next method with a new value. In the project, this is done in the method setFormLog(log)

   setFormLog(log: Log) {
     this.logSource.next(log);
   }

4. Update the getLogs() method to return an Observable by using the of operator, which converts arguments into an observable sequence. Now, getLogs will report data asynchronously

   import { of } from 'rxjs/observable/of';
   ...
   
   getLogs(): Observable<Log[]> {
     return of(this.logs);
   }

1. Populate data asynchronously into logs.component.ts through logService

   ngOnInit() {
     this.logService.getLogs().subscribe(logs => this.logs = logs);
   }

2. Read this same data asynchronously in log-form.component.ts through logService

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

• Thinkster.io - Subjects, Observers, Observables, and Operators
• Thinkster.io - Using BehaviorSubject for Values That Change over Time
• RxJS 'of' operator