title: how to toggle full screen on click
body: <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, ElementRef } from '@angular/core';
  declare var JQuery : any; 
  
  @Component({
    selector: 'app-presentation',
    templateUrl: './presentation.component.html',
    styleUrls: ['./presentation.component.scss']
  })
  export class PresentationComponent implements OnInit {
  
    public count=0;
    public imgUrl ='http://192.168.1.90:8080/pdf/temp';
  
    constructor( public _eleRef : ElementRef ) {
      this.count=0
      this.imgUrl='http://192.168.1.90:8080/pdf/temp'+this.count+".jpg"
     }
  
    ngOnInit() {
      jQuery(this._eleRef.nativeElement).find('#Fullscreen').on('click',function(){
          jQuery('#exampleImage').width(jQuery(window).width());
          jQuery('#exampleImage').height(jQuery(window).height());
       });
    }
  
    back(){this.count--;
      if(this.count&gt;=0 &amp;&amp; this.count&lt;13){
      
      this.imgUrl='http://192.168.1.90:8080/pdf/temp'+this.count+".jpg"
      // this.imgUrl = 'http://wallpaperdj.com/wallpapers/like_leaves_in_the_wind-1600x900.jpg';
      }
       else{
        this.count++;
      }
    }
  
    next(){this.count++;
       if(this.count&gt;=0 &amp;&amp; this.count&lt;13){
      
      this.imgUrl='http://192.168.1.90:8080/pdf/temp'+this.count+".jpg"
       }
      else{
        this.count--;
      }
    }
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slide-control {
      z-index: 5;
      background-color: #323232;
      overflow: hidden;
      border: 0;
      padding: 0;
      width: 100%;
      color: #fff;
      font-size: 13px;
      max-height: 56px;
      min-height: 50px;
      ///text-align: center;
  }
  
  .control {
      font-size: 20px;
      padding: 10px;
      cursor: pointer;
  }
  
  .slide-control #fullscreen {
      float: right !important;
  }
  
  .imageArea {
      background-color: #e5e5e5;
      border: 1px inset #323232;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row imageArea"&gt;
      &lt;div class="mx-auto"&gt;
          &lt;img [src]="imgUrl" id="exampleImage" class="img-fluid" alt="Responsive image"&gt;
      &lt;/div&gt;
      &lt;div class="slide-control form-inline"&gt;
          &lt;div class="mx-auto"&gt;
              &lt;span class="control" (click)="back(count)"&gt;&lt;i class="fa fa-arrow-left" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;span&gt;{{count+1}} / 13&lt;/span&gt;
              &lt;span class="control" (click)="next(count)"&gt;&lt;i class="fa fa-arrow-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="fullscreen float-right"&gt;
              &lt;span class="control" id="Fullscreen"&gt;&lt;i class="fa fa-arrows-alt text-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>hello i am designing my own presentation viewer using Angular 2. i have one fullscreen button when i click on that button it zoom my image equal to my container div size. but i want to make that button toggle. that means when i click on that button again it should display my zoom image as its orignal size when page loaded (before zoom size). </p>