Talenra – Base Library for Angular

The Base library for Angular provides reusable building blocks for Angular apps. Using the pre-made components allows frontend developers to focus on the app-specific challenges. The library fuels rapid development of Talenra apps that comply with the Talenra design system.

Setup and Installation

Make sure you have node >= 24 and npm >= 11 installed.

# Check node version
node --version
# Check npm version
npm --version

The package @talenra/components is served via the Talenra artifactory. Access to the artifactory requires the TC user provided in the Talenra onboarding process.

Add the @talenra registry to your npm configuration and login.

npm config set @talenra:registry=https://gitlab.com:talenra/workspace.git
npm login --scope=@talenra

Install the package.

npm i @talenra/components

Configuration

Translation Setup for Talenra Library

The Talenra libraries support internationalization with translations for German (de-CH), French (fr-CH), and Italian (it-CH). You can configure translations in two ways:

Method 1: Using Provider Functions

Configure translations in your app.config.ts using the provider functions:

import { provideTalenraBaseConfig } from '@talenra/components/config';
import { TalenraBaseTranslations } from '@talenra/components/locales';

export const appConfig: ApplicationConfig = {
  providers: [
    // Configure Base library translations
    provideTalenraBaseConfig({
      translation: TalenraBaseTranslations.deCH.translations, // or frCH, itCH
    }),
    // ... other providers
  ],
};

You can also provide partial translations to override specific strings:

provideTalenraBaseConfig({
  translation: {
    ...TalenraBaseTranslations.deCH.translations,
    paginatorItemsPerPage: 'Custom items per page text',
  },
});

Method 2: Using LOCALE_ID With Constructor Injection

For applications that depend on Angular's LOCALE_ID, inject the configuration services into your root component (commonly app.component.ts):

import { Component, inject, LOCALE_ID } from '@angular/core';
import { TalenraBaseConfig } from '@talenra/components/config';
import { TalenraBaseTranslations } from '@talenra/components/locales';

@Component({
  // ...component configuration
})
export class AppComponent {
  private localeId = inject(LOCALE_ID);
  private talenraBaseConfig = inject(TalenraBaseConfig);

  constructor() {
    // Set the translations based on LOCALE_ID
    let baseTranslation = TalenraBaseTranslations.deCH;

    if (this.localeId === 'fr-CH') {
      baseTranslation = TalenraBaseTranslations.frCH;
    }
    if (this.localeId === 'it-CH') {
      baseTranslation = TalenraBaseTranslations.itCH;
    }

    this.talenraBaseConfig.setTranslation(baseTranslation.translations);
  }
}

Available Translation Objects

• Base Library: TalenraBaseTranslations from @talenra/components/locales
  • TalenraBaseTranslations.deCH
  • TalenraBaseTranslations.frCH
  • TalenraBaseTranslations.itCH

How to Get Started

The tutorial "build a simple app" is a good starting point if you're using the library for the first time.

Bug Reports

Please open a new issue to report bugs. The better your report, the faster we can solve the issue. Information required to address the issue include:

• Environment (versions involved)
• Step-by-step guide on how to reproduce the bug
• Description of the current behavior
• Description of the expected behavior
• If the issue affects rendering, a screenshot might help

Testing

See testing documentation.

Resources

• Documentation (this document)
• Demo app
• GitLab project: the development platform including source code, issues, milestones
• Developer chat channel (announcements and support): The channel is currently private. Drop us a line if you would like to join.

Contact

Lead Talenra
[email protected]