Zooming/scaling material table, component and image

  Hi there, many times we need to zoom the content of our page, maybe we want to zoom paragraph or image or even sometimes we want to zoom a hole component. In this post, we are going to do the zooming/scaling of a material table and Image and normal text content. Basically, we are going to use the <div> tag as a wrapper to all the above cases, and we are not going to use any third-party library, we will use styling only. Let us do it.

 (we are using angular 8)


following is the HTML file of our angular component, in this, we have defined three sections. In the first section, we have created a material table that will contain some data and in the second section, we have an image, and In the third section we have added the selector of another component so all the contents of that component will be added there.

 

<div class="row no-gutters">
  <div class="col-12 text-center">
    <label for="Heading" class="form-control">
      Angular - Zooming Angular Material Table,
                Zooming content of hole component and 
                Zooming image
    </label>
  </div>
</div>
<div class="row col-12 justify-content-center">
  <div class="col-4">
      <div class="text-right">
        <span style="float: left;">
          Zooming Table
        </span>
        <button class="btn btn-sm btn-primary ml-1" (click)="zoomPlus('table')">+
</button>
        <button class="btn btn-sm btn-primary ml-2 mr-2" (click)="zoomMinus('table')">
-</button>
      </div>
      <div class="wrapper">
        <div #table class="transform">
          <mat-table #table [dataSource]="dataSource" multiTemplateDataRows>
            <ng-container matColumnDef="rollNo">
              <mat-header-cell *matHeaderCellDef> Roll No </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.rollNo}} </mat-cell>
            </ng-container>
            <ng-container matColumnDef="name">
              <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
            </ng-container>
            <ng-container matColumnDef="marks">
              <mat-header-cell *matHeaderCellDef> Marks </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.marks}} </mat-cell>
            </ng-container>
            <ng-container matColumnDef="standard">
              <mat-header-cell *matHeaderCellDef> Standard </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.standard}} </mat-cell>
            </ng-container>
            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="element-row"></mat-row>
          </mat-table>
        </div>
      </div>
  </div>
  <div class="col-4">
    <div class="text-right">
      <span style="float: left;">
        Zooming Image
      </span>
      <button class="btn btn-sm btn-primary ml-1" (click)="zoomPlus('image')">+
</button>
      <button class="btn btn-sm btn-primary ml-2 mr-2" (click)="zoomMinus('image')">-
</button>
    </div>
    <div class="wrapper">
      <div #image class="transform">
        <img src="/assets/icons/ang.png" alt="ang">
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="text-right">
      <span style="float: left;">
        Zooming Component
      </span>
      <button class="btn btn-sm btn-primary ml-1" (click)="zoomPlus('component')">+
</button>
      <button class="btn btn-sm btn-primary ml-2 mr-2" 
(click)="zoomMinus('component')">-</button>
    </div>
    <div class="wrapper">
      <div #component class="transform">
        <app-sample></app-sample>
      </div>
    </div>
  </div>
</div>

 

In the above code, you can find we have used bootstrap for basic styling also, we have added plus and minus buttons to zoom in and out, you can use mouse-scroll but for simplicity, we have used buttons.

 After HTML let us see the typescript file.  Here we have declared an interface to define the structure of data that will be used to hold the data in a material table, after that we have declared data for a material table.

  As I told you in the first place, we are having three sections for a table, image, and text, etc. here we have used @viewChild decorator to access these sections and ultimately to apply zoom.

  And very important is, zoomPlus and zoomMinus are the functions used to scale the content of div, here we have identified section by accepting the ‘who’ parameter and then simply upscaled /downscaled the content of that div by using the transform property of that div.

 

The following code will make you understand everything.

 

import { ComponentElementRefViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
export interface Student {
  rollNonumber;
  namestring;
  marksnumber;
  standardstring;
}

const dataStudent[] = [
  { rollNo: 1name: 'Ravi'marks: 67standard: '10' },
  { rollNo: 2name: 'Suresh'marks: 56standard: '12' },
  { rollNo: 3name: 'Ram'marks: 99standard: '7' },
  { rollNo: 4name: 'Kapil'marks: 57standard: '9' },
  { rollNo: 5name: 'Raju'marks: 53standard: '9' },
  { rollNo: 6name: 'Nirma'marks: 88standard: '5' },
  { rollNo: 7name: 'Raftar'marks: 46standard: '5' },
  { rollNo: 8name: 'Saina'marks: 57standard: '5' },
  { rollNo: 9name: 'Pule'marks: 76standard: '5' },
  { rollNo: 10name: 'Lava'marks: 87standard: '7' }
];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  @ViewChild('table', { static: true }) tableElementRef;
  @ViewChild('image', { static: true }) imageElementRef;
  @ViewChild('component', { static: true }) componentElementRef;

  tableScale = 1.0;
  imageScale = 1.0;
  componentScale = 1.0;

  displayedColumns = ['rollNo''name''marks''standard'];
  dataSource = new MatTableDataSource<Student>();

  constructor() {
    this.dataSource.data = data;
  }

  zoomPlus(who) {
    switch (who) {
      case 'table':
        this.tableScale = this.tableScale + 0.1;
        this.table.nativeElement.style.transform = 'scale(' + this.tableScale + ')';
        break;
      case 'image':
        this.imageScale = this.imageScale + 0.1;
        this.image.nativeElement.style.transform = 'scale(' + this.imageScale + ')';
        break;
      case 'component':
        this.componentScale = this.componentScale + 0.1;
        this.component.nativeElement.style.transform = 'scale(' + this.componentScale 
')';
        break;
    }
  }

  zoomMinus(who) {
    switch (who) {
      case 'table':
        this.tableScale = this.tableScale - 0.1;
        this.table.nativeElement.style.transform = 'scale(' + this.tableScale + ')';
        break;
      case 'image':
        this.imageScale = this.imageScale - 0.1;
        this.image.nativeElement.style.transform = 'scale(' + this.imageScale + ')';
        break;
      case 'component':
        this.componentScale = this.componentScale - 0.1;
        this.component.nativeElement.style.transform = 'scale(' + this.componentScale 
')';
        break;
    }
  }

}

 

While zooming / scaling, to keep content visible we have fixed transform origin.   

Here is css file

.transform{
  transform-origin0px 0px;
}

.wrapper{
  overflowauto;
}

   

We have not imported anything out of the angular library, here is the module file.

 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule } from '@angular/forms';

import { MatTableModule } from '@angular/material';
import { SampleComponent } from './sample-component/sample.component';

@NgModule({
  declarations: [
    AppComponent,
    SampleComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    MatTableModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

Output

  


 


 

 

And that’s it, 

Hope you like it.

Here you can download the project download here

When you download the project, at the very first run command “npm install”.

Because of the size issue, we are not going to upload the node module folder onwards.

 

Comments

Post a Comment