vendredi 3 novembre 2017

Conditionally tick the checkbox in modal dialog in Angular

I have a bootstrap modal dialog which contains some checkboxes. Each checkbox represents a category from the database and I need to tick the checkbox only if the user is interested on that category.

following is my html for the modal

<div *ngIf="_user" id="categoryModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">

            <div class="modal-body" id="categoryDiv">
                <div class="row">
                  <div *ngIf="_tenderCategories">
                    <span *ngFor="let category of _tenderCategories; let i = index;">
                        <div class="col-md-4">
                            <div class="checkbox">
                                <label>
                                    <input id= type="checkbox" class="category-checkbox" [checked]="isUserInterested(category)" (change)="onCategoryCheckBoxClick(category)">
                                    <p class="tender-category" style="cursor: pointer;"></p>

                                </label>
                            </div>
                        </div>
                    </span>
                  </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Submit</button>
            </div>
        </div>

    </div>
</div>

As you can see, in order to tick the checkbox, I call the function isUserInterested(category).

The problem I face is, when the page reloads only, the function I mentioned gets called. The modal above appears when I click a link on my html page; but the function does not get called in that case. By the time I click the above mentioned link, the component has all the data required for the function to execute.

isUserInterested(category: Category) {
   if (this._user.interestedCategories.indexOf(category) > -1) {
     // if the _user.interestedCategories list contaians the category, that category should be shown as marked
     console.log("Category "+category.id+" interested");
     return true;
   } else {
     return false;
   }
  }

Why I am not getting the expected behavior? How can I get this implemented in the way I expect?




Aucun commentaire:

Enregistrer un commentaire