title: Firestore causing ngFor loop to be called repeatedly
body: <p>I have the following code in my .ts file:</p>
  <pre><code>
  ngOnInit(){
    const firebaseConfig = {
     HIDDEN
    };
    firebase.initializeApp(firebaseConfig);
    const app = firebase.app();
    console.log(app);
  
    const db = firebase.firestore();
  }
  </code></pre>
  <p>and the following code in my .html file:</p>
  <pre><code>  &lt;div [(ngModel)]=&quot;myInput&quot; ngDefaultControl *ngFor=&quot;let word of words; let i = index;&quot; (ionChange)=&quot;inputChange($event)&quot;&gt;
    &lt;input class = &quot;inputs&quot; readonly (click)=&quot;test();endWord(); onFocus($event)&quot; (keyup)=&quot;keytab($event, 1)&quot; *ngFor=&quot;let letter of toLetters(word);&quot; maxlength = &quot;1&quot; type=&quot;text&quot;/&gt;
  &lt;/div&gt;
  </code></pre>
  <p>For some reason, whenever I include the line of code <code>const db = app.firestore()</code>, the function <code>getLetters()</code> in the ngFor loop gets called repeatedly.</p>
  <p>This is the funtion that's being called:</p>
  <pre><code>  toLetters(word) {
      console.log(&quot;In&quot;);
      var empty = [];
      for (var i = 0; i &lt; word.length; i++) {
        empty.push(word[i].toLocaleUpperCase());
      }
      return empty;
    }
  </code></pre>
  <p>Could anyone help me out? Thanks!</p>