Easily translate internal Clarity text into multiple languages.

Internal language strings

Clarity has a short list of text strings that it uses internally for things such as icon alt text or button text. When possible, Clarity avoids using text strings that have to be translated, and rarely changes this list. Any Angular application that needs to support multiple languages can create a different translation and use it for each language.

In order to improve accessibility of its components, Clarity added a default English title to all icons or non-text interactive elements internal to its components. In order to internationalize them we rely on a ClrCommonStrings service that you can declare for your entire app, which will override our default titles with the ones you provide. Then you just need to include it as a provider in your application.

Examples


@Injectable()
export class MyCommonStringsService implements ClrCommonStrings {
  open = 'abra';
}

@NgModule({
  imports: [...],
  declarations: [...],
  providers: [{ provide: ClrCommonStrings, useClass: MyCommonStringsService }]
})
export class AppModule {}

The list of strings available to configure can be found by simply looking at the declaration of the ClrCommonStrings interface, which is found below.

Property name Purpose
{{string.key}} {{string.role}}

You might also load your strings from an external service, which you would do something like the following service implementation. This would fetch the strings and replace them in the service at runtime, just substitute the server service with your own.


@Injectable()
export class MyCommonStringsService implements ClrCommonStrings {
  constructor(@Inject(LOCALE_ID) locale: string, server: MyServer) {
    server.fetchTexts(locale).subscribe(texts => {
      // Assign the strings to the correct properties to implement ClrCommonStrings
      this.open = texts.genericOpenText;
      ...
    });
  }
}