Logout from Pentaho

To dismiss a valid session in Pentaho, the logout task is required. In this section you will learn how to develop a very basic logout component from scratch.

1. Creating the logout component

To create a new component into your application, open a terminal and execute the following command from the root of your project.

ng g component logout

This command creates the logout folder into app and setup the project to work with it.

2. Adding the logout component to routing

Of course, you want your new login page to be routed into your application, in this case on /logout path. To reach that goal, edit the app.module.ts file into the src/app path and the following routing.

const appRoutes: Routes = [
  { path: 'logout', component: LogoutComponent }

3. Adding the new page to the main menu

In our basic case the main menu is defined directly into the app.component.html file into the src/app folder. To add the link, edit the html file and add the following source code in the menu area.

<a routerLink="/logout">Logout</a>

4. Developing the LogoutComponent

Once done, it's time to develop the logout component.

4.1. Developing the HTML

Edit the logout.component.html file into src/app/logout folder, as following.


To make the login form more "sexy", feel free to use a different HTML.

4.2. Developing the Typescript

Edit the logout.component.ts file into src/app/login folder, as following.

import { PentahoDashboardService } from 'pentaho-dashboard';


  logoutMessage = '';

    private pentahoDashboardService: PentahoDashboardService) {

    if (this.pentahoDashboardService.isLoggedIn()) {
      this.logoutMessage = 'Logout with success.';
    else {
      this.logoutMessage = 'Not logged in.';


5. Using the logout

Once done, run the npm start command from a terminal and open a browser at http://localhost:4200. Clicking on the Logout link, this is what you are going to see.

results matching ""

    No results matching ""