- Change height of Document Editor
- Change width of Document Editor
- Resize Document Editor
Contact Support
Resize document editor in Angular Document editor component
3 May 20254 minutes to read
In this article, we are going to see how to change height and width of Documenteditor.
Change height of Document Editor
DocumentEditorContainer initially render with default height. You can change height of documenteditor using height
property, the value which is in pixel.
The following example code illustrates how to change height of Document Editor.
import { Component, OnInit } from '@angular/core';
import {
ToolbarService,
} from '@syncfusion/ej2-angular-documenteditor';
@Component({
selector: 'app-root',
// specified the height as 600px
template: `<ejs-documenteditorcontainer #documenteditor_default serviceUrl="https://services.syncfusion.com/angular/production/api/documenteditor/" height="600px" style="display:block" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
providers: [ToolbarService],
})
export class AppComponent implements OnInit {
ngOnInit(): void {
}
}
The Web API hosted link
https://services.syncfusion.com/angular/production/api/documenteditor/
utilized in the Document Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.
Similarly, you can use height
property for DocumentEditor also.
Change width of Document Editor
DocumentEditorContainer initially render with default width. You can change width of documenteditor using width
property, the value which is in percent.
The following example code illustrates how to change width of Document Editor.
import { Component, OnInit } from '@angular/core';
import {
ToolbarService,
} from '@syncfusion/ej2-angular-documenteditor';
@Component({
selector: 'app-root',
// specified the height as 600px
template: `<ejs-documenteditorcontainer #documenteditor_default serviceUrl="https://services.syncfusion.com/angular/production/api/documenteditor/" width="100%" style="display:block" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
providers: [ToolbarService],
})
export class AppComponent implements OnInit {
ngOnInit(): void {
}
}
The Web API hosted link
https://services.syncfusion.com/angular/production/api/documenteditor/
utilized in the Document Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.
Similarly, you can use width
property for DocumentEditor also.
Resize Document Editor
Using resize
method, you change height and width of Document editor.
The following example code illustrates how to fit Document Editor to browser window size.
import { Component, OnInit, ViewChild } from '@angular/core';
import {
DocumentEditorContainerComponent,
ToolbarService,
} from '@syncfusion/ej2-angular-documenteditor';
@Component({
selector: 'app-root',
// specifies the template string for the DocumentEditorContainer component
template: `<ejs-documenteditorcontainer #documenteditor_default serviceUrl="https://services.syncfusion.com/angular/production/api/documenteditor/" height="600px" style="display:block" [enableToolbar]=true (created)="onCreate()"> </ejs-documenteditorcontainer>`,
providers: [ToolbarService],
})
export class AppComponent implements OnInit {
@ViewChild('documenteditor_default')
public container: DocumentEditorContainerComponent;
ngOnInit(): void {}
onCreate(): void {
setInterval(() => {
this.updateDocumentEditorSize();
}, 100);
//Adds event listener for browser window resize event.
window.addEventListener('resize', this.onWindowResize.bind(this));
}
onWindowResize() {
//Resizes the document editor component to fit full browser window automatically whenever the browser resized.
this.updateDocumentEditorSize();
}
updateDocumentEditorSize() {
//Resizes the document editor component to fit full browser window.
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
this.container.resize(windowWidth, windowHeight);
}
}
The Web API hosted link
https://services.syncfusion.com/angular/production/api/documenteditor/
utilized in the Document Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.