FEATURE: code for ngIf article

a-leung · a-leung · commit 80030c485ed8 · 2019-12-26T07:31:23.000Z
http://redgreenrepeat.com/2020/01/17/learning_angular_directives_ngif/
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,10 +1,9 @@
-<img style="visibility: {{showDog}}"
-     src="https://www.dropbox.com/s/ugeqlxvawfqwhth/dog_by_roaming_angel.jpeg?raw=1">
-
-<p>
-  Picture of a dog should appear above when "showDog" variable in the
-  component is set to: "visible".<br>
-  <br>
-  Current value of showDog: {{showDog}}<br>
-  <a href="https://unsplash.com/photos/LATYeZyw88c">Photo credits</a>
+<p *ngIf="show_ngIf">
+  Display if ngIf is typed in
 </p>
+
+<img *ngIf="show_dog"
+  src="https://www.dropbox.com/s/ugeqlxvawfqwhth/dog_by_roaming_angel.jpeg?raw=1">
+
+<br>
+<input (keyup)="imageCheck($event)"><br>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,10 +1,17 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-    showDog = 'visible';
+    show_ngIf = false;
+    show_dog = false;
+    imageCheck(event: any) {
+	let input_string = event.target.value;
+
+	this.show_ngIf = /.*ngIf.*/.test(input_string);
+	this.show_dog = /.*dog.*/.test(input_string);
+    }
 }
