CODEWITHSUNDEEP
javascriptangular
blackdaemon
blackdaemon

Reputation: 755

How to explicitly disable buttons angular

Hi I have a set of buttons as below,

let Btns: Array<any> = [{
    type: "submit",
    BtnType: "prev",
    label: "Previous",
    class: "btn-outline",
    icon: "kd-back",
    disabled: false
},
{
    type: "submit",
    BtnType: "next",
    label: "Next",
    icon: "kd-play",
    class: "btn-text",
    disabled: false
}];

Also I have two variables:

private nextBtn_disabled: boolean = false;
private prevBtn_disabled: boolean = true;

I am implementing a disable feature to the buttons. The behaviour is something like this:

  1. prev button must be disabled when the page first loads
  2. next button must be disabled when meet certain condition also must be disabled when the user click prev

The following is my HTML:

<div class="form-group text-center">
    <button *ngFor="let btn of Btns" [type]="(btn.type=='submit')?'submit':'button'" class="btn btn-icon" [ngClass]="btn.class" (click)="_btnClick(btn, _finalConfig)" [disabled]="nextBtn_disabled">
        <i *ngIf="btn.BtnType!='next'" [class]="btn.icon"></i>
        <span>{{btn.label}}</span>
        <i *ngIf="btn.BtnType=='next'" [class]="btn.icon"></i>
    </button>
</div>

How can I achieve it? I tried || condition and && condition between nextBtn_disabled and prevBtn_disabled. But didnt work. Any idea guys? Thanks in advance.

Upvotes: 2

Views: 10799

Answers (2)

AmanDeepSharma
AmanDeepSharma

Reputation: 2208

Code it like this:

check it for your 2nd point (next button must be disabled when meet certain condition also must be disabled when the user click prev)

Html code:

<div>
<button *ngFor="let btn of btns" [disabled]="btn.disabled"      (click)="btnClick(btn,btns)">{{btn.label}}</button>
</div>

Add other html code according to your need.

Component code:

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


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
 })
export class AppComponent {


btn1 :boolean = false;
btn2 :boolean = false;

btns: Array<any> = [
    {
        type: "submit",
        BtnType: "prev",
        label: "Previous",
        class: "btn-outline",
        icon: "kd-back",
        disabled: this.btn1
    },
    {
        type: "submit",
        BtnType: "next",
        label: "Next",
        icon: "kd-play",
        class: "btn-text",
        disabled: this.btn2
    }];


    btnClick(btn,btns){

        var certain_condition = true; //put your code for any certain condition here and make it true or false.
        if((btn.label === "Previous") || certain_condition){
            console.log(btns[1]);
            btns[1].disabled = true;
        }

    }

  }

For your first point make "btn1 :boolean = true;" Try changing various conditions according to your need.

Upvotes: 1

Pramod_Para
Pramod_Para

Reputation: 681

I would recommend something like this.

<button [disabled]="isInvalid()">Your html</button>

isInvalid() {
   return (checkCondition_to_be_met || clicked_on_prev_button);
}

Upvotes: 6

Related Questions