CODEWITHSUNDEEP
javascriptjquerycssangularangular2-template
lakhan khandelwal
lakhan khandelwal

Reputation: 37

Toggle width & height of image

import { Component, OnInit, ElementRef, Input, ViewChild, Output, EventEmitter } from '@angular/core';
declare var JQuery: any; 


export class PresentationComponent implements OnInit {

constructor( public _eleRef : ElementRef,public CommonComponentService:CommonComponentService ) {
   }
   ngOnInit() {
jQuery(this._eleRef.nativeElement).find('#Fullscreen').on('click',function(){
        jQuery('#exampleImage').width(jQuery(window).width());
        jQuery('#exampleImage').height(jQuery(window).height());
     });
     
  }
}
.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;
}

.resize {
    width: 100%;
}
<div class="row imageArea">
    <div class="mx-auto">
        <img [src]="newUrl" id="exampleImage" class="img-fluid" alt="Responsive image">
    </div>
    <div class="slide-control form-inline">
        <div *ngIf="!buttonShowFlag" class="mx-auto">
            <span class="control" (click)="back()"><i class="fa fa-arrow-left" aria-hidden="true"></i></span>
            <span>{{count+1}} / {{finalCount}}</span>
            <span class="control" (click)="next()"><i class="fa fa-arrow-right" aria-hidden="true"></i></span>
        </div>
        <div class="mx-auto" *ngIf="buttonShowFlag">
            <button (click)="cfuModal.show()" class="btn">{{'Stepper.Next' | translate}}</button>
        </div>

        <div class="fullscreen float-right">
            <span class="control" id="download" *ngIf="download"><a href={{downloadLink}} download><i class="fa fa-download" aria-hidden="true"></i></a></span>
            <span class="control" id="Fullscreen"><i class="fa fa-arrows-alt text-right" aria-hidden="true"></i></span>
        </div>
    </div>
</div>

hello i am using angular 2. i am design my own image viewer with custom controls. there is one full-screen button available . i want to make my image to be full-screen on click of that button & when i again click on that button it should go to previous state means i want to make my it toggle. i am embedding jquery in angular 2. when i click on that it makes my image full-screen but how can i make it toggle.

Upvotes: 0

Views: 526

Answers (2)

Rafael Gil
Rafael Gil

Reputation: 161

Instead of jQuery you could bind the height and width of the image with [style.height] and [style.width] as the example:

 <img [src]="newUrl" [style.width]="imageWidth" [style.height]="imageHeight" id="exampleImage" class="img-fluid" alt="Responsive image">

and in the button event toggle the size of the image:

btnEventToggle(){
 this.flagFullScreen = !this.flagFullScreen;
 if(this.flagFullScreen)
 {
   this.imageHeight = (window.screen.height); //or $window.innerHeight
   this.imageWidth = (window.screen.width);
 }
 else{
   this.imageHeight = originalHeight;
   this.imageWidth = originalWidth;
 }
}

Another option is to bind the element to the angular and treat the element entirely:

<img [src]="newUrl" #imgToggled id="exampleImage" class="img-fluid" alt="Responsive image">

and send the element in the click event: (click)="btnEventToggle(imgToggled)", but it is not advised.

Upvotes: 0

Veena K. Suresh
Veena K. Suresh

Reputation: 1002

This works for me, pls try

In your html,

<div class="row imageArea">
  <button (click)="toggleMe()">Toggle Me</button>
    <div class="mx-auto">
        <img src="http://gkreading.com/wp-content/uploads/2017/03/awesome-kid-in-the-grass.jpg" id="exampleImage" [ngStyle]="{'width':myWidth,'height':myHeight}"class="img-fluid" alt="Responsive image">
    </div>
</div>

In your component.ts file,

export class AppComponent { 

  private contact:Contacts;
  private myWidth:any = 100+"px";
  private myHeight:any = 100+"px";
  private toggled:boolean = false;

  private toggleMe(){
    if(this.toggled == false ){
      this.myWidth = (window.screen.width) + "px";
      this.myHeight = (window.screen.height) + "px";
    }else{
      this.myWidth = 100 + "px";
      this.myHeight = 100 + "px";
    }
    this.toggled = !this.toggled;
  }
}

For getting the screen height and width, you dont want to use any jquery code. Hope this helps.

Upvotes: 1

Related Questions