title: Angular 6 - How to disable a div based on condition
body: <p>I have a div which will expand onclick a button,again when I click on the div, it will be clickable or alert will come,but when I click on expanded(100%) view it should not be clickable,it should be like disable.Again when I returned to previous(25%) view the div should be clickable.Can any one please help me.
  Here is the code below</p>
  
  <h2>app.component.html</h2>
  
  <pre><code>&lt;button (click)="change()"&gt;change&lt;/button&gt;
  &lt;div (click)="expand()" [ngClass]="{'old': toggle, 'new': !toggle}"class="old"&gt;
    Hello
  &lt;/div&gt;
  </code></pre>
  
  <h2>app.component.ts</h2>
  
  <pre><code>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');
    }
  }
  </code></pre>
  
  <h2>style.css</h2>
  
  <pre><code>.old{
      width:25%;
      border:1px solid;
      height:200px;
      cursor:pointer;
      background:yellow;
  }
  .new{
      width:100%;
      border:1px solid;
      height:200px;
      cursor:pointer;
      background:green;
  }
  </code></pre>