@helvio/angular-inline-edit v1.1.6

angular-inline

A collection of Angular inline components. Today this collection is of 1. And it is a general purpose edit input.

Is it any good?

Yes

Install

npm install @helvio/angular-inline-edit

Import

In your app.moddule.ts:

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { InlineEditModule } from '@helvio/angular-inline-edit'; // Add This Line
import { MatButtonModule, MatInputModule, MatFormFieldModule, MatIconModule, MatRippleModule, MatTabsModule } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    InlineEditModule, // Add This Line
    MatButtonModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule,
    MatRippleModule,
    MatTabsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use

<inline-edit [(value)]="values.answer" [options]="textOptions" placeholder="What is the meaning of life?"></inline-edit>

InlineEditOptions

Interface:

export interface InlineEditOptions {
  display?: 'image' | 'text';
  editType?: 'text' | 'number' | 'email' | 'url' | 'textarea' | 'date';
  image?: {
    width?: number;
    height?: number;
  };
  textarea?: {
    rows?: number;
  };
  date?: {
    format?: string;
    min?: Date;
    max?: Date;
  };
}

Default Values:

Hosted Demo

Firebase

Local Demo

git clone https://github.com/Helvio88/angular-inline
cd angular-inline
npm install
ng build @helvio/angular-inline-edit
ng serve --open