Welcome to the Alfresco Builder Network

Our technical resource site is still being improved. We'd love to hear your feedback. Tell us what you think

Displays all the languages that are present in "app.config.json" and the default (EN).

Language Menu screenshot

Basic usage

How to attach an ADF Language Menu as a main menu

<button mat-icon-button [matMenuTriggerFor]="langMenu">
    <mat-icon>language</mat-icon>
</button>
<mat-menu #langMenu="matMenu">
    <adf-language-menu></adf-language-menu>
</mat-menu>

Details

Add a Language Menu component to let the user set the locale language for the app. For further information about the locale language, see the Internationalization page in the user guide.

The component fetches the list of available languages from app.config.json:

"languages": [
        {
            "key": "en",
            "label": "English"
        },
        {
            "key": "fr",
            "label": "French"
        },
        {
            "key": "it",
            "label": "Italian"
        }
    ]

If no languages setting is provided, the component shows only the English language.

Nested Menu language

You can also attach the Language Menu as a nested menu:

<button mat-icon-button class="dw-profile-menu" [matMenuTriggerFor]="profileMenu">
    <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #profileMenu="matMenu">
    <button mat-menu-item>profile-settings</button>
    <button mat-menu-item [matMenuTriggerFor]="langMenu">Languages</button>
    <button mat-menu-item>sign-out</button>
</mat-menu>
<mat-menu #langMenu="matMenu">
    <adf-language-menu></adf-language-menu>
</mat-menu>

Nested Language Menu screenshot

See Also

Interested in trying Alfresco?

Try Now