Naughty Platypus Memorabilia

    ngx-in-place-edit
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.1 • Public • Published

    Angular-Inline-Edit

    ngx-in-place-edit is copy of angular-ngx-inline-edit is a library of Angular that allows you to create editable elements. Such technique is also known as click-to-edit or edit-in-place.

    Difference b/w angular-ngx-inline-edit and ngx-in-place-edit that ngx-in-place-edit changes mode with single click unlike angular-ngx-inline-edit

    Table of contents

    Getting started

    Step 1: Install ngx-in-place-edit:

    NPM

    npm i ngx-in-place-edit

    Step 2: Import the InlineEditModule:

    import {InlineEditModule} from 'ngx-in-place-edit';
    
    @NgModule({
      declarations: [AppComponent],
      imports: [InlineEditModule],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

    Usage

    <div *ngFor="let entity of entities; let index = index" style="display: block;">
    	<ngx-inline-edit (onStateChange)="updateField(entity.name)">
    		<ng-template view>
    			{{entity.name}}
    		</ng-template>
    		<ng-template edit>
    			<input type="text" [formControl]="userName" focusable editable>
    		</ng-template>
    	</ngx-inline-edit>
    
    	<ngx-inline-edit (onStateChange)="updateField(entity.isAdmin)">
    		<ng-template view>{{entity.isAdmin}}</ng-template>
    		<ng-template edit>
    			<input type="checkbox" [formControl]="userType">&nbsp;{{entity.isAdmin}}
    		</ng-template>
    	</ngx-inline-edit>
    </div>
    

    Derivates Table

    Derivative Name Description
    focusable It makes the input field to be focusable.
    editable It registers an event listener, which calls the component’s method whenever the user clicks ‘enter’ to change its state from edit to view.
    view It is responsible for exposing a reference to their TemplateRef (For View).
    edit It is responsible for exposing a reference to their TemplateRef (For Edit).

    Output Events

    Currently Only one event is emitted which is onStateChange. This is emitted when we switch back to view mode from edit mode using this we can check whether new value is equal to old value or use it for any other purpose.

    Author

    • [Sam Arora]

    License

    MIT

    Install

    npm i ngx-in-place-edit

    DownloadsWeekly Downloads

    8

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    235 kB

    Total Files

    47

    Last publish

    Collaborators

    • halfdevil