Firestore causing ngFor loop to be called repeatedly

Question

I have the following code in my .ts file:

ngOnInit(){
  const firebaseConfig = {
   HIDDEN
  };
  firebase.initializeApp(firebaseConfig);
  const app = firebase.app();
  console.log(app);

  const db = firebase.firestore();
}

and the following code in my .html file:

  <div [(ngModel)]="myInput" ngDefaultControl *ngFor="let word of words; let i = index;" (ionChange)="inputChange($event)">
  <input class = "inputs" readonly (click)="test();endWord(); onFocus($event)" (keyup)="keytab($event, 1)" *ngFor="let letter of toLetters(word);" maxlength = "1" type="text"/>
</div>

For some reason, whenever I include the line of code const db = app.firestore(), the function getLetters() in the ngFor loop gets called repeatedly.

This is the funtion that's being called:

  toLetters(word) {
    console.log("In");
    var empty = [];
    for (var i = 0; i < word.length; i++) {
      empty.push(word[i].toLocaleUpperCase());
    }
    return empty;
  }

Could anyone help me out? Thanks!