Magento 2, Magento Development, Customization, Extension Development and Integration, Optimization, SEO and Responsive Design

Magento 2, Magento Development, Customization, Extension Development and Integration, Optimization, SEO and Responsive Design

AngularJS First Basic Demo For Beginners

In this demo we are going to use a simple text box, label and one button. This demo is for beginners.



I am going to do following things in this demo.

  • Add a Input field which updates a 'username'
  • Output the username property via String Interpolation
  • Add a button which may only be clicked if the username is NOT an empty string
  • Upon clicking the button, the username should be reset to an empty string

Here is the html code

<input 
  type="text" 
  class="form-control" 
  (input)="updateUserName($event)"
  [(ngModel)]="uName"
/>

<p>User Name is: {{ userName }}</p>

<button class="btn btn-primary"
[disabled]='!allowReset'
(click)="resetUserName()">Reset</button>

And here is the TypeScript file code

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-assignment',
  templateUrl: './assignment.component.html',
  styleUrls: ['./assignment.component.css']
})
export class AssignmentComponent implements OnInit {
  allowReset = false;
  userName = "";
  uName = "";

  constructor() { }

  ngOnInit() {
  }

  updateUserName(event: Event){
    this.userName = (<HTMLInputElement>event.target).value;
    this.allowReset = true;

    if(this.userName == ""){
      this.allowReset = false;
    }
  }

  resetUserName(){
    this.userName = "";
    this.uName = "";
    this.allowReset = false;
  }

}

Please support us, Like us on Facebook.

0 comments:

Post a Comment

 

Copyright @ 2017 HKBlog.