html - Angular 6 - Como desabilitar um div com base em uma condição

Eu tenho uma div que vai expandir ao clicar em um botão. Novamente, quando eu clico na div, ela será clicável ou um alerta aparecerá, mas quando eu clicar na visualização expandida (100%), ela não deve ser clicável, deve ser como desativada. Novamente, quando eu retornar para a visualização anterior (25%), a div deve ser clicável. Alguém pode me ajudar, por favor? Aqui está o código abaixo

app.component.html

<button (click)="change()">change</button>
<div (click)="expand()" [ngClass]="{'old': toggle, 'new': !toggle}"class="old">
  Hello
</div>

app.component.ts

declare var require: any;
import { Component,OnInit, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
    toggle:boolean = true;
  ngOnInit(){

  }
change(){
    this.toggle = !this.toggle;
  }
expand(){
    alert('hi');
  }
}

estilo.css

.old{
    width:25%;
    border:1px solid;
    height:200px;
    cursor:pointer;
    background:yellow;
}
.new{
    width:100%;
    border:1px solid;
    height:200px;
    cursor:pointer;
    background:green;
}

Resposta #1

Tente isto:

<button (click)="change()">change</button>
<div  [class.disabled]="!toggle"  (click)="toggle && expand()" [ngClass]="{'old': toggle, 'new': !toggle}"class="old">
  Hello
</div>

em CSS:

.disabled {
  cursor: not-allowed;
}

Demonstração Funcional

Resposta #2

Altere seus arquivos como escrito abaixo:

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

@Component({
  selector: 'my-app',
  styleUrls: ['./app.component.scss'],
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {

  public toggle: boolean = true;

  ngOnInit(): void {

  }

  public change(): void {
    this.toggle = !this.toggle;
  }

  public expand(): void {
    if (this.toggle) {
      alert('hi');
    }
  }

}

E seu arquivo html: