Angular 6 not call ngClass

I have a component to show a left box. This component changes a public flag “flagBlocoLateral” to identify if this box is visible or not.

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;
  }


}

In my typescript code I’m using my compontent and a public “flagBlocoLateral” property to call ngClass. If I call toggleBlocoLateral inside component, ngClass not working.

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

But if I try print the “flagBlocoLateral” property outside the component (using {{blocoLateral.flagBlocoLateral}}), the attribute ngClass works fine.

Any Ideas?
Thanks.

Source: Angular

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.