Valtech Components


Documentation

A comprehensive component library for building modern web and hybrid applications with Angular, Ionic, and Capacitor. Includes 134 UI components and 23+ specialized services for authentication, Firebase integration, internationalization, and more.

Features

- 134 UI Components — Atoms, molecules, organisms, and templates ready to use
- Authentication System — Complete auth with OAuth (Google, Apple), session management, and token handling
- Firebase Integration — Analytics, Firestore, Cloud Messaging, and Storage services
- i18n with Signals — Modern internationalization using Angular Signals for reactive translations
- Remote App Configuration — Feature flags and remote config management
- Google Ad Manager — Built-in ad slot integration
- User Feedback System — Collect and manage user feedback
- Storybook Documentation — Interactive component documentation

Technologies

- Angular 18+
- Ionic 8+
- Capacitor 6+
- Firebase 10+
- RxJS 7.8+

Installation

``bash
npm install valtech-components
`

$3

`bash
npm install @angular/core @angular/common @ionic/angular ionicons rxjs
`

Optional peer dependencies for additional features:

`bash


Firebase services

npm install @angular/fire firebase

QR code generation

npm install qr-code-styling

Code highlighting

npm install prismjs

Carousel support

npm install swiper
`

Usage Paths

Choose the path that fits your needs:

$3

133 of 134 components work without any backend or Firebase configuration. Just install and use:

`typescript
import { ButtonComponent, CardComponent, TextComponent } from 'valtech-components';

@Component({
standalone: true,
imports: [ButtonComponent, CardComponent, TextComponent],
template:





})
export class MyComponent {}
`

No providers needed. No Firebase. No backend. Just import and use.

$3

For authentication, Firebase services, and i18n, add providers to your main.ts:

`typescript
import {
provideValtechFirebase,
provideValtechAuth,
provideValtechI18n,
createFirebaseConfig,
} from 'valtech-components';
import firebaseConfig from './config/firebase.config.json';

bootstrapApplication(AppComponent, {
providers: [
provideValtechFirebase(createFirebaseConfig(firebaseConfig)),
provideValtechAuth({ apiUrl: 'https://api.yourapp.com' }),
provideValtechI18n({ defaultLang: 'en', supportedLangs: ['en', 'es'] }),
],
});
`

Full Integration Guide — Firebase setup, Auth configuration, i18n, and more.

$3

| Component | Requirement |
|-----------|-------------|
| LoginComponent | AuthService configured with API endpoint |
| ContentReactionComponent | FeedbackService configured with API endpoint |

All other 132 components are fully standalone.

---

Components

| Category | Count | Description |
|----------|-------|-------------|
| Atoms | 19 | Basic UI elements: avatar, button, icon, text, image, skeleton, progress-bar, qr-code, etc. |
| Molecules | 81 | Compound components: inputs (text, email, phone, pin, date), cards, searchbar, tabs, accordion, pagination, etc. |
| Organisms | 24 | Complex components: forms, data-table, menu, toolbar, login, comment-section, infinite-list, etc. |
| Templates | 10 | Page layouts: page-wrapper, page-content, docs-shell, auth-background, maintenance-page, etc. |

> View full component catalog

Services

$3

These services work out of the box:

| Service | Description |
|---------|-------------|
| ThemeService | Theme management (light/dark mode) |
| ToastService | Toast notifications |
| NavigationService | Routing utilities |
| DownloadService | File download helpers |
| IconsService | Ionicons management |
| LocaleService | Simple locale management with localStorage |
| LocalStorageService | localStorage abstraction |
| LinkProcessorService | Automatic URL and markdown link processing |
| InAppBrowserService | Capacitor in-app browser |
| ModalService | Modal dialog management |
| ConfirmationDialogService | Confirmation dialogs |
| QrGeneratorService | QR code generation |
| PresetService | Reusable configuration presets |
| PaginationService | Pagination state management |
| SkeletonService | Skeleton loading states |

$3

Requires backend API. See Auth Setup Guide.

| Service | Description |
|---------|-------------|
| AuthService | Main authentication service |
| OAuthService | OAuth providers (Google, Apple) |
| SessionService | Session management |
| TokenService | JWT token handling |
| AuthStateService | Authentication state management |
| DeviceService | Device information |

$3

Requires Firebase project. See Firebase Setup Guide.

| Service | Description |
|---------|-------------|
| FirebaseService | Firebase initialization |
| AnalyticsService | Firebase Analytics with custom events |
| FirestoreService | Firestore database operations |
| MessagingService | Cloud Messaging (push notifications) |
| NotificationsService | Notification management |
| FirebaseStorageService | Firebase Storage operations |

$3

| Service | Description |
|---------|-------------|
| I18nService | Internationalization with Angular Signals |

$3

These services require a configured backend API:

| Service | Description |
|---------|-------------|
| AppConfigService | Remote configuration and feature flags |
| FeedbackService | User feedback collection |

Quick Start

$3

`typescript
import { Component } from '@angular/core';
import { TextComponent, ButtonComponent, CardComponent } from 'valtech-components';

@Component({
selector: 'app-example',
standalone: true,
imports: [TextComponent, ButtonComponent, CardComponent],
template:


[props]="{ text: 'Get Started', color: 'primary' }"
(onClick)="handleClick()"
/>


})
export class ExampleComponent {
handleClick() {
console.log('Button clicked');
}
}
`

$3

`typescript
import { Component, inject, computed } from '@angular/core';
import { I18nService, TextComponent } from 'valtech-components';

@Component({
selector: 'app-i18n-example',
standalone: true,
imports: [TextComponent],
template:


})
export class I18nExampleComponent {
private i18n = inject(I18nService);

// Use computed() for reactive translations
welcomeText = computed(() => this.i18n.t('home.welcome'));
}
`

$3

`typescript
import { Component, inject } from '@angular/core';
import { AuthService } from 'valtech-components';

@Component({
selector: 'app-auth-example',
template: ...
})
export class AuthExampleComponent {
private auth = inject(AuthService);

async loginWithGoogle() {
await this.auth.loginWithGoogle();
}

async logout() {
await this.auth.logout();
}

get isAuthenticated() {
return this.auth.isAuthenticated();
}
}
`

$3

`typescript
import { Component, inject } from '@angular/core';
import { AnalyticsService } from 'valtech-components';

@Component({
selector: 'app-analytics-example',
template: ...
})
export class AnalyticsExampleComponent {
private analytics = inject(AnalyticsService);

trackEvent() {
this.analytics.logEvent('button_click', {
button_name: 'signup',
page: 'home'
});
}
}
`

Development

$3

- Node.js 18+
- npm 9+

$3

`bash


Install dependencies

npm install

Start Storybook

npm run storybook

Open http://localhost:6006

`

$3

| Command | Description |
|---------|-------------|
| npm run build | Build the library |
| npm run build:prod | Production build (optimized) |
| npm run storybook | Start Storybook dev server (port 6006) |
| npm run build-storybook | Build static Storybook |
| npm run test | Run unit tests |
| npm run prettier` | Format source files |

Documentation

For complete documentation, examples, and API reference, visit:

https://ui.myvaltech.com

License

MIT