title: Why is ngClass calling function indefinitely?
body: <p>I am attempting to add a class based off of whether or not a value is present in storage, or set to a specific value. I am attempting to use [ngClass] for this. For some reason, my function to check the storage is getting called infinitely. What is causing this behavior and how can I stop it?</p>
  
  <p>One example of the usage in my html file:</p>
  
  <pre><code>&lt;div id="level2" class="cell middle" [ngClass]="{'locked': checkLevel(2)}"&gt;
  </code></pre>
  
  <p>checkLevel function:</p>
  
  <pre><code>checkLevel(level): any{
          console.log("checkLevel(" + level + ")");
          var result = this.storage.getLevel(level.toString());
          console.log(result);
          if (result == null || result['status'] == 'locked'){
              return true;
          } else {
              return false;
          }
      }
  </code></pre>
  
  <p>getLevel function:</p>
  
  <pre><code>getLevel(level:string):any{
          console.log("Inside getLevel.");
          this.storage.get('games' + level).then((val) =&gt; {
              console.log(val);
              return val;
          });
      }
  </code></pre>
  
  <p>Output to the console:</p>
  
  <pre><code>checkLevel(10)
  storage.ts:20 Inside getLevel.
  levels.ts:28 undefined
  levels.ts:26 checkLevel(11)
  storage.ts:20 Inside getLevel.
  levels.ts:28 undefined
  levels.ts:26 checkLevel(12)
  storage.ts:20 Inside getLevel.
  levels.ts:28 undefined
  levels.ts:26 checkLevel(13)
  storage.ts:20 Inside getLevel.
  levels.ts:28 undefined
  levels.ts:26 checkLevel(14)
  storage.ts:20 Inside getLevel.
  levels.ts:28 undefined
  </code></pre>
  
  <p>And it just keeps doing that forever. Cycling through all of the places that I use the [ngClass]. The actual levels page is never displayed.</p>
  
  <p><strong>--CONTEXT UPDATE--</strong></p>
  
  <p>I am using this on a page that contains a slider with 3 slides. Each slide contains 9 divs or 'cells' that represent a single level. There are 27 levels and that will never change, so the levels are static elements on the page (not loaded dynamically). Each level (except the first) is initially locked. Completing a level will unlock the next one. Or, levels can be unlocked by using the in game currency. So I need to check the local storage and set the locked class if there is no data for the level, or if the level has a status of locked. If it is unlocked, do not apply the locked class.</p>
  
  <p>I just need some way to dynamically change classes based off of the level data that I am returned. </p>