CODEWITHSUNDEEP
angular
Joseph Wu
Joseph Wu

Reputation: 5028

How to pass data from sub-view to main-view in Angular 2?

I have two buttons on the main view: Login and Logout. Initially only Login button is shown:

...

<button type="button" routerLink="/login" routerLinkActive="active" class="btn btn-info">Login</button>
<button type="button" routerLink="/showlist" routerLinkActive="active" class="btn btn-info" (click)="logout()">Logout</button>

<router-outlet></router-outlet>

Login button will display a sub-view, once user is authenticated there, I want to pass the result back to main view, if user is authenticated, I want to hide the 'Login' button and show the 'Logout' button.

How can I pass the data from a sub-view back to main view via 'router-outlet'?

Upvotes: 1

Views: 107

Answers (2)

jLee
jLee

Reputation: 483

You will want to use a service to share information between components. Once the user is authenticated you would want to set a property in this service that indicates the user is authenticated.

Once you have done that you can reference this service to determine if you should show hide something using *ngIf.

Here is a question answered that is similar to yours.

Upvotes: 1

Giannis Koumoutsos
Giannis Koumoutsos

Reputation: 36

To show and hide the button you will use the *ngif structural directive like:

<button *ngIf="!loggedIn" type="button" routerLink="/login" routerLinkActive="active" class="btn btn-info">Login</button>
<button *ngIf="loggedIn" type="button" routerLink="/showlist" routerLinkActive="active" class="btn btn-info" (click)="logout()">Logout</button>

The loggedIn should be a boolean in your component associated with the main-view. I suppose that with the term main-view and sub-view you mean that you have a parent-component and a child-component (for the authentication) form respectively. If this is the case refer to Component Interaction and select the communication that fits you best.

Upvotes: 1

Related Questions