@reliability-design/angular

Angular wrappers for Reliability Design web components.

Installation

npm install @reliability-design/angular

Usage

Import the Module

import { NgModule } from '@angular/core';
import { ReliabilityDesignModule } from '@reliability-design/angular';

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

For standalone components:

import { Component } from '@angular/core';
import { RelButtonDirective, RelTextfieldDirective } from '@reliability-design/angular';

@Component({
  standalone: true,
  imports: [RelButtonDirective, RelTextfieldDirective],
  template: `
    <rel-textfield label="Username"></rel-textfield>
    <rel-button variant="primary">Submit</rel-button>
  `,
})
export class MyComponent {}

Form Controls with Reactive Forms

All form control directives implement ControlValueAccessor for seamless integration with Angular forms:

import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { RelTextfieldDirective, RelCheckboxDirective } from '@reliability-design/angular';

@Component({
  standalone: true,
  imports: [ReactiveFormsModule, RelTextfieldDirective, RelCheckboxDirective],
  template: `
    <form [formGroup]="form">
      <rel-textfield formControlName="username" label="Username"></rel-textfield>
      <rel-checkbox formControlName="terms" label="Accept Terms"></rel-checkbox>
    </form>
  `,
})
export class FormComponent {
  form = new FormGroup({
    username: new FormControl(''),
    terms: new FormControl(false),
  });
}

Form Controls with ngModel

<rel-textfield [(ngModel)]="username" label="Username"></rel-textfield>
<rel-select [(ngModel)]="country" label="Country"></rel-select>
<rel-checkbox [(ngModel)]="accepted"></rel-checkbox>
<rel-radio [(ngModel)]="choice"></rel-radio>
<rel-switch [(ngModel)]="enabled"></rel-switch>
<rel-slider [(ngModel)]="volume" min="0" max="100"></rel-slider>

Event-Driven Components

Components with custom events provide @Output() EventEmitters:

import { Component } from '@angular/core';
import { RelTabDirective } from '@reliability-design/angular';

@Component({
  standalone: true,
  imports: [RelTabDirective],
  template: `
    <rel-tab (tabChange)="onTabChange($event)">
      <div slot="tab">Tab 1</div>
      <div slot="panel">Panel 1</div>
    </rel-tab>
  `,
})
export class TabsComponent {
  onTabChange(event: { index: number }) {
    console.log('Tab changed to:', event.index);
  }
}

Component Categories

Form Controls (6)

• rel-textfield - Text input with ControlValueAccessor
• rel-select - Select dropdown with ControlValueAccessor
• rel-checkbox - Checkbox with ControlValueAccessor
• rel-radio - Radio button with ControlValueAccessor
• rel-switch - Toggle switch with ControlValueAccessor
• rel-slider - Range slider with ControlValueAccessor

Event-Driven Components (7)

• rel-tab - Tab navigation (@Output: tabChange)
• rel-menu - Menu with items (@Output: menuItemClick)
• rel-accordion - Expandable sections (@Output: toggle)
• rel-chip - Removable chips (@Output: removed)
• rel-toast - Toast notifications (@Output: dismissed, action)
• rel-snackbar - Snackbar messages (@Output: dismissed, action)
• rel-stepper - Step-by-step wizard (@Output: stepChange)

Passive Components (13)

• rel-button - Button
• rel-avatar - User avatar
• rel-badge - Notification badge
• rel-card - Card container
• rel-cardmedia - Card media
• rel-container - Layout container
• rel-divider - Visual divider
• rel-layout - Flexbox layout
• rel-progress - Progress indicator
• rel-breadcrumb - Breadcrumb navigation
• rel-alert - Alert messages
• rel-segmented-button - Segmented button group
• rel-tooltip - Tooltip overlay

Architecture

This package uses Angular directives (not components) that attach to the existing web component tags. This approach:

• Preserves web component behavior and styling
• Enables Angular forms integration via ControlValueAccessor
• Maps CustomEvents to Angular EventEmitters
• Works with both NgModule and standalone components
• Maintains Light DOM (no Shadow DOM conflicts)

License

MIT