From 0a5905bb4b312b25f567eb0ef7fe3a5622d9f7f5 Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Mon, 26 Jun 2017 23:52:27 -0400
Subject: [PATCH] moving ngIf

---
 day3/README.md                                     | 9 +++++++++
 day3/starwars/src/app/search/search.component.html | 4 ++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/day3/README.md b/day3/README.md
index fe29505..a1537fd 100644
--- a/day3/README.md
+++ b/day3/README.md
@@ -388,3 +388,12 @@ and:
 ```html
 <li *ngFor="let character of apiObservable | async">
 ```
+
+You might notice that "Search Results" is always displayed even when there are no results.  Let's change that:
+
+```html
+<section>
+    <h2 *ngIf="(apiObservable | async) !== null">Search Results</h2>
+```
+
+Now the `h2` subscribes to the observable and tests to see if there are values in it
diff --git a/day3/starwars/src/app/search/search.component.html b/day3/starwars/src/app/search/search.component.html
index 14d2e5d..ca192ea 100644
--- a/day3/starwars/src/app/search/search.component.html
+++ b/day3/starwars/src/app/search/search.component.html
@@ -2,8 +2,8 @@
     <h2>Search For A Star Wars Character</h2>
     <input [(ngModel)]="name" type="text" placeholder="Character Name" (keyup)="findCharacter(name)" />
 </section>
-<section *ngIf="apiObservable">
-    <h2>Search Results</h2>
+<section>
+    <h2 *ngIf="(apiObservable | async) !== null">Search Results</h2>
     <ul>
         <li *ngFor="let character of apiObservable | async">
             <h3>{{character.name}}</h3>