Angular - 禁用按钮

Question

<div id="home-container">
    <div class="sidebar">
        <button mat-raised-button [disabled]="true">This is a button</button>
    </div>
    <div class="main-panel">
        <ac-map></ac-map>
    </div>
</div>

Environment:

• Angular 10
• Chrome/Firefox (Incognito mode)

Hi guys,

I'm experiencing some undesirable behaviour when displaying my angular project. The above example shows a simple component with a button that is disabled by default (I'm using 'true' as a placeholder for a variable). When I load the component the button should be disabled. HOWEVER. When the component is loaded the button is enabled for the first second or two and then is disabled - making it look disorganised. How can I avoid this?

Kind regards, Scott.

Answer 1

According to your requirement, I suggest you read the document about the component lifecycle of Angular. https://angular.io/guide/lifecycle-hooks

Please check this out for a live sample.

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

/**
 * @title Basic buttons
 */
@Component({
  selector: "button-overview-example",
  templateUrl: "button-overview-example.html",
  styleUrls: ["button-overview-example.css"]
})
export class ButtonOverviewExample implements OnInit {
  disabled = true;
  toggle() {
    this.disabled = !this.disabled;
  }

  ngOnInit(): void {
    this.disabled = false;
  }
}

https://stackblitz.com/edit/toggle-angular-material-button-sample?file=src/app/button-overview-example.html

In this sample, I used the variable disabled to indicate the button state, and implemented the OnInit hook which I change false to true .