Use the async pipes

BaggersIO · robinboehm · commit 11fa64e3c6e2 · 2018-05-09T12:58:52.000-07:00
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,5 +1,5 @@
-<h1>
-  {{title}}
+<h1 tooltip="Super App!">
+  {{title | shout:'!!!111📢💥'}}
 </h1>
 
 <router-outlet></router-outlet>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -5,10 +5,14 @@ import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
+import { ShoutPipe } from './shared/shout.pipe';
+import { TooltipDirective } from './shared/tooltip.directive';
 
 @NgModule({
   declarations: [
     AppComponent,
+    ShoutPipe,
+    TooltipDirective,
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/book/book-list/book-list.component.html b/src/app/book/book-list/book-list.component.html
@@ -1,5 +1,5 @@
 <ul>
-  <li *ngFor="let book of books">
+  <li *ngFor="let book of books | async">
     <a [routerLink]="[book.isbn]">{{book.title}}</a>
   </li>
 </ul>
diff --git a/src/app/book/book-list/book-list.component.ts b/src/app/book/book-list/book-list.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Book } from '../shared/book';
 import { BookDataService } from '../shared/book-data.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'book-list',
@@ -9,15 +10,16 @@ import { BookDataService } from '../shared/book-data.service';
 })
 export class BookListComponent implements OnInit {
 
-  books: Book[] = [];
+  books: Observable<Book[]>;
+
 
   constructor(private bookService: BookDataService) {
 
   }
 
   ngOnInit() {
 
-    this.bookService.getBooks().subscribe(books => this.books = books);
+    this.books = this.bookService.getBooks();
   }
 
 }
diff --git a/src/app/shared/shout.pipe.ts b/src/app/shared/shout.pipe.ts
@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'shout'
+})
+export class ShoutPipe implements PipeTransform {
+
+  transform(value: any, additional: string = '!!!'): any {
+
+    return `${value.toString().toUpperCase()}${additional}`;
+  }
+
+}
diff --git a/src/app/shared/tooltip.directive.ts b/src/app/shared/tooltip.directive.ts
@@ -0,0 +1,25 @@
+import { Directive, Input, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[tooltip]'
+})
+export class TooltipDirective {
+
+  @Input()
+  tooltip: string;
+
+  constructor() { }
+
+  @HostListener('mouseenter')
+  onMouseEnter() {
+
+    console.log(this.tooltip);
+  }
+
+  @HostListener('mouseleave')
+  onMouseLeave() {
+
+    console.log(this.tooltip);
+  }
+
+}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`import { Component, OnInit } from '@angular/core';`
`2`	`2`	`import { Book } from '../shared/book';`
`3`	`3`	`import { BookDataService } from '../shared/book-data.service';`
	`4`	`+import { Observable } from 'rxjs';`
`4`	`5`
`5`	`6`	`@Component({`
`6`	`7`	`selector: 'book-list',`
`@@ -9,15 +10,16 @@ import { BookDataService } from '../shared/book-data.service';`
`9`	`10`	`})`
`10`	`11`	`export class BookListComponent implements OnInit {`
`11`	`12`
`12`		`- books: Book[] = [];`
	`13`	`+ books: Observable<Book[]>;`
	`14`	`+`
`13`	`15`
`14`	`16`	`constructor(private bookService: BookDataService) {`
`15`	`17`
`16`	`18`	`}`
`17`	`19`
`18`	`20`	`ngOnInit() {`
`19`	`21`
`20`		`- this.bookService.getBooks().subscribe(books => this.books = books);`
	`22`	`+ this.books = this.bookService.getBooks();`
`21`	`23`	`}`
`22`	`24`
`23`	`25`	`}`