Угловой 2 нгКласс должен включить Фокус

Question

Изменение класса с помощью ngClass для Angular 2 работает при использовании флажка, но не работает при нажатии на текстовое поле ввода с тем же классом.

Я предполагаю, что синтаксис onFocus не правильный.

посмотрите этот плункер и посмотрите app.component.ts https://plnkr.co/edit/0DeMvJQfY04Da2n4cGBm?p=preview или посмотрите ниже только соответствующий код

Работает: 2-й флажок превращает его в красный. Не работает: установка курсора в поле также должна сделать его красным.

@Component({
  selector: 'my-app',
  template: `
    <div [ngClass]="{ 'wrapper': true, 'wrapper-active': yyy }">

     <div id="log" class="login" >
       <input type="checkbox" [(ngModel)]="xxx">
       <input type="checkbox" [(ngModel)]="yyy">
      <form>
      <input  onfocus="focusFunction()" type="email" [(ngModel)]="email" name="email" />
      </form>
      </div>
  `,
  styles: [`
    .wrapper {
  background-color: blue;
}

.wrapper-active {
  background-color: red;

}
  `]
})
export class AppComponent {
 
}