Value View Component - Complete Documentation

Table of Contents

• Overview
• Installation
• Basic Usage
• Inputs
• Usage Examples
• Styling

Overview

The ngx-st-value-view component is a simple display component for showing labeled values with support for:

• Text values
• HTML content
• Custom content via content projection
• Optional icon with action
• Custom styling
• Date formatting integration

Installation

npm install ngx-st-value-view

Import the component:

import { NgxStValueViewComponent } from 'ngx-st-value-view';

// In your component
imports: [NgxStValueViewComponent]

Basic Usage

<ngx-st-value-view
  label="Email"
  [value]="user.email">
</ngx-st-value-view>

Inputs

label

• Type: string
• Default: ''
• Description: The label text displayed above the value.
• Example:

  label="Full Name"
  label="Email Address"

value

• Type: any
• Default: ''
• Description: The value to display. Can be string, number, or any value that can be converted to string.
• Example:

  [value]="user.name"
  [value]="user.age"
  [value]="user.email"

valueType

• Type: 'text' | 'html' | 'custom'
• Default: 'text'
• Description: Determines how the value is rendered.
  • 'text': Plain text with empty string check
  • 'html': Renders value as HTML (sanitized)
  • 'custom': Uses content projection (ng-content)
• Example:

  valueType="text"
  valueType="html"
  valueType="custom"

valueClass

• Type: string
• Default: ''
• Description: CSS class to apply to the value paragraph element.
• Example:

  valueClass="text-bold"
  valueClass="text-danger"

valueIcon

• Type: string | null
• Default: null
• Description: Material icon name to display next to the value. Icon is clickable if valueIconAction is provided.
• Example:

  valueIcon="edit"
  valueIcon="copy"
  valueIcon="open_in_new"

valueIconAction

• Type: (() => void) | null
• Default: null
• Description: Function to execute when the icon is clicked. Icon must be set via valueIcon for this to work.
• Example:

  [valueIconAction]="copyToClipboard"
    
  copyToClipboard = () => {
    navigator.clipboard.writeText(this.user.email);
  }

Usage Examples

Example 1: Simple Text Display

// Component
@Component({
  template: `
    <ngx-st-value-view
      label="Name"
      [value]="user.name">
    </ngx-st-value-view>
    
    <ngx-st-value-view
      label="Email"
      [value]="user.email">
    </ngx-st-value-view>
    
    <ngx-st-value-view
      label="Age"
      [value]="user.age">
    </ngx-st-value-view>
  `
})
export class UserDetailsComponent {
  user = {
    name: 'John Doe',
    email: '[email protected]',
    age: 30
  };
}

Example 2: HTML Content

// Component
@Component({
  template: `
    <ngx-st-value-view
      label="Description"
      [value]="descriptionHtml"
      valueType="html">
    </ngx-st-value-view>
  `
})
export class ProductComponent {
  descriptionHtml = `
    <strong>Product Features:</strong>
    <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
    </ul>
  `;
}

Example 3: Value with Icon Action

// Component
@Component({
  template: `
    <ngx-st-value-view
      label="Email"
      [value]="user.email"
      valueIcon="content_copy"
      [valueIconAction]="copyEmail">
    </ngx-st-value-view>
    
    <ngx-st-value-view
      label="Website"
      [value]="website"
      valueIcon="open_in_new"
      [valueIconAction]="openWebsite">
    </ngx-st-value-view>
  `
})
export class ContactComponent {
  user = { email: '[email protected]' };
  website = 'https://example.com';
  
  copyEmail = () => {
    navigator.clipboard.writeText(this.user.email);
    this.snackbar.success('Email copied to clipboard');
  }
  
  openWebsite = () => {
    window.open(this.website, '_blank');
  }
}

Example 4: Custom Content with Content Projection

// Component
@Component({
  template: `
    <ngx-st-value-view
      label="Status"
      valueType="custom">
      <span class="badge" [class.active]="isActive">
        {{ isActive ? 'Active' : 'Inactive' }}
      </span>
    </ngx-st-value-view>
    
    <ngx-st-value-view
      label="Actions"
      valueType="custom">
      <button mat-button (click)="edit()">Edit</button>
      <button mat-button (click)="delete()">Delete</button>
    </ngx-st-value-view>
  `
})
export class CustomContentComponent {
  isActive = true;
  
  edit(): void {
    console.log('Edit clicked');
  }
  
  delete(): void {
    console.log('Delete clicked');
  }
}

Example 5: Styled Values

// Component
@Component({
  template: `
    <ngx-st-value-view
      label="Price"
      [value]="'$' + price"
      valueClass="price-value">
    </ngx-st-value-view>
    
    <ngx-st-value-view
      label="Status"
      [value]="status"
      [valueClass]="statusClass">
    </ngx-st-value-view>
  `,
  styles: [`
    .price-value {
      color: green;
      font-weight: bold;
      font-size: 1.2rem;
    }
    .status-active {
      color: green;
    }
    .status-inactive {
      color: red;
    }
  `]
})
export class StyledValueComponent {
  price = 99.99;
  status = 'Active';
  
  get statusClass(): string {
    return this.status === 'Active' ? 'status-active' : 'status-inactive';
  }
}

Example 6: Form Details Display

// Component
@Component({
  template: `
    <div class="user-details">
      <ngx-st-value-view
        label="First Name"
        [value]="user.firstName">
      </ngx-st-value-view>
      
      <ngx-st-value-view
        label="Last Name"
        [value]="user.lastName">
      </ngx-st-value-view>
      
      <ngx-st-value-view
        label="Email"
        [value]="user.email"
        valueIcon="email">
      </ngx-st-value-view>
      
      <ngx-st-value-view
        label="Phone"
        [value]="user.phone"
        valueIcon="phone">
      </ngx-st-value-view>
      
      <ngx-st-value-view
        label="Address"
        [value]="user.address">
      </ngx-st-value-view>
      
      <ngx-st-value-view
        label="Bio"
        [value]="user.bio"
        valueType="html">
      </ngx-st-value-view>
    </div>
  `,
  styles: [`
    .user-details {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
  `]
})
export class UserDetailsFormComponent {
  user = {
    firstName: 'John',
    lastName: 'Doe',
    email: '[email protected]',
    phone: '+1 234 567 8900',
    address: '123 Main St, City, Country',
    bio: '<p>Software developer with 10 years of experience.</p>'
  };
}

Example 7: Empty Value Handling

// Component
@Component({
  template: `
    <!-- The component uses stCheckEmptyString pipe internally -->
    <!-- Empty strings will be displayed as '-' -->
    
    <ngx-st-value-view
      label="Middle Name"
      [value]="user.middleName">
    </ngx-st-value-view>
    
    <ngx-st-value-view
      label="Secondary Email"
      [value]="user.secondaryEmail">
    </ngx-st-value-view>
  `
})
export class EmptyValueComponent {
  user = {
    middleName: '',  // Will display as '-'
    secondaryEmail: null  // Will display as '-'
  };
}

Example 8: Editable Value with Icon

// Component
@Component({
  template: `
    <ngx-st-value-view
      label="Company Name"
      [value]="company.name"
      valueIcon="edit"
      [valueIconAction]="editCompanyName">
    </ngx-st-value-view>
  `
})
export class EditableValueComponent {
  company = { name: 'Acme Corp' };
  
  editCompanyName = () => {
    this.dialog.open(EditDialogComponent, {
      data: { field: 'name', value: this.company.name }
    }).afterClosed().subscribe(result => {
      if (result) {
        this.company.name = result;
      }
    });
  }
}

Styling

The component uses CSS custom properties for theming:

ngx-st-value-view {
  /* Label color */
  --surface-400: #9e9e9e;
  
  /* Value color */
  --surface-800: #212121;
}

Custom Styling Example

/* Global styles or component styles */
ngx-st-value-view {
  --surface-400: #666;
  --surface-800: #000;
}

/* Or target specific instances */
.dark-theme ngx-st-value-view {
  --surface-400: #aaa;
  --surface-800: #fff;
}

Component Structure

<div class="st-value-container">
  <span>{{ label }}</span>  <!-- Label -->
  <div class="st-value-view">
    <p [ngClass]="valueClass">
      {{ value }}
      <mat-icon>{{ valueIcon }}</mat-icon>  <!-- Optional icon -->
    </p>
  </div>
</div>

Common Patterns

Pattern 1: Read-Only Form Display

Use multiple ngx-st-value-view components to create a read-only view of form data.

Pattern 2: Details Panel

Perfect for showing entity details in a sidebar or modal.

Pattern 3: Summary Cards

Combine with cards to create summary information displays.

Pattern 4: Clickable Values

Use valueIcon and valueIconAction to make values interactive (copy, edit, open).

Best Practices

1. Use meaningful labels that clearly describe the value:

   label="Email Address"  <!-- Good -->
   label="Email"          <!-- Okay -->
   label="Val"            <!-- Bad -->

2. Choose the right valueType:

   • Use 'text' for simple values (default)
   • Use 'html' when value contains HTML markup
   • Use 'custom' when you need complete control

3. Provide icon actions for interactive values:

   valueIcon="content_copy"
   [valueIconAction]="copyToClipboard"

4. Style consistently using valueClass or CSS custom properties

5. Handle empty values gracefully - the component automatically shows '-' for empty strings

Integration with Other Libraries

The component integrates with:

• ngx-st-date-format: For date formatting (imported internally)
• ngx-st-base-functions: For empty string checking (imported internally)
• Angular Material: For icons

This documentation covers all inputs and usage patterns for the Value View component.