Angular 6 не вызывает ngClass

У меня есть компонент для отображения левого окна. Этот компонент изменяет общедоступный флаг «flagBlocoLateral», чтобы определить, является ли это поле видимым или нет.

import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'app-bloco-lateral',
  template: `
    <div class = "bloco-lateral" [ngClass] = "{'bloco-lateral--aberto':flagBlocoLateral}">
      <div class = "bloco-lateral__conteudo" *ngIf = "flagBlocoLateral">
        <div class = "row">
          <div class = "col-12">
            <h4>Ajuda</h4>
          </div>
          <div class = "col-12" [innerHTML] = "textoInformativo">
          </div>
        </div>
      </div>
      <div class = "bloco-lateral__menu">
        <ul>
          <li matTooltip = "Ajuda" (click) = "toggleBlocoLateral(!flagBlocoLateral)">
            <fa-icon icon = "info-circle"></fa-icon>
          </li>
        </ul>
      </div>
    </div>`
})
export class BlocoLateralComponent implements OnInit {

  @Input()
  textoInformativo: string;
  flagBlocoLateral = false;

  constructor() {
  }

  ngOnInit() {
  }

  toggleBlocoLateral(flag) {
    this.flagBlocoLateral = flag;
  }


}

В моем машинописном коде я использую свой компонент и общедоступное свойство flagBlocoLateral для вызова ngClass. Если я вызываю toggleBlocoLateral внутри компонента, ngClass не работает.

<app-bloco-lateral #blocoLateral></app-bloco-lateral>
<div class = "bloco-central" [ngClass] = "blocoLateral.flagBlocoLateral ? 'bloco-central--resize':''">

Но если я попытаюсь распечатать свойство flagBlocoLateral вне компонента (используя {{blocoLateral.flagBlocoLateral}}), атрибут ngClass будет работать нормально.

Любые идеи? Спасибо.