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:
@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;
...
});
}
}
@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 includes a description for each of them. Here is
the current list as of this release:
abstract class ClrCommonStrings {
/**
* Open button
*/
open?: string;
/**
* Close button
*/
close?: string;
/**
* Show button
*/
show?: string;
/**
* Hide button
*/
hide?: string;
/**
* Expandable components: expand caret
*/
expand?: string;
/**
* Expandable components: collapse caret
*/
collapse?: string;
/**
* Overflow menus: ellipsis button
*/
more?: string;
/**
* Selectable components: checkbox or radio
*/
select?: string;
/**
* Selectable components: checkbox to select all
*/
selectAll?: string;
/**
* Pagination: previous button
*/
previous?: string;
/**
* Pagination: next button
*/
next?: string;
/**
* Pagination: go to current
*/
current?: string;
/**
* Alert levels: info
*/
info?: string;
/**
* Alert levels: success
*/
success?: string;
/**
* Alert levels: warning
*/
warning?: string;
/**
* Alert levels: danger
*/
danger?: string;
/**
* Datagrid: row actions
*/
rowActions?: string;
/**
* Datagrid: pick columns
*/
pickColumns?: string;
}