Search results

Set custom Animation for popup mode in Angular In-place Editor component

26 Sep 2022 / 2 minutes to read

In popup mode, the In-place Editor rendered with the Essential JS 2 Tooltip component. You can use tooltip properties and events to customize the popup by configure properties into the model property inside the popupSettings API.

In the following sample, popup animation can be customized by passing animation effect using the model property and the dynamic animation effect changes configured from the Essential JS 2 DropDownList component change event.

Copied to clipboard
import { Component, ViewChild } from '@angular/core';
import { InPlaceEditorComponent } from '@syncfusion/ej2-angular-inplace-editor';
import { ChangeEventArgs } from '@syncfusion/ej2-dropdowns';

    selector: 'app-root',
    template: `
    <div id='container'>
    <table class="table-section">
            <td> Open Animation: </td>
                <div id="openDropDown"></div>
                <ejs-dropdownlist #openDropDown (change)="onChange($event)" id='openDropDown' [dataSource]='openAnimateData' value='ZoomIn' placeholder="Select a animate type" popupHeight="150px">
            <td  class="sample-td"> Enter your name: </td>
            <td  class="sample-td">
                <ejs-inplaceeditor #element id="element" mode="Popup" value="Andrew" [model]="model" [popupSettings]="popupSettings"></ejs-inplaceeditor>

export class AppComponent {
    @ViewChild('element') editObj: InPlaceEditorComponent;
    public model: object = { placeholder: 'Enter some text' };
    public popupSettings: object = { model: { animation: { open: {effect: 'ZoomIn', duration: 1000, delay: 0}}}};
    public openAnimateData: string[] = ['None', 'FadeIn', 'FadeZoomIn', 'ZoomIn'];

    public onChange(e: ChangeEventArgs): void { = e.value;
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor';
import { DropDownListAllModule  } from '@syncfusion/ej2-angular-dropdowns';
import { AppComponent } from './app.component';

 * Module
    imports: [
        BrowserModule, InPlaceEditorAllModule, DropDownListAllModule
    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';

Copied to clipboard
<!DOCTYPE html>
<html lang="en">

    <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="//" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />

    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src="systemjs.config.js"></script>
        <div id='loader'>LOADING....</div>
Copied to clipboard
#container {
    display: flex;
    justify-content: center;

#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;