Base Functions Library - Complete Documentation

Table of Contents

- Overview
- Installation
- Pipes
- Components
- Usage Examples

---

Overview

The ngx-st-base-functions library provides utility pipes and base components for common Angular tasks:

Pipes:
- stCheckEmptyString: Displays "- - -" for empty/null values
- stSafeHtml: Sanitizes HTML content for safe display
- stSafe: Bypasses security for URLs
- stCutText: Truncates text to specified length

Components:
- StSubscribeDestroyComponent: Base component for automatic subscription cleanup
- LoaderComponent: Loading spinner component

---

Installation

``bash
npm install ngx-st-base-functions
`

Import the module:

`typescript
import { StBaseFunctionsModule } from 'ngx-st-base-functions';

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

---

Pipes

$3

Displays "- - -" for null, undefined, or empty values.

Input: any
Output: Original value or "- - -"

Example:
`html

{{ user.middleName | stCheckEmptyString }}

{{ user.phone | stCheckEmptyString }}

`

$3

Sanitizes HTML content for safe display in templates.

Input: string
Output: SafeHtml

Example:
`html

`

$3

Bypasses Angular security for trusted URLs (use with caution).

Input: string
Output: SafeResourceUrl

Example:
`html


`

$3

Truncates text to specified length and adds ellipsis.

Input: string
Parameter: maxLength: number
Output: Truncated string with "..."

Example:
`html

{{ longText | stCutText:50 }}

{{ description | stCutText:100 }}

`

---

Components

$3

Base component that automatically unsubscribes from observables on component destruction.

Usage:
`typescript
import { StSubscribeDestroyComponent } from 'ngx-st-base-functions';

@Component({...})
export class MyComponent extends StSubscribeDestroyComponent implements OnInit {

ngOnInit(): void {
// Subscriptions are automatically cleaned up
this.userService.getUsers()
.pipe(takeUntil(this.destroyed$))
.subscribe(users => {
this.users = users;
});
}
}
`

Features:
- Provides destroyed$ Subject
- Automatically completes destroyed$ on component destroy
- Prevents memory leaks from subscriptions

$3

Displays a loading spinner.

Usage:
`html

`

---

Usage Examples

$3

`typescript
@Component({
template:


})
export class UserDetailsComponent {
user = {
firstName: 'John',
middleName: '', // Will show "- - -"
lastName: 'Doe',
phone: null, // Will show "- - -"
email: 'john@example.com'
};
}
`

$3

`typescript
@Component({
template:


})
export class ArticleComponent {
article = {
title: 'My Article',
content: '

This is HTML content with formatting.

'
};
}
`

$3

`typescript
@Component({
template:

{{ item.code | stCheckEmptyString }}

{{ item.name | stCheckEmptyString }}

{{ item.description | stCutText:50 }}

{{ item.notes | stCheckEmptyString }}


})
export class ItemsTableComponent {
items = [
{ code: 'A001', name: 'Item 1', description: 'Long description...', notes: '' },
{ code: 'A002', name: 'Item 2', description: 'Another desc...', notes: null }
];
}
`

$3

`typescript
import { StSubscribeDestroyComponent } from 'ngx-st-base-functions';
import { takeUntil } from 'rxjs/operators';

@Component({
template:



})
export class UsersComponent extends StSubscribeDestroyComponent implements OnInit {
users: User[] = [];
loading = true;

constructor(private userService: UserService) {
super();
}

ngOnInit(): void {
// Subscription automatically cleaned up on destroy
this.userService.getUsers()
.pipe(takeUntil(this.destroyed$))
.subscribe(users => {
this.users = users;
this.loading = false;
});

// Multiple subscriptions all cleaned up
this.userService.getUserUpdates()
.pipe(takeUntil(this.destroyed$))
.subscribe(update => {
this.handleUpdate(update);
});
}

handleUpdate(update: any): void {
// Handle real-time updates
}
}
`

$3

`typescript
@Component({
template:


})
export class VideoPlayerComponent {
videoUrl = 'https://www.youtube.com/embed/VIDEO_ID';
}
`

$3

`typescript
@Component({
template:

{{ product.name }}

{{ product.description | stCutText:100 }}

SKU: {{ product.sku | stCheckEmptyString }}

Category: {{ product.category | stCheckEmptyString }}


})
export class ProductCardsComponent {
products = [
{
name: 'Product 1',
description: 'This is a very long product description that needs to be truncated...',
sku: 'SKU-001',
category: ''
}
];
}
`

$3

`typescript
@Component({
template:


})
export class DataViewComponent implements OnInit {
loading = true;
data: any;

ngOnInit(): void {
this.loadData();
}

loadData(): void {
this.loading = true;
this.dataService.getData().subscribe(
data => {
this.data = data;
this.loading = false;
},
error => {
this.loading = false;
}
);
}
}
`

---

Best Practices

1. Use stCheckEmptyString for optional fields:
`html
{{ user.middleName | stCheckEmptyString }}
`

2. Extend StSubscribeDestroyComponent for components with subscriptions:
`typescript
export class MyComponent extends StSubscribeDestroyComponent {
// Automatic cleanup
}
`

3. Always use takeUntil(this.destroyed$) with subscriptions:
`typescript
this.service.getData()
.pipe(takeUntil(this.destroyed$))
.subscribe(...)
`

4. Use stSafeHtml when displaying user-generated HTML:
`html

`

5. Truncate long text in lists and cards:
`html
{{ description | stCutText:150 }}
`

---

Security Note

stSafe pipe: Use with caution. Only use with trusted URLs as it bypasses Angular's security. Never use with user-generated content.

stSafeHtml` pipe: Sanitizes HTML but still use carefully with user-generated content.

---

This library provides essential utilities for handling common Angular development tasks.