Disabling buttons in Array Angular it doesn't disable the button

Question

I do have a list of array which they have buttons but I show them as icons. I want to do if the length of array is larger than 1 disable the button.

But instead it is not working, it is not disabling the button. I have a array declared in the dialog, which from there I show data in HTML.

Here is my code.

 <div class="container">
  <div class="body-container">
    <h1>New Skill</h1>
    <div class="content">
    <div class="array" *ngFor="let cat of category">
      <ul mat-dialog-close>
        <button [disabled]="cat.disabled" (click)="addCategory(cat.id)" type="button"><i class="fa-2x" [class]="cat.icon"></i></button>
      </ul>
      <h3> {{cat.description | translate}}</h3>
    </div>
    </div>
  </div>
</div>

.content {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 25rem;
  justify-content: flex-start;
  flex-wrap: wrap;
}
h1 {
  margin: 0 1rem 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid #eee;
  color: #555;
  font-size: 2em;
}
ul {
  color: gray;
  background: #ebebeb;
  border-radius: 2px;
  width: 8rem;
  height: 5rem;
  padding: 0;
  margin: 0;
  align-items: center!important;
  justify-content: center!important;
  display: flex!important;
  &:hover {
    background: #0d3349;
  }
}
h3 {
  align-items: center!important;
  justify-content: center!important;
  display: flex!important;
}

.array {
  padding: 2px;
}
button {
  color: grey;
  border-radius: 50%;
  height: 4rem;
  width: 4rem;
  background: white;
  border: none;
  padding: 0;
}

export class CategoryDialogComponent implements OnInit {
  public personalData;
  public career;
  public education;
  public skills;
  public empty;
  public category = [];

  // tslint:disable-next-line:ban-types
  constructor(
    @Inject(MAT_DIALOG_DATA) public data: CategoryDialog,
    private dialogRef: MatDialogRef<CategoryDialogComponent>
  ) {}

  ngOnInit(): void {
     this.category = [
      {
        id: "PersonalData",
        name: Category.PersonalData,
        description: "category.PersonalData",
        icon: "fa fa-user",
        disabled: this.personalData,
      },
      {
        id: "Career",
        name: Category.Career,
        description: "category.Career",
        icon: "fa fa-black-tie",
        disabled: this.career,
      },
      {
        id: "Education",
        name: Category.Education,
        description: "category.Education",
        icon: "fa fa-graduation-cap",
        disabled: this.education,
      },
      {
        id: "Skills",
        name: Category.Skills,
        description: "category.Skills",
        icon: "fa fa-graduation-cap",
        disabled: this.skills
      },
      {
        id: "Another",
        name: Category.Another,
        description: "category.Another",
        icon: "fa fa-bars",
      },
      {
        id: "Files",
        name: Category.Files,
        description: "category.AddFiles",
        icon: "fa fa-file",
        disabled: this.empty
      },
    ];
    this.career = this.data.model.careers.length > 1;
    this.personalData = this.data.model.personalData.length > 1;
    this.education = this.data.model.education.length > 1;
  }

  public addCategory(category) {
    this.dialogRef.close(category);
  }
}

export interface CategoryDialog {
  model: Model;
  skills?: Skills;
  personalData?: PersonalData;
  education?: Education;
  career?: Carrier;
}

You have the same click event in ul as well as button. Even though your button is disabled, the click even in ul tag will be fired. Have the click event in one place, or have only button instead of ul. — Narayanan Ramanathan
– Narayanan Ramanathan, Commented Nov 4, 2020 at 17:32
If you want to disable the button when values are empty, then modify the flag as [disabled]="!cat.disabled" — Narayanan Ramanathan
– Narayanan Ramanathan, Commented Nov 4, 2020 at 17:36
@NarayananRamanathan will it disable all the buttons, or only the button for the desired object ? — TheCoderGuy
– TheCoderGuy, Commented Nov 4, 2020 at 17:57
It should disable only the desired button. But in your case you set the values in this.category array before the values of career, education, etc are set. So it is assigning undefined for disabled parameter. To avoid this set the category array after the values for career, education, etc are set. — Narayanan Ramanathan
– Narayanan Ramanathan, Commented Nov 4, 2020 at 18:26

TheCoderGuy · Accepted Answer · 2020-11-06 20:55:54Z

A the @NarayananRamanathan answered I needed to set the values at first and then to call the this.category.

<div class="container">
  <div class="body-container">
    <h1>New Skill</h1>
    <div class="content">
    <div class="array" *ngFor="let cat of category; let i = index">
      <ul >
        <button mat-dialog-close [disabled]="cat.disabled" (click)="addCategory(cat.id)" type="button"><i class="fa-2x" [class]="cat.icon"></i></button>
      </ul>
      <h3> {{cat.description | translate}}</h3>
    </div>
    </div>
  </div>
</div>

And this is the TS.

ngOnInit(): void {
    this.career = this.data.model.careers.length > 0;
    this.personalData = this.data.model.personalData.length > 1;
    this.education = this.data.model.education.length > 0;
    this.skills = this.data.model.skills.length > 0;
    this.files = this.data.model.files.length > 0;
    this.empty = this.data.model.emptySubCategory.length > 0;
    this.category = [
      {
        id: "PersonalData",
        name: Category.PersonalData,
        description: "category.PersonalData",
        icon: "fa fa-user",
        disabled: this.personalData,
      },
      {
        id: "Career",
        name: Category.Career,
        description: "category.Career",
        icon: "fa fa-black-tie",
        disabled: this.career,
      },
      {
        id: "Education",
        name: Category.Education,
        description: "category.Education",
        icon: "fa fa-graduation-cap",
        disabled: this.education,
      },
      {
        id: "Skills",
        name: Category.Skills,
        description: "category.Skills",
        icon: "fa fa-graduation-cap",
        disabled: this.skills
      },
      {
        id: "Files",
        name: Category.Files,
        description: "category.AddFiles",
        icon: "fa fa-file",
        disabled: this.files
      },
      {
        id: "Another",
        name: Category.Another,
        description: "category.Another",
        icon: "fa fa-bars",
        disabled: this.empty,
      }
    ];
   
  }

Collectives™ on Stack Overflow

Disabling buttons in Array Angular it doesn't disable the button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related