FNLabel

FNLabel is a reusable Angular standalone component library for rendering labels with optional translation support using @ngx-translate/core.

📦 Installation

Install the library in your Angular project:

npm install fn-label

🛠️ Required Dependencies

This component internally uses @ngx-translate/core for label translations. Therefore, the host application must install the following packages:

npm install @ngx-translate/core @ngx-translate/http-loader

⚙️ Configuration

Add the translation configuration in your main.ts or app.config.ts.

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { importProvidersFrom } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(),
    importProvidersFrom(
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient],
        },
      })
    ),
  ],
});

[!CAUTION] If the translation module is not configured, Angular will throw: NullInjectorError: No provider for TranslateService

🚀 Usage

Use the component in your template:

<fn-label label="FORM.NAME" [required]="true"></fn-label>

Example Translation File (src/assets/i18n/en.json)

{
  "FORM": {
    "NAME": "Name"
  }
}

📄 Component Inputs

| Input | Type | Default | Description | | :--- | :--- | :--- | :--- | | label | string | '' | Label text or translation key. Supports :: delimiter for multiple keys. | | required | boolean | true | Displays optional indicator if set to false. | | className | string | '' | Custom CSS classes to apply to the label. | | variant | string | 'p1' | Typography variant (e.g., h1, h2, p1, p1Bold). | | statusLabel| string | undefined| Status style (e.g., Success, Warning, Hot). | | color | string | '' | Custom color (hex, rgb, or CSS variable). | | hideOptional | boolean | false | Force hide the (Optional) indicator. | | for | string | '' | The for attribute for the label. | | field | FNLabelProps| undefined| Full configuration object for the label. |