Working with Paragraph Formatting

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import {
    DocumentEditorComponent, EditorService, SelectionService, EditorHistoryService , SfdtExportService, ContextMenuService
} from '@syncfusion/ej2-angular-documenteditor';

@Component({
    selector: 'app-container',
    styleUrls: ['styles.css'],
    template: `<div style="width:100%;height:330px">
    <div>
        <ejs-toolbar (clicked)='toolbarButtonClick($event)'>
            <e-items>
                <e-item prefixIcon='e-de-icon-AlignLeft' id='AlignLeft' tooltipText='Align Left'></e-item>
                <e-item prefixIcon='e-de-icon-AlignCenter' id='AlignCenter' tooltipText='AlignCenter'></e-item>
                <e-item prefixIcon='e-de-icon-AlignRight' id='AlignRight' tooltipText='AlignRight'></e-item>
                <e-item prefixIcon='e-de-icon-Justify' id='Justify' tooltipText='Justify'></e-item>
                <e-item prefixIcon='e-de-icon-IncreaseIndent' id='IncreaseIndent' tooltipText='Increase Indent'></e-item>
                <e-item prefixIcon='e-de-icon-DecreaseIndent' id='DecreaseIndent' tooltipText='Decrease Indent'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-de-icon-ClearAll' id='ClearFormat' tooltipText='ClearFormatting'></e-item>
            </e-items>
        </ejs-toolbar>
      </div>
  <ejs-documenteditor #document_editor (selectionChange)='onSelectionChange()' [enableSelection]='true' [isReadOnly]='false' [enableEditor]=true [enableEditorHistory]=true [enableSfdtExport]=true [enableContextMenu]=true style="display:block;width: 100%;height: 100%;"></ejs-documenteditor>
    </div>`,
    encapsulation: ViewEncapsulation.None,
    providers:[EditorService, SelectionService, EditorHistoryService , SfdtExportService, ContextMenuService]
})

export class AppComponent {
 @ViewChild('document_editor')
 public documentEditor: DocumentEditorComponent;

public toolbarButtonClick(arg: any) {
    switch (arg.item.id) {
        case 'AlignLeft':
            //Toggle the Left alignment for selected or current paragraph
            this.documentEditor.editor.toggleTextAlignment('Left');
            break;
        case 'AlignRight':
            //Toggle the Right alignment for selected or current paragraph
            this.documentEditor.editor.toggleTextAlignment('Right');
            break;
        case 'AlignCenter':
            //Toggle the Center alignment for selected or current paragraph
            this.documentEditor.editor.toggleTextAlignment('Center');
            break;
        case 'Justify':
            //Toggle the Justify alignment for selected or current paragraph
            this.documentEditor.editor.toggleTextAlignment('Justify');
            break;
        case 'IncreaseIndent':
            //Increase the left indent of selected or current paragraph
            this.documentEditor.editor.increaseIndent();
            break;
        case 'DecreaseIndent':
            //Decrease the left indent of selected or current paragraph
            this.documentEditor.editor.decreaseIndent();
            break;
        case 'ClearFormat':
            this.documentEditor.editor.clearFormatting();
            break;
    }
}

// Selection change to retrieve formatting
public onSelectionChange() {
    if (this.documentEditor.selection) {
        var paragraphFormat = this.documentEditor.selection.paragraphFormat;
        var toggleBtnId = ['AlignLeft', 'AlignCenter', 'AlignRight', 'Justify'];
        for (var i = 0; i < toggleBtnId.length; i++) {
            let toggleBtn: HTMLElement = document.getElementById(toggleBtnId[i]);
            toggleBtn.classList.remove('e-btn-toggle');
        }
        if (paragraphFormat.textAlignment === 'Left') {
            document.getElementById('AlignLeft').classList.add('e-btn-toggle');
        } else if (paragraphFormat.textAlignment === 'Right') {
            document.getElementById('AlignRight').classList.add('e-btn-toggle');
        } else if (paragraphFormat.textAlignment === 'Center') {
            document.getElementById('AlignCenter').classList.add('e-btn-toggle');
        } else {
            document.getElementById('Justify').classList.add('e-btn-toggle');
        }
        // #endregion
    }
}

}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor';
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns';
import {ColorPickerModule } from '@syncfusion/ej2-angular-inputs';
import { AppComponent } from './app.component';



/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ButtonModule,
        ToolbarModule,
        DocumentEditorAllModule,
        ComboBoxModule,
        ColorPickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);