NgxStFieldsViewEdit

Angular components for inline view/edit functionality - display field values that can be clicked to edit in place with save/cancel actions.

Table of Contents

• Overview
• Installation
• Components
• Examples

Overview

The ngx-st-fields-view-edit library provides three components for inline field editing:

• Input View/Edit: Text and number fields
• Textarea View/Edit: Multi-line text fields
• Select View/Edit: Dropdown selection fields

All components follow the same pattern: display the value, click to edit, save or cancel changes.

Installation

npm install ngx-st-fields-view-edit

Import the module in your application:

import { NgxStFieldsViewEditModule } from 'ngx-st-fields-view-edit';

@NgModule({
  imports: [
    NgxStFieldsViewEditModule
  ]
})
export class AppModule { }

Components

StInputViewEdit

Inline editable input field for text or numbers.

Selector

<ngx-st-input-view-edit></ngx-st-input-view-edit>

Inputs

fieldValue

• Type: number | string
• Default: ''
• Description: Current value of the field.
• Example:

  [fieldValue]="user.name"

fieldLabel

• Type: string
• Default: ''
• Description: Label displayed above the field.
• Example:

  fieldLabel="Full Name"

inputType

• Type: 'text' | 'number'
• Default: 'text'
• Description: Type of input field.
• Example:

  inputType="number"

canEdit

• Type: boolean
• Default: true
• Description: Enables/disables edit functionality. When false, value is only displayed.
• Example:

  [canEdit]="hasEditPermission"

Outputs

updateField

• Type: EventEmitter<string | number>
• Description: Emitted when user saves the edited value.
• Example:

  (updateField)="onNameUpdated($event)"
  
  onNameUpdated(newName: string): void {
    this.user.name = newName;
    this.userService.updateUser(this.user).subscribe();
  }

Example

<ngx-st-input-view-edit
  [fieldValue]="user.name"
  fieldLabel="Full Name"
  inputType="text"
  [canEdit]="true"
  (updateField)="updateName($event)">
</ngx-st-input-view-edit>

<ngx-st-input-view-edit
  [fieldValue]="user.age"
  fieldLabel="Age"
  inputType="number"
  [canEdit]="true"
  (updateField)="updateAge($event)">
</ngx-st-input-view-edit>

updateName(name: string): void {
  this.user.name = name;
  this.saveUser();
}

updateAge(age: number): void {
  this.user.age = age;
  this.saveUser();
}

StTextareaViewEdit

Inline editable textarea field for multi-line text.

Selector

<ngx-st-textarea-view-edit></ngx-st-textarea-view-edit>

Inputs

fieldValue

• Type: string
• Default: ''
• Description: Current value of the field.
• Example:

  [fieldValue]="user.bio"

fieldLabel

• Type: string
• Default: ''
• Description: Label displayed above the field.
• Example:

  fieldLabel="Biography"

canEdit

• Type: boolean
• Default: true
• Description: Enables/disables edit functionality.
• Example:

  [canEdit]="hasEditPermission"

disabled

• Type: boolean
• Default: false
• Description: Disables the textarea when in edit mode.
• Example:

  [disabled]="isProcessing"

Outputs

updateField

• Type: EventEmitter<string>
• Description: Emitted when user saves the edited value.
• Example:

  (updateField)="onBioUpdated($event)"
  
  onBioUpdated(newBio: string): void {
    this.user.bio = newBio;
    this.userService.updateUser(this.user).subscribe();
  }

Example

<ngx-st-textarea-view-edit
  [fieldValue]="user.bio"
  fieldLabel="Biography"
  [canEdit]="true"
  [disabled]="false"
  (updateField)="updateBio($event)">
</ngx-st-textarea-view-edit>

<ngx-st-textarea-view-edit
  [fieldValue]="user.notes"
  fieldLabel="Notes"
  [canEdit]="true"
  (updateField)="updateNotes($event)">
</ngx-st-textarea-view-edit>

updateBio(bio: string): void {
  this.user.bio = bio;
  this.saveUser();
}

updateNotes(notes: string): void {
  this.user.notes = notes;
  this.saveUser();
}

StSelectViewEdit

Inline editable select/dropdown field.

Selector

<ngx-st-select-view-edit></ngx-st-select-view-edit>

Inputs

fieldValue

• Type: any
• Default: null
• Description: Current selected value.
• Example:

  [fieldValue]="user.role"

fieldLabel

• Type: string
• Default: ''
• Description: Label displayed above the field.
• Example:

  fieldLabel="User Role"

fieldOptions

• Type: any[]
• Default: []
• Description: Array of options for the dropdown.
• Example:

  [fieldOptions]="roleOptions"
  
  roleOptions = [
    { id: 1, name: 'Admin' },
    { id: 2, name: 'User' },
    { id: 3, name: 'Guest' }
  ];

fieldOptionValue (required)

• Type: (option: any) => any
• Description: Function to extract the value from an option object.
• Example:

  [fieldOptionValue]="getRoleValue"
  
  getRoleValue(option: any): any {
    return option.id;
  }

fieldOptionValueLabel

• Type: (option: any) => string
• Description: Function to extract the display label from an option object. If not provided, uses the option itself as label.
• Example:

  [fieldOptionValueLabel]="getRoleLabel"
  
  getRoleLabel(option: any): string {
    return option.name;
  }

canEdit

• Type: boolean
• Default: true
• Description: Enables/disables edit functionality.
• Example:

  [canEdit]="hasEditPermission"

Outputs

updateField

• Type: EventEmitter<string | number>
• Description: Emitted when user saves the selected value.
• Example:

  (updateField)="onRoleUpdated($event)"
  
  onRoleUpdated(roleId: number): void {
    this.user.roleId = roleId;
    this.userService.updateUser(this.user).subscribe();
  }

Example

<ngx-st-select-view-edit
  [fieldValue]="user.roleId"
  fieldLabel="Role"
  [fieldOptions]="roles"
  [fieldOptionValue]="getRoleId"
  [fieldOptionValueLabel]="getRoleName"
  [canEdit]="true"
  (updateField)="updateRole($event)">
</ngx-st-select-view-edit>

roles = [
  { id: 1, name: 'Administrator', description: 'Full access' },
  { id: 2, name: 'User', description: 'Standard access' },
  { id: 3, name: 'Guest', description: 'Read-only access' }
];

getRoleId = (role: any) => role.id;
getRoleName = (role: any) => role.name;

updateRole(roleId: number): void {
  this.user.roleId = roleId;
  this.saveUser();
}

Examples

Complete User Profile Form

<div class="user-profile">
  <h2>User Profile</h2>

  <ngx-st-input-view-edit
    [fieldValue]="user.firstName"
    fieldLabel="First Name"
    inputType="text"
    [canEdit]="canEdit"
    (updateField)="user.firstName = $event; saveUser()">
  </ngx-st-input-view-edit>

  <ngx-st-input-view-edit
    [fieldValue]="user.lastName"
    fieldLabel="Last Name"
    inputType="text"
    [canEdit]="canEdit"
    (updateField)="user.lastName = $event; saveUser()">
  </ngx-st-input-view-edit>

  <ngx-st-input-view-edit
    [fieldValue]="user.email"
    fieldLabel="Email"
    inputType="text"
    [canEdit]="false">
  </ngx-st-input-view-edit>

  <ngx-st-input-view-edit
    [fieldValue]="user.age"
    fieldLabel="Age"
    inputType="number"
    [canEdit]="canEdit"
    (updateField)="user.age = $event; saveUser()">
  </ngx-st-input-view-edit>

  <ngx-st-select-view-edit
    [fieldValue]="user.departmentId"
    fieldLabel="Department"
    [fieldOptions]="departments"
    [fieldOptionValue]="getDeptId"
    [fieldOptionValueLabel]="getDeptName"
    [canEdit]="canEdit"
    (updateField)="user.departmentId = $event; saveUser()">
  </ngx-st-select-view-edit>

  <ngx-st-textarea-view-edit
    [fieldValue]="user.bio"
    fieldLabel="Biography"
    [canEdit]="canEdit"
    (updateField)="user.bio = $event; saveUser()">
  </ngx-st-textarea-view-edit>

  <ngx-st-textarea-view-edit
    [fieldValue]="user.notes"
    fieldLabel="Internal Notes"
    [canEdit]="isAdmin"
    (updateField)="user.notes = $event; saveUser()">
  </ngx-st-textarea-view-edit>
</div>

export class UserProfileComponent {
  user = {
    firstName: 'John',
    lastName: 'Doe',
    email: '[email protected]',
    age: 30,
    departmentId: 2,
    bio: 'Software developer with 5 years of experience...',
    notes: 'Excellent team player'
  };

  departments = [
    { id: 1, name: 'Engineering' },
    { id: 2, name: 'Sales' },
    { id: 3, name: 'Marketing' }
  ];

  canEdit = true;
  isAdmin = false;

  getDeptId = (dept: any) => dept.id;
  getDeptName = (dept: any) => dept.name;

  saveUser(): void {
    this.userService.updateUser(this.user).subscribe(
      () => this.snackBar.success('Profile updated'),
      (error) => this.snackBar.error('Update failed')
    );
  }
}

Product Details with Conditional Editing

<div class="product-details">
  <ngx-st-input-view-edit
    [fieldValue]="product.name"
    fieldLabel="Product Name"
    [canEdit]="!product.isPublished"
    (updateField)="updateProductName($event)">
  </ngx-st-input-view-edit>

  <ngx-st-input-view-edit
    [fieldValue]="product.price"
    fieldLabel="Price ($)"
    inputType="number"
    [canEdit]="hasPermission('edit_price')"
    (updateField)="updateProductPrice($event)">
  </ngx-st-input-view-edit>

  <ngx-st-select-view-edit
    [fieldValue]="product.categoryId"
    fieldLabel="Category"
    [fieldOptions]="categories"
    [fieldOptionValue]="getCategoryId"
    [fieldOptionValueLabel]="getCategoryName"
    [canEdit]="hasPermission('edit_category')"
    (updateField)="updateProductCategory($event)">
  </ngx-st-select-view-edit>

  <ngx-st-textarea-view-edit
    [fieldValue]="product.description"
    fieldLabel="Description"
    [canEdit]="!product.isPublished"
    [disabled]="isSaving"
    (updateField)="updateProductDescription($event)">
  </ngx-st-textarea-view-edit>
</div>

export class ProductDetailsComponent {
  product: Product;
  categories: Category[];
  isSaving = false;

  getCategoryId = (cat: Category) => cat.id;
  getCategoryName = (cat: Category) => cat.name;

  hasPermission(permission: string): boolean {
    return this.authService.hasPermission(permission);
  }

  updateProductName(name: string): void {
    this.product.name = name;
    this.saveProduct();
  }

  updateProductPrice(price: number): void {
    this.product.price = price;
    this.saveProduct();
  }

  updateProductCategory(categoryId: number): void {
    this.product.categoryId = categoryId;
    this.saveProduct();
  }

  updateProductDescription(description: string): void {
    this.product.description = description;
    this.saveProduct();
  }

  private saveProduct(): void {
    this.isSaving = true;
    this.productService.updateProduct(this.product).subscribe(
      () => {
        this.isSaving = false;
        this.snackBar.success('Product updated');
      },
      () => {
        this.isSaving = false;
        this.snackBar.error('Update failed');
      }
    );
  }
}

Simple Inline Editing

<!-- Quick inline updates without separate save method -->
<ngx-st-input-view-edit
  [fieldValue]="settings.siteName"
  fieldLabel="Site Name"
  (updateField)="settings.siteName = $event">
</ngx-st-input-view-edit>

<ngx-st-input-view-edit
  [fieldValue]="settings.maxUploadSize"
  fieldLabel="Max Upload Size (MB)"
  inputType="number"
  (updateField)="settings.maxUploadSize = $event">
</ngx-st-input-view-edit>

<ngx-st-select-view-edit
  [fieldValue]="settings.theme"
  fieldLabel="Theme"
  [fieldOptions]="['light', 'dark', 'auto']"
  [fieldOptionValue]="identity"
  (updateField)="settings.theme = $event">
</ngx-st-select-view-edit>

<button (click)="saveAllSettings()">Save All Changes</button>

identity = (x: any) => x;  // For simple string/number options

saveAllSettings(): void {
  this.settingsService.updateSettings(this.settings).subscribe();
}

Features

View Mode

• Displays field value with label
• Shows edit icon on hover (if canEdit is true)
• Click anywhere on the field to enter edit mode

Edit Mode

• Replaces display with appropriate input control
• Shows save (✓) and cancel (✗) buttons
• Enter key saves (for input/select)
• Escape key cancels
• Clicking outside does not auto-save

Permission Control

• Use canEdit input to conditionally enable editing
• Perfect for role-based access control
• Seamlessly switches between read-only and editable states

Validation

• Works with Angular forms and validation
• Parent component handles validation logic
• Cancel button restores original value

Build

Run ng build ngx-st-fields-view-edit to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build ngx-st-fields-view-edit, go to the dist folder cd dist/ngx-st-fields-view-edit and run npm publish.