Skip to content
Permalink
Browse files

FEATURE: Code for Property Binding article

Change the page to support article for property bindings:

http://redgreenrepeat.com/2020/01/03/learning-angular-property-bindings/
  • Loading branch information
a-leung committed Dec 24, 2019
1 parent 2600b27 commit 6f7053b822f7d5818f361b39bb7541dd01cb30fa
Showing with 30 additions and 15 deletions.
  1. +12 −14 src/app/app.component.html
  2. +17 −0 src/app/app.component.ts
  3. +1 −1 src/index.html
@@ -1,17 +1,15 @@

hello world!
Enabled submit button:<br>
<input type="submit" enabled ><br>
<br>
Today's date (in your timezone!) is: <br>
{{ today_date }}
Disabled submit button:<br>
<input type="submit" disabled ><br>
<hr>
<br>
Set by AppComponent class:<br>
<p>isDisabled is {{isDisabled}}</p>
<input type="submit" [disabled]="isDisabled" >
<hr>
<br>
When you type a character into the box, the value of the form will be displayed below
<br>
<input (keyup)="onKey($event)"><br>
Value entered: <p>{{input_value}}</p>
<br>
Two-way data-binding<br>
<input [(ngModel)]="two_way_value"><br>
<br>
<br>
{{ two_way_value }}
Human check: in field below, enter 2 plus 3<br>
<input (keyup)="humanCheck($event)"><br>
<input type="submit" [disabled]="!humanValidated" >
@@ -13,4 +13,21 @@ export class AppComponent {
};

two_way_value; // by Angular using: FormsModule

isDisabled=false;

submitEnabled = false;
setSubmit(event: any) {
this.submitEnabled = true;
};

humanValidated=false;
humanCheck(event: any) {
if (event.target.value == (2+3)) {
this.humanValidated = true;
}
else {
this.humanValidated = false;
}
}
}
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>LearningAngularDataBinding</title>
<title>Learning Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">

0 comments on commit 6f7053b

Please sign in to comment.
You can’t perform that action at this time.