diff --git a/projects/angular-intl-demo/src/app/app.config.ts b/projects/angular-intl-demo/src/app/app.config.ts
index fe83d83b..0c049e3f 100644
--- a/projects/angular-intl-demo/src/app/app.config.ts
+++ b/projects/angular-intl-demo/src/app/app.config.ts
@@ -1,6 +1,9 @@
 import { provideHttpClient } from '@angular/common/http';
 import { ApplicationConfig } from '@angular/core';
-import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import {
+  MAT_FORM_FIELD_DEFAULT_OPTIONS,
+  MatFormFieldDefaultOptions,
+} from '@angular/material/form-field';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter, withHashLocation } from '@angular/router';
 import { provideMarkdown } from 'ngx-markdown';
@@ -13,7 +16,7 @@ export const appConfig: ApplicationConfig = {
       provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
       useValue: {
         subscriptSizing: 'dynamic',
-      },
+      } satisfies MatFormFieldDefaultOptions,
     },
     provideAnimations(),
     provideHttpClient(),
diff --git a/projects/angular-intl-demo/src/app/getting-started/getting-started.component.ts b/projects/angular-intl-demo/src/app/getting-started/getting-started.component.ts
index 0894ee01..37eb0941 100644
--- a/projects/angular-intl-demo/src/app/getting-started/getting-started.component.ts
+++ b/projects/angular-intl-demo/src/app/getting-started/getting-started.component.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-import { MarkdownModule } from 'ngx-markdown';
+import { MarkdownComponent } from 'ngx-markdown';
 
 @Component({
   selector: 'app-getting-started',
   templateUrl: './getting-started.component.html',
   styleUrls: ['./getting-started.component.scss'],
-  imports: [MarkdownModule],
+  imports: [MarkdownComponent],
 })
 export class GettingStartedComponent {}
diff --git a/projects/angular-intl-demo/src/app/pipes/country/country.component.html b/projects/angular-intl-demo/src/app/pipes/country/country.component.html
index 3dc01732..955a1e36 100644
--- a/projects/angular-intl-demo/src/app/pipes/country/country.component.html
+++ b/projects/angular-intl-demo/src/app/pipes/country/country.component.html
@@ -2,7 +2,7 @@
   <mat-form-field>
     <mat-label>Country to transform</mat-label>
     <mat-select [(ngModel)]="selectedCountry">
-      @for (country of countries; track country) {
+      @for (country of countries; track $index) {
         <mat-option [value]="country">{{ country }}</mat-option>
       }
     </mat-select>
@@ -12,11 +12,11 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      @for (language of languages; track language) {
+      @for (language of languages; track $index) {
         <mat-option [value]="language">{{ language }}</mat-option>
       }
     </mat-select>
   </mat-form-field>
 </div>
 
-<p>{{ selectedCountry | intlCountry: { locale } }}</p>
+<p>{{ selectedCountry() | intlCountry: options() }}</p>
diff --git a/projects/angular-intl-demo/src/app/pipes/country/country.component.ts b/projects/angular-intl-demo/src/app/pipes/country/country.component.ts
index 6da96724..a9baf40a 100644
--- a/projects/angular-intl-demo/src/app/pipes/country/country.component.ts
+++ b/projects/angular-intl-demo/src/app/pipes/country/country.component.ts
@@ -1,9 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, computed, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
-import { IntlCountryPipe } from '../../../../../angular-ecmascript-intl/src/lib/country/intl-country.pipe';
+import {
+  IntlCountryPipe,
+  IntlCountryPipeOptions,
+} from 'angular-ecmascript-intl';
 import { languages } from '../../languages';
 import { countries } from './countries';
 
@@ -22,6 +25,7 @@ import { countries } from './countries';
 export class CountryComponent {
   languages = languages;
   countries = countries;
-  selectedCountry = 'DE';
-  locale?: string;
+  selectedCountry = signal('DE');
+  locale = signal<string | undefined>(undefined);
+  options = computed<IntlCountryPipeOptions>(() => ({ locale: this.locale() }));
 }
diff --git a/projects/angular-intl-demo/src/app/pipes/currency/currency.component.html b/projects/angular-intl-demo/src/app/pipes/currency/currency.component.html
index e54f80a9..a030721a 100644
--- a/projects/angular-intl-demo/src/app/pipes/currency/currency.component.html
+++ b/projects/angular-intl-demo/src/app/pipes/currency/currency.component.html
@@ -7,7 +7,7 @@
   <mat-form-field>
     <mat-label>Currency</mat-label>
     <mat-select [(ngModel)]="currency">
-      @for (currency of currencies; track currency) {
+      @for (currency of currencies; track $index) {
         <mat-option [value]="currency">{{ currency }}</mat-option>
       }
     </mat-select>
@@ -17,7 +17,7 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      @for (language of languages; track language) {
+      @for (language of languages; track $index) {
         <mat-option [value]="language">{{ language }}</mat-option>
       }
     </mat-select>
@@ -128,21 +128,5 @@
 </div>
 
 <p>
-  {{
-    enteredNumber
-      | intlCurrency
-        : currency
-        : {
-            locale,
-            currencyDisplay,
-            currencySign,
-            notation,
-            signDisplay,
-            minimumIntegerDigits: minimumIntegerDigits ?? undefined,
-            minimumFractionDigits: minimumFractionDigits ?? undefined,
-            maximumFractionDigits: maximumFractionDigits ?? undefined,
-            minimumSignificantDigits: minimumSignificantDigits ?? undefined,
-            maximumSignificantDigits: maximumSignificantDigits ?? undefined,
-          }
-  }}
+  {{ enteredNumber() | intlCurrency: currency() : options() }}
 </p>
diff --git a/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts b/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts
index d44234fb..623c0c60 100644
--- a/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts
+++ b/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts
@@ -1,10 +1,13 @@
-import { Component } from '@angular/core';
+import { Component, computed, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import { IntlCurrencyPipe } from '../../../../../angular-ecmascript-intl/src/lib/currency/intl-currency.pipe';
+import {
+  IntlCurrencyPipe,
+  IntlCurrencyPipeOptions,
+} from 'angular-ecmascript-intl';
 import { languages } from '../../languages';
 import { currencies } from './currencies';
 
@@ -22,28 +25,41 @@ import { currencies } from './currencies';
   ],
 })
 export class CurrencyComponent {
-  enteredNumber = '0.24';
-  currency = 'USD';
+  enteredNumber = signal('0.24');
+  currency = signal('USD');
   languages = languages;
   currencies = currencies;
-  locale?: string;
-  notation?: Intl.NumberFormatOptions['notation'];
-  signDisplay?: Intl.NumberFormatOptions['signDisplay'];
-  currencyDisplay?: Intl.NumberFormatOptions['currencyDisplay'];
-  currencySign?: Intl.NumberFormatOptions['currencySign'];
-  minimumIntegerDigits?:
-    | Intl.NumberFormatOptions['minimumIntegerDigits']
-    | null;
-  minimumFractionDigits?:
-    | Intl.NumberFormatOptions['minimumFractionDigits']
-    | null;
-  maximumFractionDigits?:
-    | Intl.NumberFormatOptions['maximumFractionDigits']
-    | null;
-  minimumSignificantDigits?:
-    | Intl.NumberFormatOptions['minimumSignificantDigits']
-    | null;
-  maximumSignificantDigits?:
-    | Intl.NumberFormatOptions['maximumSignificantDigits']
-    | null;
+  locale = signal<string | undefined>(undefined);
+  notation = signal<IntlCurrencyPipeOptions['notation']>(undefined);
+  signDisplay = signal<IntlCurrencyPipeOptions['signDisplay']>(undefined);
+  currencyDisplay =
+    signal<IntlCurrencyPipeOptions['currencyDisplay']>(undefined);
+  currencySign = signal<IntlCurrencyPipeOptions['currencySign']>(undefined);
+  minimumIntegerDigits = signal<
+    IntlCurrencyPipeOptions['minimumIntegerDigits'] | null
+  >(undefined);
+  minimumFractionDigits = signal<
+    IntlCurrencyPipeOptions['minimumFractionDigits'] | null
+  >(undefined);
+  maximumFractionDigits = signal<
+    IntlCurrencyPipeOptions['maximumFractionDigits'] | null
+  >(undefined);
+  minimumSignificantDigits = signal<
+    IntlCurrencyPipeOptions['minimumSignificantDigits'] | null
+  >(undefined);
+  maximumSignificantDigits = signal<
+    IntlCurrencyPipeOptions['maximumSignificantDigits'] | null
+  >(undefined);
+  options = computed<IntlCurrencyPipeOptions>(() => ({
+    locale: this.locale(),
+    currencyDisplay: this.currencyDisplay(),
+    currencySign: this.currencySign(),
+    notation: this.notation(),
+    signDisplay: this.signDisplay(),
+    minimumIntegerDigits: this.minimumIntegerDigits() ?? undefined,
+    minimumFractionDigits: this.minimumFractionDigits() ?? undefined,
+    maximumFractionDigits: this.maximumFractionDigits() ?? undefined,
+    minimumSignificantDigits: this.minimumSignificantDigits() ?? undefined,
+    maximumSignificantDigits: this.maximumSignificantDigits() ?? undefined,
+  }));
 }
diff --git a/projects/angular-intl-demo/src/app/pipes/date/date.component.html b/projects/angular-intl-demo/src/app/pipes/date/date.component.html
index cde1e49b..7d2e772c 100644
--- a/projects/angular-intl-demo/src/app/pipes/date/date.component.html
+++ b/projects/angular-intl-demo/src/app/pipes/date/date.component.html
@@ -17,7 +17,7 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      @for (language of languages; track language) {
+      @for (language of languages; track $index) {
         <mat-option [value]="language">{{ language }}</mat-option>
       }
     </mat-select>
@@ -55,4 +55,4 @@
   </mat-form-field>
 </div>
 
-<p>{{ selectedDate | intlDate: { dateStyle, timeStyle, hour12, locale } }}</p>
+<p>{{ selectedDate() | intlDate: options() }}</p>
diff --git a/projects/angular-intl-demo/src/app/pipes/date/date.component.ts b/projects/angular-intl-demo/src/app/pipes/date/date.component.ts
index 120a5d0d..77a74677 100644
--- a/projects/angular-intl-demo/src/app/pipes/date/date.component.ts
+++ b/projects/angular-intl-demo/src/app/pipes/date/date.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, computed, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
@@ -6,7 +6,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import { IntlDatePipe } from '../../../../../angular-ecmascript-intl/src/lib/date/intl-date.pipe';
+import { IntlDatePipe, IntlDatePipeOptions } from 'angular-ecmascript-intl';
 import { languages } from '../../languages';
 import { getDateString } from '../date-utils';
 
@@ -27,10 +27,15 @@ import { getDateString } from '../date-utils';
 })
 export class DateComponent {
   languages = languages;
-  selectedDate = getDateString();
-  dateStyle: Intl.DateTimeFormatOptions['dateStyle'];
-  timeStyle: Intl.DateTimeFormatOptions['timeStyle'];
-  hour12: Intl.DateTimeFormatOptions['hour12'];
-  dayPeriod: Intl.DateTimeFormatOptions['dayPeriod'];
-  locale?: string;
+  selectedDate = signal(getDateString());
+  dateStyle = signal<IntlDatePipeOptions['dateStyle']>(undefined);
+  timeStyle = signal<IntlDatePipeOptions['timeStyle']>(undefined);
+  hour12 = signal<IntlDatePipeOptions['hour12']>(undefined);
+  locale = signal<string | undefined>(undefined);
+  options = computed<IntlDatePipeOptions>(() => ({
+    locale: this.locale(),
+    dateStyle: this.dateStyle(),
+    timeStyle: this.timeStyle(),
+    hour12: this.hour12(),
+  }));
 }
diff --git a/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.html b/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.html
index 97a8fdd7..407aeb0a 100644
--- a/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.html
+++ b/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.html
@@ -8,7 +8,7 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      @for (language of languages; track language) {
+      @for (language of languages; track $index) {
         <mat-option [value]="language">{{ language }}</mat-option>
       }
     </mat-select>
@@ -99,18 +99,5 @@
 </div>
 
 <p>
-  {{
-    enteredNumber
-      | intlDecimal
-        : {
-            locale,
-            notation,
-            signDisplay,
-            minimumIntegerDigits: minimumIntegerDigits ?? undefined,
-            minimumFractionDigits: minimumFractionDigits ?? undefined,
-            maximumFractionDigits: maximumFractionDigits ?? undefined,
-            minimumSignificantDigits: minimumSignificantDigits ?? undefined,
-            maximumSignificantDigits: maximumSignificantDigits ?? undefined,
-          }
-  }}
+  {{ enteredNumber() | intlDecimal: options() }}
 </p>
diff --git a/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts b/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts
index 18fe191f..77b0c437 100644
--- a/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts
+++ b/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts
@@ -1,10 +1,13 @@
-import { Component } from '@angular/core';
+import { Component, computed, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import { IntlDecimalPipe } from '../../../../../angular-ecmascript-intl/src/lib/decimal/intl-decimal.pipe';
+import {
+  IntlDecimalPipe,
+  IntlDecimalPipeOptions,
+} from 'angular-ecmascript-intl';
 import { languages } from '../../languages';
 
 @Component({
@@ -21,24 +24,34 @@ import { languages } from '../../languages';
   ],
 })
 export class DecimalComponent {
-  enteredNumber = '1024.4539';
+  enteredNumber = signal('1024.4539');
   languages = languages;
-  locale?: string;
-  notation?: Intl.NumberFormatOptions['notation'];
-  signDisplay?: Intl.NumberFormatOptions['signDisplay'];
-  minimumIntegerDigits?:
-    | Intl.NumberFormatOptions['minimumIntegerDigits']
-    | null;
-  minimumFractionDigits?:
-    | Intl.NumberFormatOptions['minimumFractionDigits']
-    | null;
-  maximumFractionDigits?:
-    | Intl.NumberFormatOptions['maximumFractionDigits']
-    | null;
-  minimumSignificantDigits?:
-    | Intl.NumberFormatOptions['minimumSignificantDigits']
-    | null;
-  maximumSignificantDigits?:
-    | Intl.NumberFormatOptions['maximumSignificantDigits']
-    | null;
+  locale = signal<string | undefined>(undefined);
+  notation = signal<IntlDecimalPipeOptions['notation']>(undefined);
+  signDisplay = signal<IntlDecimalPipeOptions['signDisplay']>(undefined);
+  minimumIntegerDigits = signal<
+    IntlDecimalPipeOptions['minimumIntegerDigits'] | null
+  >(undefined);
+  minimumFractionDigits = signal<
+    IntlDecimalPipeOptions['minimumFractionDigits'] | null
+  >(undefined);
+  maximumFractionDigits = signal<
+    IntlDecimalPipeOptions['maximumFractionDigits'] | null
+  >(undefined);
+  minimumSignificantDigits = signal<
+    IntlDecimalPipeOptions['minimumSignificantDigits'] | null
+  >(undefined);
+  maximumSignificantDigits = signal<
+    IntlDecimalPipeOptions['maximumSignificantDigits'] | null
+  >(undefined);
+  options = computed<IntlDecimalPipeOptions>(() => ({
+    locale: this.locale(),
+    notation: this.notation(),
+    signDisplay: this.signDisplay(),
+    minimumIntegerDigits: this.minimumIntegerDigits() ?? undefined,
+    minimumFractionDigits: this.minimumFractionDigits() ?? undefined,
+    maximumFractionDigits: this.maximumFractionDigits() ?? undefined,
+    minimumSignificantDigits: this.minimumSignificantDigits() ?? undefined,
+    maximumSignificantDigits: this.maximumSignificantDigits() ?? undefined,
+  }));
 }
diff --git a/projects/angular-intl-demo/src/app/pipes/language/language.component.html b/projects/angular-intl-demo/src/app/pipes/language/language.component.html
index 8973e068..1203f723 100644
--- a/projects/angular-intl-demo/src/app/pipes/language/language.component.html
+++ b/projects/angular-intl-demo/src/app/pipes/language/language.component.html
@@ -2,7 +2,7 @@
   <mat-form-field>
     <mat-label>Language to transform</mat-label>
     <mat-select [(ngModel)]="selectedLanguage">
-      @for (language of languages; track language) {
+      @for (language of languages; track $index) {
         <mat-option [value]="language">{{ language }}</mat-option>
       }
     </mat-select>
@@ -12,7 +12,7 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      @for (language of languages; track language) {
+      @for (language of languages; track $index) {
         <mat-option [value]="language">{{ language }}</mat-option>
       }
     </mat-select>
@@ -28,4 +28,4 @@
   </mat-form-field>
 </div>
 
-<p>{{ selectedLanguage | intlLanguage: { languageDisplay, locale } }}</p>
+<p>{{ selectedLanguage() | intlLanguage: options() }}</p>
diff --git a/projects/angular-intl-demo/src/app/pipes/language/language.component.ts b/projects/angular-intl-demo/src/app/pipes/language/language.component.ts
index b1e3159c..bfa6b548 100644
--- a/projects/angular-intl-demo/src/app/pipes/language/language.component.ts
+++ b/projects/angular-intl-demo/src/app/pipes/language/language.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, computed, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -6,7 +6,7 @@ import { MatSelectModule } from '@angular/material/select';
 import {
   IntlLanguagePipe,
   IntlLanguagePipeOptions,
-} from '../../../../../angular-ecmascript-intl/src/lib/language/intl-language.pipe';
+} from 'angular-ecmascript-intl';
 import { languages } from '../../languages';
 
 @Component({
@@ -23,7 +23,12 @@ import { languages } from '../../languages';
 })
 export class LanguageComponent {
   languages = languages;
-  selectedLanguage = 'de-DE';
-  languageDisplay?: IntlLanguagePipeOptions['languageDisplay'];
-  locale?: string;
+  selectedLanguage = signal('de-DE');
+  languageDisplay =
+    signal<IntlLanguagePipeOptions['languageDisplay']>(undefined);
+  locale = signal<string | undefined>(undefined);
+  options = computed<IntlLanguagePipeOptions>(() => ({
+    locale: this.locale(),
+    languageDisplay: this.languageDisplay(),
+  }));
 }
diff --git a/projects/angular-intl-demo/src/app/pipes/list/list.component.html b/projects/angular-intl-demo/src/app/pipes/list/list.component.html
index d41abdab..db10237c 100644
--- a/projects/angular-intl-demo/src/app/pipes/list/list.component.html
+++ b/projects/angular-intl-demo/src/app/pipes/list/list.component.html
@@ -2,7 +2,7 @@
   <mat-form-field>
     <mat-label>List items</mat-label>
     <mat-select [(ngModel)]="selectedItems" multiple>
-      @for (item of list; track item) {
+      @for (item of list; track $index) {
         <mat-option [value]="item">{{ item }}</mat-option>
       }
     </mat-select>
@@ -12,7 +12,7 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      @for (language of languages; track language) {
+      @for (language of languages; track $index) {
         <mat-option [value]="language">{{ language }}</mat-option>
       }
     </mat-select>
@@ -39,4 +39,4 @@
   </mat-form-field>
 </div>
 
-<p>{{ selectedItems | intlList: { locale, type, style } }}</p>
+<p>{{ selectedItems() | intlList: options() }}</p>
diff --git a/projects/angular-intl-demo/src/app/pipes/list/list.component.ts b/projects/angular-intl-demo/src/app/pipes/list/list.component.ts
index 27611648..07e54832 100644
--- a/projects/angular-intl-demo/src/app/pipes/list/list.component.ts
+++ b/projects/angular-intl-demo/src/app/pipes/list/list.component.ts
@@ -1,10 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, computed, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
-import { IntlListPipeOptions } from 'projects/angular-ecmascript-intl/src/lib/list/intl-list.pipe';
-import { IntlListPipe } from '../../../../../angular-ecmascript-intl/src/lib/list/intl-list.pipe';
+import { IntlListPipe, IntlListPipeOptions } from 'angular-ecmascript-intl';
 import { languages } from '../../languages';
 import { list } from './list';
 
@@ -23,8 +22,13 @@ import { list } from './list';
 export class ListComponent {
   languages = languages;
   list = list;
-  selectedItems: string[] = [list[0], list[2], list[3]];
-  locale?: string;
-  type?: IntlListPipeOptions['type'];
-  style?: IntlListPipeOptions['style'];
+  selectedItems = signal([list[0], list[2], list[3]]);
+  locale = signal<string | undefined>(undefined);
+  type = signal<IntlListPipeOptions['type']>(undefined);
+  style = signal<IntlListPipeOptions['style']>(undefined);
+  options = computed<IntlListPipeOptions>(() => ({
+    locale: this.locale(),
+    type: this.type(),
+    style: this.style(),
+  }));
 }
diff --git a/projects/angular-intl-demo/src/app/pipes/percent/percent.component.html b/projects/angular-intl-demo/src/app/pipes/percent/percent.component.html
index 8079cac9..cbf3bb43 100644
--- a/projects/angular-intl-demo/src/app/pipes/percent/percent.component.html
+++ b/projects/angular-intl-demo/src/app/pipes/percent/percent.component.html
@@ -8,7 +8,7 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      @for (language of languages; track language) {
+      @for (language of languages; track $index) {
         <mat-option [value]="language">{{ language }}</mat-option>
       }
     </mat-select>
@@ -99,18 +99,5 @@
 </div>
 
 <p>
-  {{
-    enteredNumber
-      | intlPercent
-        : {
-            locale,
-            notation,
-            signDisplay,
-            minimumIntegerDigits: minimumIntegerDigits ?? undefined,
-            minimumFractionDigits: minimumFractionDigits ?? undefined,
-            maximumFractionDigits: maximumFractionDigits ?? undefined,
-            minimumSignificantDigits: minimumSignificantDigits ?? undefined,
-            maximumSignificantDigits: maximumSignificantDigits ?? undefined,
-          }
-  }}
+  {{ enteredNumber() | intlPercent: options() }}
 </p>
diff --git a/projects/angular-intl-demo/src/app/pipes/percent/percent.component.ts b/projects/angular-intl-demo/src/app/pipes/percent/percent.component.ts
index 82d75e08..e6b9c201 100644
--- a/projects/angular-intl-demo/src/app/pipes/percent/percent.component.ts
+++ b/projects/angular-intl-demo/src/app/pipes/percent/percent.component.ts
@@ -1,10 +1,13 @@
-import { Component } from '@angular/core';
+import { Component, computed, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import { IntlPercentPipe } from '../../../../../angular-ecmascript-intl/src/lib/percent/intl-percent.pipe';
+import {
+  IntlPercentPipe,
+  IntlPercentPipeOptions,
+} from 'angular-ecmascript-intl';
 import { languages } from '../../languages';
 
 @Component({
@@ -21,24 +24,34 @@ import { languages } from '../../languages';
   ],
 })
 export class PercentComponent {
-  enteredNumber = '0.24';
+  enteredNumber = signal('0.24');
   languages = languages;
-  locale?: string;
-  notation?: Intl.NumberFormatOptions['notation'];
-  signDisplay?: Intl.NumberFormatOptions['signDisplay'];
-  minimumIntegerDigits?:
-    | Intl.NumberFormatOptions['minimumIntegerDigits']
-    | null;
-  minimumFractionDigits?:
-    | Intl.NumberFormatOptions['minimumFractionDigits']
-    | null;
-  maximumFractionDigits?:
-    | Intl.NumberFormatOptions['maximumFractionDigits']
-    | null;
-  minimumSignificantDigits?:
-    | Intl.NumberFormatOptions['minimumSignificantDigits']
-    | null;
-  maximumSignificantDigits?:
-    | Intl.NumberFormatOptions['maximumSignificantDigits']
-    | null;
+  locale = signal<string | undefined>(undefined);
+  notation = signal<IntlPercentPipeOptions['notation']>(undefined);
+  signDisplay = signal<IntlPercentPipeOptions['signDisplay']>(undefined);
+  minimumIntegerDigits = signal<
+    IntlPercentPipeOptions['minimumIntegerDigits'] | null
+  >(undefined);
+  minimumFractionDigits = signal<
+    IntlPercentPipeOptions['minimumFractionDigits'] | null
+  >(undefined);
+  maximumFractionDigits = signal<
+    IntlPercentPipeOptions['maximumFractionDigits'] | null
+  >(undefined);
+  minimumSignificantDigits = signal<
+    IntlPercentPipeOptions['minimumSignificantDigits'] | null
+  >(undefined);
+  maximumSignificantDigits = signal<
+    IntlPercentPipeOptions['maximumSignificantDigits'] | null
+  >(undefined);
+  options = computed<IntlPercentPipeOptions>(() => ({
+    locale: this.locale(),
+    notation: this.notation(),
+    signDisplay: this.signDisplay(),
+    minimumIntegerDigits: this.minimumIntegerDigits() ?? undefined,
+    minimumFractionDigits: this.minimumFractionDigits() ?? undefined,
+    maximumFractionDigits: this.maximumFractionDigits() ?? undefined,
+    minimumSignificantDigits: this.minimumSignificantDigits() ?? undefined,
+    maximumSignificantDigits: this.maximumSignificantDigits() ?? undefined,
+  }));
 }
diff --git a/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.html b/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.html
index 9621e5f6..51605f8b 100644
--- a/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.html
+++ b/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.html
@@ -17,7 +17,7 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      @for (language of languages; track language) {
+      @for (language of languages; track $index) {
         <mat-option [value]="language">{{ language }}</mat-option>
       }
     </mat-select>
@@ -43,4 +43,4 @@
   </mat-form-field>
 </div>
 
-<p>{{ selectedDate | intlRelativeTime: { locale, numeric, style } }}</p>
+<p>{{ selectedDate() | intlRelativeTime: options() }}</p>
diff --git a/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.ts b/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.ts
index 03800d6d..e4a3d394 100644
--- a/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.ts
+++ b/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, computed, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
@@ -6,8 +6,10 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import { IntlRelativeTimePipeOptions } from 'projects/angular-ecmascript-intl/src/lib/relative-time/relative-time.pipe';
-import { IntlRelativeTimePipe } from '../../../../../angular-ecmascript-intl/src/lib/relative-time/relative-time.pipe';
+import {
+  IntlRelativeTimePipe,
+  IntlRelativeTimePipeOptions,
+} from 'angular-ecmascript-intl';
 import { languages } from '../../languages';
 import { getDateString } from '../date-utils';
 
@@ -27,9 +29,14 @@ import { getDateString } from '../date-utils';
   ],
 })
 export class RelativeTimeComponent {
-  selectedDate = getDateString(new Date(new Date().getTime() - 60000));
+  selectedDate = signal(getDateString(new Date(new Date().getTime() - 60000)));
   languages = languages;
-  numeric?: IntlRelativeTimePipeOptions['numeric'];
-  style?: IntlRelativeTimePipeOptions['style'];
-  locale?: IntlRelativeTimePipeOptions['locale'];
+  numeric = signal<IntlRelativeTimePipeOptions['numeric']>(undefined);
+  style = signal<IntlRelativeTimePipeOptions['style']>(undefined);
+  locale = signal<IntlRelativeTimePipeOptions['locale']>(undefined);
+  options = computed<IntlRelativeTimePipeOptions>(() => ({
+    locale: this.locale(),
+    numeric: this.numeric(),
+    style: this.style(),
+  }));
 }
diff --git a/projects/angular-intl-demo/src/app/pipes/unit/unit.component.html b/projects/angular-intl-demo/src/app/pipes/unit/unit.component.html
index a1c93853..61254373 100644
--- a/projects/angular-intl-demo/src/app/pipes/unit/unit.component.html
+++ b/projects/angular-intl-demo/src/app/pipes/unit/unit.component.html
@@ -7,7 +7,7 @@
   <mat-form-field>
     <mat-label>Unit</mat-label>
     <mat-select [(ngModel)]="selectedUnit">
-      @for (unit of units; track unit) {
+      @for (unit of units; track $index) {
         <mat-option [value]="unit">{{ unit }}</mat-option>
       }
     </mat-select>
@@ -17,7 +17,7 @@
     <mat-label>Locale</mat-label>
     <mat-select [(ngModel)]="locale">
       <mat-option [value]="undefined">Browser default</mat-option>
-      @for (language of languages; track language) {
+      @for (language of languages; track $index) {
         <mat-option [value]="language">{{ language }}</mat-option>
       }
     </mat-select>
@@ -118,20 +118,5 @@
 </div>
 
 <p>
-  {{
-    enteredNumber
-      | intlUnit
-        : selectedUnit
-        : {
-            locale,
-            unitDisplay: unitDisplay,
-            notation,
-            signDisplay,
-            minimumIntegerDigits: minimumIntegerDigits ?? undefined,
-            minimumFractionDigits: minimumFractionDigits ?? undefined,
-            maximumFractionDigits: maximumFractionDigits ?? undefined,
-            minimumSignificantDigits: minimumSignificantDigits ?? undefined,
-            maximumSignificantDigits: maximumSignificantDigits ?? undefined,
-          }
-  }}
+  {{ enteredNumber() | intlUnit: selectedUnit() : options() }}
 </p>
diff --git a/projects/angular-intl-demo/src/app/pipes/unit/unit.component.ts b/projects/angular-intl-demo/src/app/pipes/unit/unit.component.ts
index a362cd2c..d375b4b2 100644
--- a/projects/angular-intl-demo/src/app/pipes/unit/unit.component.ts
+++ b/projects/angular-intl-demo/src/app/pipes/unit/unit.component.ts
@@ -1,10 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, computed, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import { IntlUnitPipe } from '../../../../../angular-ecmascript-intl/src/lib/unit/intl-unit.pipe';
+import { IntlUnitPipe, IntlUnitPipeOptions } from 'angular-ecmascript-intl';
 import { languages } from '../../languages';
 import { units } from './units';
 
@@ -22,27 +22,38 @@ import { units } from './units';
   ],
 })
 export class UnitComponent {
-  enteredNumber = '1';
-  selectedUnit = 'hour';
+  enteredNumber = signal('1');
+  selectedUnit = signal('hour');
   languages = languages;
   units = units;
-  locale?: string;
-  notation?: Intl.NumberFormatOptions['notation'];
-  signDisplay?: Intl.NumberFormatOptions['signDisplay'];
-  unitDisplay?: Intl.NumberFormatOptions['unitDisplay'];
-  minimumIntegerDigits?:
-    | Intl.NumberFormatOptions['minimumIntegerDigits']
-    | null;
-  minimumFractionDigits?:
-    | Intl.NumberFormatOptions['minimumFractionDigits']
-    | null;
-  maximumFractionDigits?:
-    | Intl.NumberFormatOptions['maximumFractionDigits']
-    | null;
-  minimumSignificantDigits?:
-    | Intl.NumberFormatOptions['minimumSignificantDigits']
-    | null;
-  maximumSignificantDigits?:
-    | Intl.NumberFormatOptions['maximumSignificantDigits']
-    | null;
+  locale = signal<string | undefined>(undefined);
+  notation = signal<IntlUnitPipeOptions['notation']>(undefined);
+  signDisplay = signal<IntlUnitPipeOptions['signDisplay']>(undefined);
+  unitDisplay = signal<IntlUnitPipeOptions['unitDisplay']>(undefined);
+  minimumIntegerDigits = signal<
+    IntlUnitPipeOptions['minimumIntegerDigits'] | null
+  >(undefined);
+  minimumFractionDigits = signal<
+    IntlUnitPipeOptions['minimumFractionDigits'] | null
+  >(undefined);
+  maximumFractionDigits = signal<
+    IntlUnitPipeOptions['maximumFractionDigits'] | null
+  >(undefined);
+  minimumSignificantDigits = signal<
+    IntlUnitPipeOptions['minimumSignificantDigits'] | null
+  >(undefined);
+  maximumSignificantDigits = signal<
+    IntlUnitPipeOptions['maximumSignificantDigits'] | null
+  >(undefined);
+  options = computed<IntlUnitPipeOptions>(() => ({
+    locale: this.locale(),
+    notation: this.notation(),
+    signDisplay: this.signDisplay(),
+    unitDisplay: this.unitDisplay(),
+    minimumIntegerDigits: this.minimumIntegerDigits() ?? undefined,
+    minimumFractionDigits: this.minimumFractionDigits() ?? undefined,
+    maximumFractionDigits: this.maximumFractionDigits() ?? undefined,
+    minimumSignificantDigits: this.minimumSignificantDigits() ?? undefined,
+    maximumSignificantDigits: this.maximumSignificantDigits() ?? undefined,
+  }));
 }
diff --git a/tsconfig.json b/tsconfig.json
index 074a83d2..8e4e73f0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,9 @@
   "compileOnSave": false,
   "compilerOptions": {
     "paths": {
-      "angular-ecmascript-intl": ["dist/angular-ecmascript-intl"]
+      "angular-ecmascript-intl": [
+        "./projects/angular-ecmascript-intl/src/public-api.ts"
+      ]
     },
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",