In this tutorial we will show you the solution of angular 7 disable button on condition, here we created two button on component.html one for activate disable condition on particular button, another one will shows disabled button.

For disable we needs to change its disabled value to false so it will change to disable can’t work or clickable.

Step By Step Guide On Angular 7 Disable Button On Condition :-

Here in submit button calls one function ‘onBtn()’ when user clicks and disable button created with ‘disabled’ with ‘click’ value.

In typescript file we defined function ‘onBtn()’ initially we sets click type to ‘boolean’ and value to ‘false’ state.

Within function ‘onBtn()’ that ‘click’ value changed to ‘true’ state by ‘!this.click’. The ‘!’ symbol refers ‘not equal to’ so whenever we use this that value changed to opposite value.

Src/app/app.component.html

<button (click)="onBtn()" >Submit</button><br><br>
<button [disabled]="click">Disable</button>

Src/app/app.component.ts

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

1. As we know in angular component source had separated files in those we are not touch other files except ‘app.component.ts and app.component.html’. Because app.component.ts is the main building block for angular application and always typescript class that defines behavior.
2. In app.component.html we needs to define button to shows disable button how it will looks like and work on webpage.
3. No need to do any changes on html and module.ts files because we just declared our json object.
4. In app.component.ts file as we know whatever we using in component.html file we needs to declare and initialize in ts file so we declared value clicks ‘type’ to ‘boolean’ and initialized with value ‘false’.
5. In html file we calls onBtn() function defined in component.ts file. Within function we changing its value ‘false’ to ‘true’ so whenever user clicks on submit button it calls onBtn() function then disables the ‘disable’ button.
6. Because we defined like that when submit button submitted by user then only ‘disable’ button state changed to disable state so it can’t work and clickable.
7. We can directly enables disable condition on button so it will turns to disable state without any conditions will looks on webpage.

Conclusion :-

In conclusion now we are able to know how to disable button on condition using angular.

For seeing result on webpage we need supports of server and internet connection.

As we know commend ‘ng serve’ will execute our code on server at port ‘localhost:4200’. Initially our result on webpage contains two buttons namely ‘submit and disable’.

When user clicks on submit it will disables the disable button.

If we prints our result on console for seeing console result we need to right click on webpage and select ‘inspect’ last option then browsers left side one panel will open.

There we can see our result message. I hope this tutorial on angular 7 disable button on condition helps you and the steps and method mentioned above are easy to follow and implement.