Skip to content

Instantly share code, notes, and snippets.

@latimeks
Created July 23, 2018 16:43
Show Gist options
  • Save latimeks/8055c0a4c532669d245febd2420019d7 to your computer and use it in GitHub Desktop.
Save latimeks/8055c0a4c532669d245febd2420019d7 to your computer and use it in GitHub Desktop.
App2 - Databinding
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {MatInputModule} from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatCardModule} from '@angular/material/card';
import { AppComponent } from './app.component';
import { UserformComponent } from './userform/userform.component';
@NgModule({
declarations: [
AppComponent,
UserformComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MatInputModule,
MatButtonModule,
MatCardModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
{
"name": "my-first-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.9",
"@angular/cdk": "^6.4.0",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/material": "^6.4.0",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/router": "^6.0.0",
"bootstrap": "3.3.7",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.1.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/compiler-cli": "^6.0.0",
"@angular-devkit/build-angular": "~0.6.0",
"typescript": "~2.7.2",
"@angular/cli": "~6.0.0",
"@angular/language-service": "^6.0.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
}
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
body {
font-family: 'Roboto';
background-color: #CCC;
}
.main-card {
margin: 100px;
padding: 50px;
width: 600px;
height: 500px;
border: 2px groove black;
background: linear-gradient(#ff4081, #3f51b5);
color: white;
}
.header {
margin: 0px !important;
}
.footer {
font-type: small;
font-style: italic;
}
.mat-card-subtitle {
color: #F5F5F5;
}
<mat-card class='main-card'>
<mat-card-header>
<h2>Userform</h2>
</mat-card-header>
<mat-card-subtitle>
<p>Implementation of 2-way binding, string Interpolation, property binding and event handling</p>
</mat-card-subtitle>
<mat-card-content>
<mat-form-field>
<input matInput [(ngModel)]="UserName" (keyup)="onChangeCheckLength()" placeholder="UserName" />
</mat-form-field>
<p>User name entered above is: {{UserName}}</p>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button (click)="onClickReset()" [disabled]="Inactive" color='accent'>CLEAR</button>
</mat-card-actions>
<mat-card-footer>
<p class='footer'>App 2: Databinding practice</p>
</mat-card-footer>
</mat-card>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-userform',
templateUrl: './userform.component.html',
styleUrls: ['./userform.component.css']
})
export class UserformComponent implements OnInit {
UserName :string = '';
Inactive :boolean = true;
constructor() { }
ngOnInit() {
}
onClickReset(){
this.UserName = '';
this.Inactive = true;
}
onChangeCheckLength(){
this.UserName.length > 0? this.Inactive = false: this.Inactive = true;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment