How to set disabled button property using a function?

Question

I'm trying:

To have a button disabled by default.
After 4 seconds, the button will be enabled by using a function.

Maximilian instructor used a constructor. But I want to use a function instead, so I wrote below function but it's not working (the button is always enabled).

servers.component.ts:

export class ServersComponent implements OnInit {

  allowNewServer = false;

  AllowNewServerFunction(){
    setTimeout(()=>{
      return this.allowNewServer = true;
    }, 4000);
  }

}

servers.component.html:

<button class="btn btn-primary"
    [disabled]="AllowNewServerFunction()">Add Server</button>

What do you think AllowNewServerFunction method is returning? — eko
– eko, Commented May 24, 2021 at 14:15

Avinash Dalvi · Accepted Answer · 2021-05-24 14:25:02Z

3

Here is stackblitz : https://stackblitz.com/edit/disabled-button-duration

component.ts

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

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

  allowNewServer = false;

  ngOnInit() {
    this.AllowNewServerFunction();
  }
  AllowNewServerFunction() {
    setTimeout(() => {
      this.allowNewServer = true;
   
    }, 4000);
  }
}

component.html

<button class="btn btn-primary"
    [disabled]="allowNewServer">Add Server</button>

edited May 24, 2021 at 14:25

answered May 24, 2021 at 14:20

Avinash Dalvi

9,4299 gold badges34 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

eko Over a year ago

You don't need to return true; in the AllowNewServerFunction method since it's not doing anything :-) I thought about this too but OP says: "Maximilian instructor used a constructor. But I want to use a function instead". So I thought using constructor or life-cycles were out of bounds

Avinash Dalvi Over a year ago

my bad forgot to save changes. Thanks

compliance Over a year ago

Hi sorry for delay, i'll test it soon with my own project & will make sure to reply back.

eko · Accepted Answer · 2021-05-24 14:18:28Z

2

The closest thing I can think of is to provide an observable with a delay if you really want to return a function type thing:

export class ServersComponent {
  isDisabled = of(true).pipe(delay(4000));

<button class="btn btn-primary"
    [disabled]="isDisabled | async">Add Server</button>

Stackblitz

answered May 24, 2021 at 14:18

eko

40.8k11 gold badges79 silver badges104 bronze badges

2 Comments

Avinash Dalvi Over a year ago

This is better way can achieve this 👍🏻

compliance Over a year ago

Hi sorry for delay, i'll test it soon with my own project & will make sure to reply back.

gkrthk · Accepted Answer · 2021-05-24 14:23:53Z

2

The method itself must return a Boolean. Right now it's just setting a property which is not used anywhere in html.

Try changing function to return Boolean instead of setting the variable

AllowNewServerFunction(
    { 
      setTimeout(()=>{
           return  true;
      },  4000);
      return false;
    }

edited May 24, 2021 at 14:23

answered May 24, 2021 at 14:17

gkrthk

3411 silver badge7 bronze badges

1 Comment

compliance Over a year ago

Hi sorry for delay, i'll test it soon with my own project & will make sure to reply back.

Collectives™ on Stack Overflow

How to set disabled button property using a function?

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related