Skip to content

Latest commit

 

History

History
120 lines (104 loc) · 4.27 KB

README.md

File metadata and controls

120 lines (104 loc) · 4.27 KB
Raw

Build Status

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 --save @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 using editType = 'date'. See Angular Docs for details.
date.min null Minimum date for Date Validation when using editType = 'date'.
date.max null Maximum date for Date Validation when using editType = '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