在表中如何使用 angular 9 中的按钮启用和禁用引导复选框？

Question

I am developing a page in an angular. I am not quite familiar in angular. I had spent few hours working on it and went through the maximum number of alternate threads regarding this issue. But couldn't find the solution that I was looking into.

specifically, I want to stress here I am using bootstrap checkboxes. I am not using ng-bootstrap.

Here are the queries I would like to address that are I am having.

1. When the page loads the buttons should be disabled until I click on the checkbox.
2. When I click on the checkbox in the header of the table it should enable all the checkboxes within the table and enable the buttons.
3. When I unchecked the checkbox in the header it should disable all other checkboxes and disable the buttons.

Below are the details that i had worked for my problem.

MyPage.html

    <div id='bookstore'>
            <table  class="table table-responsive table-striped">
                <thead class="th-color">
                    <tr>
                        <th><input name="select_all_books" type="checkbox" ></th>
                        <th class="theading">Book ID</th>
                        <th class="theading">Book Name</th>
                        <th class="theading">From Date</th>
                        <th class="theading">To Date</th>
                        <th class="theading">No of Days</th>
                        <th class="theading">Apply Date</th>
                        <th class="theading">Reason</th>
                        <th class="theading">Book Status</th>
                       
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of bookstore | paginate: { itemsPerPage: pageSize, currentPage: p}">
                        <td><input type="checkbox" id="rowcheckedbookstore"></td>
                        <td> {{data.BookId }}</td>
                        <td>{{ data.BookName }}</td>
                        <td>{{ data.BookStart | date:'dd-MM-yyyy' }}</td>
                        <td>{{ data.BookReturn  | date:'dd-MM-yyyy' }}</td>
                        <td>{{ data.BookDays }}</td>
                        <td>{{ data.ApplyDate}}</td>
                        <td>{{ data.Reason }}</td>
                        <td>{{ data.BookStatus}}</td>                 
                    </tr>
                </tbody>
                </table>
                </div>

               <div class="row paginator">
                  <div class="col-md-7">
                    <p> Showing {{ ((p - 1) * pageSize) + 1 }} to {{ pageSize * p }} of {{collectionsize }} </p>
                 </div>
                <div class="col-md-5">
                    <pagination-controls (pageChange)="p = $event" ></pagination-controls>
                </div>
            </div>

            <div class="container" style="padding-top: 30px;">
                <div class="w3-show-inline-block">
               
                    <div class="w3-bar">
                        <button type="submit" id="allobook" class="btn btn-success" [disabled]="true" (click)="allowClick()" style="margin-right: 105px;float: right;">Allow</button>
               
                        <button type="submit"  id= "rejectbook" class="btn btn-danger" [disabled]="true" (click)="rejectClick()" style="float: right;margin-right: 35px;">Reject</button>
                    </div>
              
                </div>
            </div>

MyPage.ts

 export class MyPageComponent implements OnInit {
            
              page = 1;
             pageSize = 10;
               p: number = 1;
               collectionsize:any;
               count: boolean;
             
               
             bookslistdata:bookslist[];
               
               constructor (private bookslist: BookService) { }
             
               ngOnInit(): void {
                 this.bookslist.GetBooksData().subscribe(data=>{
                   this.bookslistdata = data;
                   this.collectionsize = data.length;
                })
              }
             allowClick(){
               alert('approve');
             }
             rejectClick(){
               alert('reject');
             }

I am able to disable the buttons on the page load. But I am unable to achieve when I try with the checkboxes. I would like to know how can I achieve?

Answer 1

When the page loads the buttons should be disabled until I click on the checkbox.

<input disabled ng-disabled="name == '' || password == ''" type="submit" value="Log in" />

The about code resolved the issue I am having ng-disabled.