import { Component, OnInit, Input } from '@angular/core';
import { Mage } from '../model/mage.model';
import { SpellBook } from '../model/spellbook.model';
import { Spell } from '../model/spell.model';

@Component({
  selector: 'app-spell-dialog-modal',
  templateUrl: './spell-dialog-modal.component.html',
  styleUrls: ['./spell-dialog-modal.component.css']
})
export class SpellDialogModalComponent implements OnInit {

  @Input() userMage : Mage;

  currentSchool: string;
  schoolFilter: Array<string>;

  constructor() {
    this.schoolFilter = SpellBook.schools;
    this.schoolFilter.push('All');

    this.currentSchool = 'All';
  }

  ngOnInit() {
    if(this.userMage== null){
      this.userMage = new Mage();
    }

  }

  getAvailableSpells(): Array<Spell>{
    if(this.currentSchool == 'All')
    {
      return SpellBook.spells;
    }
    else
    {
      return SpellBook.spells.filter(x=>(x.school == this.currentSchool));
    }
  }

  getSchools(): Array<string>{
    return this.schoolFilter;
  }

  addSpell(spell: Spell){
    this.userMage.addSpellToCollection(spell);
  }

}

import { Component, OnInit, Input } from '@angular/core';
import { Mage } from '../model/mage.model';
import { SpellBook } from '../model/spellbook.model';
import { Spell } from '../model/spell.model';

@Component({
  selector: 'app-spell-dialog-modal',
  templateUrl: './spell-dialog-modal.component.html',
  styleUrls: ['./spell-dialog-modal.component.css']
})
export class SpellDialogModalComponent implements OnInit {

  @Input() userMage : Mage;

  public currentSchool: string;

  constructor() {
    this.currentSchool = "";
  }

  ngOnInit() {
    if(this.userMage== null){
      this.userMage = new Mage();
    }

  }

  getAvailableSpells(): Array<Spell>{
    if(this.currentSchool == '')
    {
      return SpellBook.spells;
    }
    else
    {
      return SpellBook.spells.filter(this.spellSchoolMatchesSelectedSchoold);
    }
  }

  getSchools(): Array<string>{
    return SpellBook.schools;
  }

  addSpell(spell: Spell){
    this.userMage.addSpellToCollection(spell);
  }

  spellSchoolMatchesSelectedSchoold(value: Spell) : boolean {
    if(value.school == this.currentSchool)
    {
      return true;
    }
    else
    {
      return false;
    }
  }
}

--- 
+++ 
@@ -12,10 +12,14 @@
 
   @Input() userMage : Mage;
 
-  public currentSchool: string;
+  currentSchool: string;
+  schoolFilter: Array<string>;
 
   constructor() {
-    this.currentSchool = "";
+    this.schoolFilter = SpellBook.schools;
+    this.schoolFilter.push('All');
+
+    this.currentSchool = 'All';
   }
 
   ngOnInit() {
@@ -26,32 +30,22 @@
   }
 
   getAvailableSpells(): Array<Spell>{
-    if(this.currentSchool == '')
+    if(this.currentSchool == 'All')
     {
       return SpellBook.spells;
     }
     else
     {
-      return SpellBook.spells.filter(this.spellSchoolMatchesSelectedSchoold);
+      return SpellBook.spells.filter(x=>(x.school == this.currentSchool));
     }
   }
 
   getSchools(): Array<string>{
-    return SpellBook.schools;
+    return this.schoolFilter;
   }
 
   addSpell(spell: Spell){
     this.userMage.addSpellToCollection(spell);
   }
 
-  spellSchoolMatchesSelectedSchoold(value: Spell) : boolean {
-    if(value.school == this.currentSchool)
-    {
-      return true;
-    }
-    else
-    {
-      return false;
-    }
-  }
 }
Fix for Spell School filter

Anonymous function works becuase it's in scope, which the called
function was not.
