*ngIf não funciona

Boa tarde, Eduardo! Como vai?

Só com o seu HTML fica difícil dizer o problema. Cole aqui as classes dos seus componentes citados para que eu possa dar uma olhada e tentar te ajudar.

Gabriel, eu resolvi colocando tudo em um componente só. Mas não sei se é o correto. Chegando em casa, posso colocar tudo aqui pra você entender melhor.

Sendo componentes diferentes o ideal é não colocar tudo dentro de um só componente. Manda aí o código quando vc puder que a gente tenta fazer o código funcionar de um modo mais elegante!

Até lá!

É que estou criando um dashboard para o sistema da empresa que trabalho.

Eu criei um component chamado dashboard, nesse component criei mais dois componentes, o primeiro é o menu, que será quatro caixas com informações dentro, ao clicar nas caixas (que são divs estilizadas por mim) no componente menu, trocaria a div que está aparecendo no segundo componente, que é o componente gráficos. Ele teria 4 divs, cada uma com um gráfico, e dependendo em qual caixa do menu você clicar, esconderia ou apareceria a div correspondente no componente gráfico.

As variáveis booleanas usada no *ngIf eu consigo trocar elas de true pra false ou vice-versa, só que as divs não somem nem desaparece.

Depois vou tentar colocar fotos pra entender melhor o que eu estou dizendo.

Eduardo, segue o exemplo que fiz aqui:

// grafico.module.ts

@NgModule({
    declarations: [
      GraficoComponent,
    ],
    imports: [
      CommonModule  // Necessário para usar o *ngIf! Importar de @angular/common
    ],
    exports: [
      GraficoComponent
    ],
    providers: []
  })
  export class GraficoModule { }

// grafico.component.ts

@Component({
  selector: 'app-grafico',
  templateUrl: './grafico.component.html'
})
export class GraficoComponent {

  @Input() tipo;

}

<!-- grafico.component.html -->

<div *ngIf="tipo == 1">gráfico 1</div>
<div *ngIf="tipo == 2">gráfico 2</div>
<div *ngIf="tipo == 3">gráfico 3</div>

// menu.module.ts

@NgModule({
    declarations: [
      MenuComponent
    ],
    exports: [
      MenuComponent
    ],
    providers: []
  })
  export class MenuModule { }

// menu.component.ts

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html'
})
export class MenuComponent {

  @Output() graficoSelecionado: EventEmitter<number>  = 
    new EventEmitter();

  selecionaGrafico(graficoId) {
    this.graficoSelecionado.emit(graficoId);
  }
}

<!-- menu.component.html -->

<button (click)="selecionaGrafico(1)">Gráfico 1</button>
<button (click)="selecionaGrafico(2)">Gráfico 2</button>
<button (click)="selecionaGrafico(3)">Gráfico 3</button>

// dashboard.module.ts

@NgModule({
    declarations: [
      DashboardComponent
    ],
    exports: [
      DashboardComponent
    ],
    imports: [
      MenuModule,
      GraficoModule
    ],
    providers: []
  })
  export class DashboardModule { }

// dashboard.component.ts

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html'
})
export class DashboardComponent {

  graficoId = 1;

  alteraGrafico(graficoId) {
    this.graficoId = graficoId;
  }
}

<!-- dashboard.component.html -->

<app-menu (graficoSelecionado)="alteraGrafico($event)"></app-menu>
<app-grafico [tipo]="graficoId"></app-grafico>

// app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DashboardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {

<!-- app.component.html -->

<app-dashboard></app-dashboard>

Veja que essa é uma solução bem elegante e totalmente componentizada e desacoplada uma vez que os componentes app-menu e app-grafico não se conhecem e não dependem um do outro. Claro que as escolha dos números que eu estou passando para identificar os gráficos é totalmente questionável e não deve ser aplicada na vida real, no entanto, fiz dessa forma simples apenas de forma didática.

Qualquer dúvida sobre a solução que implementei é só falar! Diz aí, o que achou? Bacana, né?

Grande abraço e bons estudos!