title: how to show/hide maximize/minimize button in custom titlebar in electron
body: <p>So far I made a custom titlebar in electron (using angular 9) added those buttons to the html and click events respectively to minimize, maximize, restore or close the window. Now problem arises when user either double click the title bar( since css property is set as <code>-webkit-app-region: drag</code>) or user uses window snap feature to maximize the window. For, double click I thought of using dblclick event in angular but still failed. So, how can I address this problem ?</p>
  
  <p>titlebar.component.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="titlebar" *ngIf="showTitleBar" (dblclick)="dblFunction()"&gt;
     
     &lt;div class="navigation"&gt;
        &lt;a class="normal-button material-icons" *ngIf="showBackButton"&gt;arrow_back&lt;/a&gt;
        &lt;div class="appTitle"&gt;{{title}}&lt;/div&gt;
     &lt;/div&gt;
     
     &lt;div class="wincontrol"&gt;
        &lt;a class="normal-button material-icons" (click)="minimize()"&gt;remove&lt;/a&gt;
        &lt;a class="normal-button material-icons" *ngIf="showMaxButton ; else showResButton" (click)="maximize()"&gt;crop_square&lt;/a&gt;
        &lt;ng-template #showResButton&gt;
           &lt;a class="normal-button material-icons" id="restore" (click)="restore()"&gt;flip_to_front&lt;/a&gt;
        &lt;/ng-template&gt;
        &lt;a class="close-button material-icons" (click)="close()"&gt;clear&lt;/a&gt;
     &lt;/div&gt;
     
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>titlebar.component.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { WindowService } from 'src/app/services/window.service';
  import { ElectronhelperService } from 'src/app/services/electronhelper.service';
  
  @Component({
    selector: 'app-titlebar',
    templateUrl: './titlebar.component.html',
    styleUrls: ['./titlebar.component.scss']
  })
  export class TitlebarComponent implements OnInit {
    title = 'Electron-App' ;
    showMaxButton ;
    showTitleBar = true ;
    showBackButton = false ;
  
    constructor(private win: WindowService, private helper: ElectronhelperService){
      this.showMaxButton = !this.win.winSettings.wasMaximized ;
    }
  
    ngOnInit(): void {
    }
  
    minimize(){
      this.win.sendMinimize() ;
    }
  
    maximize(){
      this.showMaxButton = !this.showMaxButton ;
      this.win.sendMaximize() ;
    }
  
    restore(){
      this.showMaxButton = !this.showMaxButton ;
      this.win.sendRestore() ;
    }
  
    close(){
      this.win.sendClose() ;
    }
  
    dblFunction(){
      console.log('dbl clicked')
      this.showMaxButton = !this.showMaxButton ;
    }
  }</code></pre>
  </div>
  </div>
  </p>