Search results

Buttons in Angular In-place Editor component

29 Jul 2021 / 2 minutes to read

The In-place Editor has an option to save and cancel using buttons. The saveButton and cancelButton properties accept the ButtonModel objects for customizing the save and cancel button properties.

Buttons can be show or hide by sets a Boolean value to the showButtons property.

Without buttons value will be processed via the following ways.

  • actionOnBlur: By clicking out side the editor component get focus out and do action based on this property value.
  • submitOnEnter: Pressing Enter key it performs the submit action, if this property set to true.

In the following sample, the content and cssClass properties of Button value assigned to the saveButton and cancelButton properties to customize its appearance. Also check or uncheck a checkbox buttons render or removed from the editor.

To restrict either save or cancel button rendering into a DOM, simply pass empty object {} in the saveButton or cancelButton properties.

For more details about buttons, refer this documentation section.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.html
index.css
Copied to clipboard
import { Component, ViewChild } from '@angular/core';
import { InPlaceEditorComponent } from '@syncfusion/ej2-angular-inplace-editor';
import { ChangeEventArgs } from '@syncfusion/ej2-buttons';

@Component({
selector: 'app-root',
template: `
<div id='container'>
<table class="table-section">
    <tr>
        <td> ShowButtons: </td>
        <td>
            <ejs-checkbox label="Show" [checked]="true" (change)="onChange($event)"></ejs-checkbox>
        </td>
    </tr>
    <tr>
        <td  class="sample-td"> Enter your name: </td>
        <td  class="sample-td">
            <ejs-inplaceeditor #element id="element" mode="Inline" value="Andrew" [model]="model" [saveButton]="saveButton" [cancelButton]="cancelButton"></ejs-inplaceeditor>
        </td>
    </tr>
</table>
</div>
`
})

export class AppComponent {
  @ViewChild('element') editorObj: InPlaceEditorComponent;
  public model: Object = {  placeholder: 'Enter some text' };
  public saveButton: object = { content: 'Ok', cssClass: 'e-outline'};
  public cancelButton: object = { content: 'Cancel', cssClass: 'e-outline'};

  public onChange(e: ChangeEventArgs): void {
this.editorObj.showButtons = e.checked;
this.editorObj.dataBind();
  }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor';
import { CheckBoxModule, ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, InPlaceEditorAllModule, CheckBoxModule, ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 InPlace Editor Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript InPlace Editor Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />

    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <app-root>
        <div id='loader'>LOADING....</div>
    </app-root>
</body>
</html>
Copied to clipboard
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.table-section {
    margin: 0 auto;
}

tr td:first-child {
    text-align: right;
    padding-right: 20px;
}

.sample-td {
    padding-top: 10px;
    min-width: 230px;
    height: 100px;
}

See Also