Action not affect html file

Question

I have problem with ngIf. In my method i changing boolean variable like this:

  switchListGridView() {
    this.viewGrid = !this.viewGrid;
    console.log(this.viewGrid);
  }

In my html it looks like this:

<div
  class="container"
  fxFlex
  fxLayout="row"
  fxLayoutAlign="space-between stretch"
>
  <div class="content" fxFlex fxLayout="row">
    <mat-grid-list *ngIf='this.viewGrid' cols="8" rowHeight="100px" fxFlex>
      <mat-grid-tile
        *ngFor="let element of fileElements"
        class="file-or-folder"
      >
        <span
          [matMenuTriggerFor]="rootMenu"
          [matMenuTriggerData]="{element: element}"
          #menuTrigger="matMenuTrigger"
        >
        </span>
        <div
          fxLayout="column"
          fxLayoutAlign="space-between center"
          (click)="navigate(element)"
          (contextmenu)="openMenu($event, menuTrigger)"
        >
          <mat-icon
            color="primary"
            class="file-or-folder-icon pointer"
            *ngIf="element.isFolder"
          >
            folder
          </mat-icon>
          <mat-icon
            color="primary"
            class="file-or-folder-icon pointer"
            *ngIf="!element.isFolder"
          >
            insert_drive_file
          </mat-icon>

          <span>{{element.name}}</span>
        </div>
      </mat-grid-tile>
    </mat-grid-list>
  </div>
</div>

In my opinion it should work, but after i pressing a button with acction nothing happens. In console log it works fine - showing true false, but ngIf doesn't work. It should works like showing or dissapering whole mat-grid list.

Update 1

Place where button appears:

<mat-toolbar class="toolbar top-menu-position">
  <div class="top-menu-divider"></div>
  <div *ngFor='let item of topMenu'>
    <button *ngIf='!item.seperator' mat-button [disabled]="item.disabled" class="button" [ngClass]="{'pointer': !item.disabled}" [title]="item.tooltip" (click)="item.action()">
      <mat-icon>
        {{item.icon}}
      </mat-icon>
    </button>
    <div *ngIf='item.seperator' class="top-menu-divider"></div>
  </div>
</mat-toolbar>

Button construction in constructor:

{
        tooltip: 'List view',
        icon: 'apps',
        action: this.switchListGridView,
        disabled: false
      }

Edit 2

Stackblitz: https://stackblitz.com/edit/angular-dyfsm3?file=src%2Fapp%2Fapp.component.html

Can you please try with action: this.switchListGridView() this? — Aman Gojariya
Type 'void' is not assignable to type '(element: any) => void'. But i don't getting your point. Action is called, i can see it inside my console. Value changing from false to true and etc. — xavn-mpt

Sam Sam · Accepted Answer · 2020-02-13T10:34:52

You don't need to use variables like that in your HTML. You don't need the this

<mat-grid-list *ngIf="viewGrid" cols="8" rowHeight="100px" fxFlex>

One way to do it

Typescript

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(){
    this.tapList = [
      {
        action: 'tapped'
      }
    ]
  }
  tap = false;
  tapList: TapList[];

  tapped(): void {
    this.tap = !this.tap;
  }

  callFunction(e) {
    if(e == 'tapped') {
      this.tapped();
    }
  }

}
export class TapList {
  action: string
}

HTML

<button (click)="callFunction(item.action)"> TAP </button>

Action not affect html file

Update 1

Edit 2

2 Answers