title: Conditionally tick the checkbox in modal dialog in Angular
body: <p>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. </p>
  
  <p>following is my html for the modal</p>
  
  <pre><code>&lt;div *ngIf="_user" id="categoryModal" class="modal fade" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
  
          &lt;!-- Modal content--&gt;
          &lt;div class="modal-content"&gt;
  
              &lt;div class="modal-body" id="categoryDiv"&gt;
                  &lt;div class="row"&gt;
                    &lt;div *ngIf="_tenderCategories"&gt;
                      &lt;span *ngFor="let category of _tenderCategories; let i = index;"&gt;
                          &lt;div class="col-md-4"&gt;
                              &lt;div class="checkbox"&gt;
                                  &lt;label&gt;
                                      &lt;input id={{category.id}} type="checkbox" class="category-checkbox" [checked]="isUserInterested(category)" (change)="onCategoryCheckBoxClick(category)"&gt;
                                      &lt;p class="tender-category" style="cursor: pointer;"&gt;{{category.name}}&lt;/p&gt;
  
                                  &lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/span&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, in order to tick the checkbox, I call the function <code>isUserInterested(category)</code>.</p>
  
  <p>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. </p>
  
  <pre><code>isUserInterested(category: Category) {
     if (this._user.interestedCategories.indexOf(category) &gt; -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;
     }
    }
  </code></pre>
  
  <p>Why I am not getting the expected behavior? How can I get this implemented in the way I expect?</p>