This section describes the Linear Gauge component’s event that gets triggered when corresponding operations are performed.
When the pointer animation is completed, the animationComplete
event will be triggered. To know more about the arguments of this event, refer here.
import { Component } from '@angular/core';
import { LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
import { IAnimationCompleteEventArgs } from '@syncfusion/ej2-lineargauge';
@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container" (animationComplete)='animationComplete($event)'>
<e-axes>
<e-axis>
<e-pointers>
<e-pointer value=10></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-lineargauge>`
})
export class AppComponent {
animationComplete(args: IAnimationCompleteEventArgs) {
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, LinearGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Before the annotation is rendered in the Linear Gauge, the annotationRender
event will be triggered. To know more about the arguments of this event, refer here.
import { Component } from '@angular/core';
import { AnnotationsService, LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
import { IAnnotationRenderEventArgs } from '@syncfusion/ej2-lineargauge';
@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container" (annotationRender)='annotationRender($event)'>
<e-annotations>
<e-annotation zIndex='1' content='<div id="first"><h1>Gauge</h1></div>' axisValue=0></e-annotation>
</e-annotations>
</ejs-lineargauge>`,
providers: [AnnotationsService]
})
export class AppComponent {
annotationRender(args: IAnnotationRenderEventArgs) {
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, LinearGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Before each axis label is rendered in the Linear Gauge, the axisLabelRender
event is fired. To know more about the arguments of this event, refer here.
import { Component } from '@angular/core';
import { LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
import { IAxisLabelRenderEventArgs } from '@syncfusion/ej2-lineargauge';
@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container" (axisLabelRender)='axisLabelRender($event)'>
</ejs-lineargauge>`
})
export class AppComponent {
axisLabelRender(args: IAxisLabelRenderEventArgs) {
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, LinearGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The beforePrint
event is fired before the print begins. To know more about the arguments of this event, refer here.
import { Component, ViewChild } from '@angular/core';
import { PrintService, LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
import { IPrintEventArgs } from '@syncfusion/ej2-lineargauge';
@Component({
selector: 'app-container',
template: `
<div><button id='print' (click)='print()'>Print</button></div>
<ejs-lineargauge id="gauge-container" [allowPrint]=true (beforePrint)='beforePrint($event)' #gauge>
</ejs-lineargauge>`,
providers: [PrintService]
})
export class AppComponent {
@ViewChild('gauge')
public gaugeObj: LinearGaugeComponent;
print() {
this.gaugeObj.print();
};
beforePrint(args: IPrintEventArgs) {
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, LinearGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The dragEnd
event will be fired before the pointer drag is completed. To know more about the argument of this event, refer here.
import { Component } from '@angular/core';
import { LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
import { IPointerDragEventArgs } from '@syncfusion/ej2-lineargauge';
@Component({
selector: 'app-container',
template: `
<ejs-lineargauge style="display:block" id="gauge-container" (dragEnd)='dragEnd($event)'>
<e-axes>
<e-axis>
<e-pointers>
<e-pointer enableDrag=true></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-lineargauge>`
})
export class AppComponent {
dragEnd(args: IPointerDragEventArgs) {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, LinearGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The dragMove
event will be fired when the pointer is dragged. To know more about the arguments of this event, refer here.
import { Component } from '@angular/core';
import { LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
import { IPointerDragEventArgs } from '@syncfusion/ej2-lineargauge';
@Component({
selector: 'app-container',
template: `
<ejs-lineargauge style="display:block" id="gauge-container" (dragMove)='dragMove($event)'>
<e-axes>
<e-axis>
<e-pointers>
<e-pointer enableDrag=true></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-lineargauge>`
})
export class AppComponent {
dragMove(args: IPointerDragEventArgs) {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, LinearGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
When the pointer drag begins, the dragStart
event is triggered. To know more about the arguments of this event, refer here.
import { Component } from '@angular/core';
import { LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
import { IPointerDragEventArgs } from '@syncfusion/ej2-lineargauge';
@Component({
selector: 'app-container',
template: `
<ejs-lineargauge style="display:block" id="gauge-container" (dragStart)='dragStart($event)'>
<e-axes>
<e-axis>
<e-pointers>
<e-pointer enableDrag=true></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-lineargauge>`
})
export class AppComponent {
dragStart(args: IPointerDragEventArgs) {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, LinearGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
When mouse is pressed down on the gauge, the gaugeMouseDown
event is triggered. To know more about the arguments of this event, refer here.
import { Component } from '@angular/core';
import { LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
import { IMouseEventArgs } from '@syncfusion/ej2-lineargauge';
@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container" (gaugeMouseDown)='gaugeMouseDown($event)'>
</ejs-lineargauge>`
})
export class AppComponent {
gaugeMouseDown(args: IMouseEventArgs) {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, LinearGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
When mouse pointer moves over the gauge, the gaugemouseleave
event is triggered. To know more about the arguments of this event, refer here.
import { Component } from '@angular/core';
import { LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
import { IMouseEventArgs } from '@syncfusion/ej2-lineargauge';
@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container" (gaugeMouseLeave)='gaugeMouseLeave($event)'>
</ejs-lineargauge>`
})
export class AppComponent {
gaugeMouseLeave(args: IMouseEventArgs) {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, LinearGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
When mouse pointer leaves the gauge, the gaugeMouseMove
event is triggered. To know more about the arguments of this event, refer here.
import { Component } from '@angular/core';
import { LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
import { IMouseEventArgs } from '@syncfusion/ej2-lineargauge';
@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container" (gaugeMouseMove)='gaugeMouseMove($event)'>
</ejs-lineargauge>`
})
export class AppComponent {
gaugeMouseMove(args: IMouseEventArgs) {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, LinearGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
When the mouse pointer is released over the Linear Gauge, the gaugeMouseUp
event is triggered. To know more about the arguments of this event, refer here.
import { Component } from '@angular/core';
import { LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
import { IMouseEventArgs } from '@syncfusion/ej2-lineargauge';
@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container" (gaugeMouseUp)='gaugeMouseUp($event)'>
</ejs-lineargauge>`
})
export class AppComponent {
gaugeMouseUp(args: IMouseEventArgs) {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, LinearGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Before the Linear Gauge is loaded, the load
event is fired. To know more about the arguments of this event, refer here.
import { Component } from '@angular/core';
import { LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
import { ILoadEventArgs } from '@syncfusion/ej2-lineargauge';
@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container" (load)='load($event)'>
</ejs-lineargauge>`
})
export class AppComponent {
load(args: ILoadEventArgs) {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, LinearGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
After the Linear Gauge has been loaded, the loaded
event will be triggered. To know more about the arguments of this event, refer here.
import { Component } from '@angular/core';
import { LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
import { ILoadedEventArgs } from '@syncfusion/ej2-lineargauge';
@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container" (loaded)='loaded($event)'>
</ejs-lineargauge>`
})
export class AppComponent {
loaded(args: ILoadedEventArgs) {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, LinearGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
After the window resizing, the resized
event is triggered. To know more about the arguments of this event, refer here.
import { Component } from '@angular/core';
import { LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
import { IResizeEventArgs } from '@syncfusion/ej2-lineargauge';
@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container" (resized)='resized($event)'>
</ejs-lineargauge>`
})
export class AppComponent {
resized(args: IResizeEventArgs) {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, LinearGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The tooltipRender
event is fired before the tooltip is rendered. To know more about the arguments of this event, refer here.
import { Component } from '@angular/core';
import { LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
import { ITooltipRenderEventArgs } from '@syncfusion/ej2-lineargauge';
@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container" (tooltipRender)='tooltipRender($event)'>
</ejs-lineargauge>`
})
export class AppComponent {
tooltipRender(args: ITooltipRenderEventArgs) {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, LinearGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The valueChange
event is triggered when the pointer is dragged from one value to another. To know more about the arguments of this event, refer here.
import { Component } from '@angular/core';
import { LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
import { IValueChangeEventArgs } from '@syncfusion/ej2-lineargauge';
@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container" (valueChange)='valueChange($event)'>
<e-axes>
<e-axis>
<e-pointers>
<e-pointer value=40 enableDrag=true></e-pointer>
</e-pointers>
</e-axis>
</e-axes>
</ejs-lineargauge>`
})
export class AppComponent {
valueChange(args: IValueChangeEventArgs) {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, LinearGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ GaugeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);