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 { Component, ElementRef, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
export interface Student {
rollNo: number;
name: string;
marks: number;
standard: string;
}
const data: Student[] = [
{ rollNo: 1, name: 'Ravi', marks: 67, standard: '10' },
{ rollNo: 2, name: 'Suresh', marks: 56, standard: '12' },
{ rollNo: 3, name: 'Ram', marks: 99, standard: '7' },
{ rollNo: 4, name: 'Kapil', marks: 57, standard: '9' },
{ rollNo: 5, name: 'Raju', marks: 53, standard: '9' },
{ rollNo: 6, name: 'Nirma', marks: 88, standard: '5' },
{ rollNo: 7, name: 'Raftar', marks: 46, standard: '5' },
{ rollNo: 8, name: 'Saina', marks: 57, standard: '5' },
{ rollNo: 9, name: 'Pule', marks: 76, standard: '5' },
{ rollNo: 10, name: 'Lava', marks: 87, standard: '7' }
];
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
@ViewChild('table', { static: true }) table: ElementRef;
@ViewChild('image', { static: true }) image: ElementRef;
@ViewChild('component', { static: true }) component: ElementRef;
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-origin: 0px 0px;
}
.wrapper{
overflow: auto;
}
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