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

  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">
          <div class="col-12" [innerHTML]="textoInformativo">
      <div class="bloco-lateral__menu">
          <li matTooltip="Ajuda" (click)="toggleBlocoLateral(!flagBlocoLateral)">
            <fa-icon icon="info-circle"></fa-icon>
export class BlocoLateralComponent implements OnInit {

  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?

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.