Event and property binding

.vscode/settings.json

@@ -0,0 +1,3 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+}

src/app/app.component.ts

@@ -7,4 +7,13 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'app works!';
-}
+
+toggle (){
+//this.show = !this.show;
+alert('sss');
+}
+
+}
+
+
+}

src/app/app.module.ts

@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
-import { innerComponent } from "./inner/inner.component";
+import { innerComponent } from './inner/inner.component';
 
 @NgModule({
   declarations: [

src/app/inner/inner.component.html

@@ -1,4 +1,25 @@
 <p [title]="titleText">
+{{title}}
+</p>
+
+<!-- <input type="text" (input)="clickMe($event)" /> -->
+<hr/>
+<h2>event binding and ngModel </h2>
+<button [disabled]="!allowclick" (click)="onClicked()"> Click Me</button>
+<input type="text" [(ngModel)]="EnteredData" placeholder="Typing..."/>
+<p>{{ShowData}}</p>
+
+<hr/>
+<h2>NgStyle</h2>
+<p [ngStyle]="{backgroundColor:getColor()}">The status is {{currentStatus}} -- {{getColor()}}</p>
+
+<hr/>
+<h2>*ngFor</h2>
+<button (click)="addItems()"> Click Me</button>
+<input type="text" [(ngModel)]="itemName" placeholder="Typing..."/>
+<div *ngFor="let eachItem of repeatItems">
+{{itemName}}
+{{eachItem}}
     {{title}}
 </p>
 

src/app/inner/inner.component.ts

@@ -1,16 +1,16 @@
 
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
-    selector: 'app-inner',
-    templateUrl: './inner.component.html',
-    styles: ['div, span{color:#666; font-size:14px;padding:5px 0}']
+    selector : 'app-inner',
+    templateUrl : './inner.component.html'
 })
 
-export class innerComponent {
+export class innerComponent{
     title = "innerComponent text";
     titleText = "This is custom Text";
 
+
     showFlag = 1;
     view = "one"
     colors = ['red', 'green', 'blue', 'pink', 'yellow'];
@@ -26,5 +26,34 @@ export class innerComponent {
             name: 'Robbin', age: '32', gender: 'M'
         }
     ]
+
+  allowclick = false;
+    currentStatus;
+
+    repeatItems = ['item 1','item2', 'item 3'];
+
+
+    constructor(){
+      setTimeout(() => {
+        this.allowclick = true;
+      },2000);
+
+      this.currentStatus = Math.random() > 0.5 ? 'Online' : 'Offline'; 
+
+    }
+
+    ShowData='';
+    EnteredData='';
 
-}
+    onClicked (){
+        this.ShowData="'"+this.EnteredData + "' is textbox Data ";
+    }
+
+    getColor(){
+        return this.currentStatus ==='online' ? 'green' :'red';
+    }
+    eachItem = '';
+    addItems(){
+        this.repeatItems.push(this.eachItem);
+    }
+