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>

| Variable | Type | Default | Remarks | | ------------- | ------------------- | ----------- | ------------------------------------------------------- | | value | any | null | Bidirectional string, number or date to be edited | | valueChange | @Output<any> | | EventEmitter when saving | | options | InlineEditOptions | See Remarks | Complex Object described below | | placeholder | string | null | Input box placeholder text | | maxlength | number | null | Input box maximum length. Will display hint. | | save | @Output<null> | | EventEmitter when saving. Does not emit any value. | | cancel | @Output<null> | | EventEmitter when cancel. Does not emit any value. |

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:

| Variable | Default Value | Description | | --------------- | ------------- | --------------------------------------------------------------------------------------- | | display | 'text' | Displays the object as text or image. For image, a URL is required. | | editType | 'text' | Type of data to edit. Options are 'text', 'number', 'email', 'url', 'textarea', 'date'. | | image.width | 64 | When using display = 'image', sets the image width. | | image.height | 64 | When using display = 'image', sets the image height. | | textarea.rows | 4 | When using editType = 'textarea', sets the number of rows (lines). | | date.format | 'short' | Date format to display when usingeditType = 'date'. See Angular Docs for details. | | date.min |null | Minimum date for Date Validation when usingeditType = 'date'. | | date.max |null | Maximum date for Date Validation when usingeditType = 'date'`. |

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