Talenra – Inbox library for Angular

The Talenra Inbox library for Angular offers the possibility to create customizable inbox components with different requirements.

Setup and Installation

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

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

Install the library

1. 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://registry.npmjs.org/
npm login --scope=@talenra

2. Install the package and @talenra/components which we will use for the layout (<talenra-app-frame>).

npm add @talenra/components @talenra/inbox

3. Add the Talenra icons to your stylesheet. Now also add the Angular Material base stylesheet.

// src/styles.scss
@use '@talenra/icons/styles';
@use '@angular/material/prebuilt-themes/indigo-pink';

4. Add the angular2-draggable stylesheet to the use styles in the main angular.json of the application. To use the resizing feature of the detail-view.

// src/angular.json
"styles": [
...
+   "node_modules/angular2-draggable/css/resizable.min.css"
]

5. Import the module into your app and co-dependencies:

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { WorkspaceSimpleComponent } from '@talenra/components/workspace-simple'; // <-- required
import { InboxComponent } from '@talenra/inbox'; // <-- required

@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule,
    BrowserModule,
    BrowserAnimationsModule, // <-- required
    WorkspaceSimpleComponent, // <-- required
    InboxComponent, // <-- required
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Configuration

Translation Setup for Talenra Libraries

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 { provideTalenraInboxConfig } from '@talenra/inbox';
import { TalenraBaseTranslations } from '@talenra/components/locales';
import { TalenraInboxTranslations } from '@talenra/inbox';

export const appConfig: ApplicationConfig = {
  providers: [
    // Configure Base library translations
    provideTalenraBaseConfig({
      translation: TalenraBaseTranslations.deCH.translations, // or frCH, itCH
    }),
    // Configure Inbox library translations
    provideTalenraInboxConfig({
      translation: TalenraInboxTranslations.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 { TalenraInboxConfig } from '@talenra/inbox';
import { TalenraBaseTranslations } from '@talenra/components/locales';
import { TalenraInboxTranslations } from '@talenra/inbox';

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

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

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

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

Available Translation Objects

• Base Library: TalenraBaseTranslations from @talenra/components/locales

  • TalenraBaseTranslations.deCH
  • TalenraBaseTranslations.frCH
  • TalenraBaseTranslations.itCH

• Inbox Library: TalenraInboxTranslations from @talenra/inbox

  • TalenraInboxTranslations.deCH
  • TalenraInboxTranslations.frCH
  • TalenraInboxTranslations.itCH

How to Get Started

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

API Documentation

The API documentation is available in the documentation of the library.

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

Resources

• Documentation (this document)
• 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]