Allows a user to perform a login via a dialog.


The Login Dialog component allows you to perform a login via a dialog.

Showing the dialog

Unlike most components, the Login Dialog Component is typically shown in a dialog box rather than the main page and you are responsible for opening the dialog yourself. You can use the Angular Material Dialog for this, as shown in the usage example. ADF provides the LoginDialogComponentData interface to work with the Dialog's data option:

export interface LoginDialogComponentData {
    title: string;
    actionName?: string;
    logged: Subject<any>;

The properties are described in the table below:

NameTypeDefault valueDescription
titlestring""Dialog title
actionNamestring""Text to appear on the dialog's main action button ("Login", "Access", etc)
loggedEventEmitter<any>Event emitted when the login succeeds.

If you don't want to manage the dialog yourself then it is easier to use the Login Dialog Panel component, or the methods of the Login Dialog service, which create the dialog for you.

Usage example

import { MatDialog } from '@angular/material/dialog';
import { LoginDialogComponentData, LoginDialogComponent} from '@adf/core'
import { Subject } from 'rxjs/Subject';

constructor(dialog: MatDialog ... ) {}

openLoginDialog() {
    data: LoginDialogComponentData = {
        title: "Perform a Login",
        actionName: "Access",
        logged: new Subject<any>()
            data, panelClass: 'adf-login-dialog',
            width: '630px'

    data.logged.subscribe(() => {
        // Action after being logged in...
        //your error handling
        //action called when an action or cancel is clicked on the dialog

All the results will be streamed to the logged subject present in the LoginDialogComponentData object passed to the dialog. When the dialog action is selected by clicking, the data.logged stream will be completed.

See also

© 2023 Alfresco Software, Inc. All Rights Reserved.