Use the smartRole directive on any HTML element to indicate the login/logout role of that element.

Sample Markup

<!-- A simple login form with a login button -->
<input class="form-control" placeholder="Username" [(ngModel)]="username" />
<input class="form-control" placeholder="Password" [(ngModel)]="passwd" />
 
<button class="btn btn-primary" *smartRole="'login'; username: user; password: passwd" (onLogin)="doSomethingAfterLogin()">Login</button>
 
<!-- A simple logout button -->
<button class="btn btn-danger" *smartRole="'logout'; afterLogoutPage: 'aRoutePath' (onLogout)="doSomethingAfterLogout()">Logout</button>

Description

The smartRole directive uses the NG2 structural directive notation (the leading * character). The roles that are currently supported are 'login' and 'logout'. If the 'login' role is used, then values for the username and password need to be provided, as shown in the sample markup above. These can be string literals or binding to component variables (as shown above).

The onLogin and onLogout events fire when a login or logout has occurred as a result of clicking the HTML element. These can be used to take additional actions, such as navigating to the Login page after the user has logged out.

However, if the goal is to navigate to a different page after logout, the afterLogoutPage setting can be used as shown above. This will trigger navigation to a route that has the specified path after a successful logout has occurred.