html - Angular 6 - Hvordan deaktivere en div basert på en betingelse

Jeg har en div som vil utvide seg når jeg klikker på en knapp. Igjen, når jeg klikker på div'en, vil den være klikkbar eller en alert vil komme, men når jeg klikker på den utvidede (100%) visningen, skal den ikke være klikkbar, den skal være som deaktivert. Igjen, når jeg går tilbake til forrige (25%) visning, skal div'en være klikkbar. Kan noen vennligst hjelpe meg? Her er koden nedenfor

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

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

Svar #1

Prøv dette:

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

i CSS:

.disabled {
  cursor: not-allowed;
}

Arbeidende demo

Svar #2

Endre filene dine som skrevet nedenfor:

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

}

Og din HTML-fil: