Search results

List of components

In-place Editor renders various components based on the type property and it have built-in and injectable components. To use injectable components, inject the required modules into In-place Editor. By default, the type property set to Text and render the TextBox.

The following table explains Injectable components module name and built-in components and their types.

Injectable Components Built in Components
AutoComplete (AutoComplete) TextBox (Text)
ComboBox (ComboBox) DatePicker (Date)
MultiSelect (MultiSelect) DateTimePicker (DateTime)
TimePicker (Time) DropDownList (DropDownList)
DateRangePicker (DateRange) MaskedTextBox (Mask)
Slider (Slider) NumericTextBox (Numeric)
Rte (RTE)
ColorPicker (Color)

In the following sample, built-in and injectable based In-place Editor components are rendered.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.html
index.css
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
    <div id='container'>
    <h3> Built-in Controls </h3>
    <table class="table-section">
        <tr>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DatePicker </td>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <ejs-inplaceeditor id="date" mode="Inline" type="Date" [model]="dateModel" [value]='dateValue'></ejs-inplaceeditor>
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DateTimePicker </td>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <ejs-inplaceeditor id="dateTime" mode="Inline" type="DateTime" [value]='dateTimeValue' [model]="dateModel"></ejs-inplaceeditor>
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DropDownList </td>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <ejs-inplaceeditor id="dropDowns" mode="Inline" type="DropDownList" value="Android" [model]="dropDownModel"></ejs-inplaceeditor>
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> MaskedTextBox </td>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <ejs-inplaceeditor id="masked" mode="Inline" type="Mask" value="123-345-678" [model]="maskModel"></ejs-inplaceeditor>
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> NumericTextBox </td>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <ejs-inplaceeditor id="numeric" mode="Inline" type="Numeric" value=10 [model]="numericModel"></ejs-inplaceeditor>
            </td>
            </tr>
        <tr>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> TextBox </td>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <ejs-inplaceeditor id="textbox" mode="Inline" type="Text" value="Andrew" [model]="textModel"></ejs-inplaceeditor>
            </td>
        </tr>
    </table>
    <h3> Injectable Controls </h3>
    <table class="table-section">
        <tr>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> AutoComplete </td>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <ejs-inplaceeditor id="autoComplete" mode="Inline" type="AutoComplete" value="Android" [model]="dropDownModel"></ejs-inplaceeditor>
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> ColorPicker </td>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <ejs-inplaceeditor id="color" mode="Inline" type="Color" value="#81aefd"></ejs-inplaceeditor>
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> ComboBox </td>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <ejs-inplaceeditor id="comboBox" mode="Inline" type="ComboBox" value="Android" [model]="dropDownModel"></ejs-inplaceeditor>
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DateRangePicker </td>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <ejs-inplaceeditor id="dateRange" type="DateRange" mode="Inline" [value]="dateRangeValue" [model]="dateModel"></ejs-inplaceeditor>
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> MultiSelect </td>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <ejs-inplaceeditor id="multiSelect" mode="Inline" type="MultiSelect" value="Android" [model]="dropDownModel"></ejs-inplaceeditor>
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> RTE </td>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <ejs-inplaceeditor id="rte" mode="Inline" type="RTE" value="Enter your content here" [model]="rteModel"></ejs-inplaceeditor>
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> Slider </td>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <ejs-inplaceeditor id="slider" mode="Inline" type="Slider" value=20></ejs-inplaceeditor>
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> TimePicker </td>
            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <ejs-inplaceeditor id="time" mode="Inline" type="Time" [value]="dateValue" [model]="dateModel"></ejs-inplaceeditor>
            </td>
        </tr>
    </table>
</div>
    `
})

export class AppComponent {
  public dateModel: Object = {  placeholder: 'Select date' };
  public dateValue: Date = new Date('11/23/2018');
  public dateTimeValue: Date = new Date('11/23/2018 12:30 PM');
  public frameWorkList: string[] = ['Android', 'JavaScript', 'jQuery', 'TypeScript', 'Angular', 'React', 'Vue', 'Ionic'];
  public dropDownModel: object = { dataSource: this.frameWorkList, placeholder: 'Select frameworks'};
  public maskModel: object = { mask: '000-000-000' };
  public numericModel: object = { placeholder: 'Enter number'};
  public textModel: object = { placeholder: 'Enter some text' };
  public dateRangeValue: Date[] =  [new Date('11/12/2018'), new Date('11/15/2018')];
  public rteModel: object = { placeholder: 'Enter your content here' };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, InPlaceEditorAllModule
    ],
    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);
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <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.6.25/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>
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

body {
    padding: 20px 0
}

.control-title {
    font-weight: 600;
    padding-right: 20px;
}

td {
    height: 80px;
}

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

tr td:last-child {
    text-align: left;
}

.table-section {
    margin: 0 auto;
}

h3 {
    text-align: center;
}

Model configuration

Component properties and events can be customized using the In-place Editor model property.

In the following code, the type defined as the Date and DatePicker properties are configured through model property to customize the DatePicker component at In-place Editor.

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
      <ejs-inplaceeditor id="element" type="Date" [model]="dateModel" [value]='dateValue'></ejs-inplaceeditor>
    `
})

export class AppComponent {
  public dateModel: Object = { showTodayButton: true, placeholder: 'Select Date' };
  public dateValue: Date = new Date('04/12/2018');
}