Friday, April 10, 2020

Angular Disable Button Example

In this post we’ll see some examples of disabling a button in Angular. There is a disabled property of button that can be set to true or false in order to disable or enable a button.

So disabling a button is as simple as using the statement given below-

<button class="btn btn-primary" [disabled]="true">Submit</button>

Of course you’ll bind it with some property or use a condition to disable or enable a button dynamically so let’s see examples of doing that.


Disable a button if no input text Angular example

To ensure that button is disable when there is no text and it is enable only when some text is entered you can use two way Angular two way databinding.

Template

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <label for="name" class="col-form-label">Name:</label>
      <input class="form-control" placeholder="Enter name" id="name" [(ngModel)]="userName">        
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-md-12">
      <button class="btn btn-primary" [disabled]="userName === ''">Submit</button>
    </div>
  </div>
</div>

As you can see userName is bound to the property in the Typescript file using two way binding. Then using Angular property binding button’s disabled property is bound to a condition that checks if userName is empty.

[disabled]="userName === ''"

Component (Typescript file)

In the AppComponent file property userName is added with the initial value as empty.

import {Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    userName = '';
}

When button is disabled

Angular disable button

When button is enabled

Angular disable button no input

Disable a button after click Angular example

This Angular example shows how to disable a button after it is clicked. To do that disabled property of the button is bound to a boolean flag and that flag’s value is set by calling a function on the button click event.

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <label for="name" class="col-form-label">Name:</label>
      <input class="form-control" placeholder="Enter name" id="name">        
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-md-12">
      <button class="btn btn-primary" (click)="onButtonClick()" [disabled]="click">Submit</button>
    </div>
  </div>
</div>

Component

import {Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  //userName='';
  click : boolean = false;

  onButtonClick(){
    this.click = !this.click;
  }
}

Same thing can be done entirely in Typescript by using the click event of the button element in the template and passing the entire event payload ($event) to the component event handler.

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <label for="name" class="col-form-label">Name:</label>
      <input class="form-control" placeholder="Enter name" id="name">        
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-md-12">
      <button class="btn btn-primary" (click)="onButtonClick($event)">Submit</button>
    </div>
  </div>
</div>

Notice that diasbled property is not used with the button element.

Component

import {Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  //userName='';
  click : boolean = false;

  onButtonClick(event : MouseEvent){
    (event.target as HTMLButtonElement).disabled = true;
  }
}

Disable a button if no input and after click

Here is an example which combines the above two examples and disables a button if there is no input as well as disables a button after the button is clicked once.

Following code listens to the keyup event of the input element and passes the entire event payload ($event) to the component event handler. It also listens to the click event of the button and calls the onButtonClick() function when the button is clicked.

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <label for="name" class="col-form-label">Name:</label>
      <input class="form-control" placeholder="Enter name" id="name" (keyup)="onKey($event)">        
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-md-12">
      <button class="btn btn-primary" (click)="onButtonClick()" [disabled]="click">Submit</button>
    </div>
  </div>
</div>

When a user presses and releases a key, the keyup event occurs, and Angular provides a corresponding DOM event object in the $event variable which this code passes as a parameter to the component's onKey() method. In the onKey() method it is checked whether the input text box element has any value or not and true or false is passed accordingly.

In onButtonClick() method value of the click property which is boolean is reversed.

import {Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  click : boolean = true;
  onButtonClick(){
    this.click = !this.click;
  }
  onKey(event: KeyboardEvent) { 
    // if value is not empty the set click to false otherwise true
    this.click = (event.target as HTMLInputElement).value === '' ? true:false;
  }
}

That's all for this topic Angular Disable Button Example. If you have any doubt or any suggestions to make please drop a comment. Thanks!

>>>Return to Angular Tutorial Page


Related Topics

  1. Angular Example to Render Multiple Rows
  2. Angular @Input and @Output Example
  3. Angular ngClass Directive With Examples
  4. Angular ngIf Directive With Examples
  5. Creating New Component in Angular

You may also like-

  1. Angular Project Structure With File Description
  2. Angular Application Bootstrap Process
  3. Java String Interview Questions And Answers
  4. DelayQueue in Java Concurrency
  5. @FunctionalInterface Annotation in Java
  6. String Vs StringBuffer Vs StringBuilder in Java
  7. Spring NamedParameterJdbcTemplate Insert, Update And Delete Example
  8. User-defined Exceptions in Python