CODEWITHSUNDEEP
angularangular2-routing
rishal
rishal

Reputation: 3538

Angular 2 Hide Component outside router-outlet

My template looks like this 

<app-progress-bar></app-progress-bar>
<router-outlet></router-outlet>

I need to hide <app-progress-bar></app-progress-bar> when user is not logged in, I am using Guards to check if user is logged in, so when user is not logged in progress bar should be hidden.

 {
        path: 'login',
        component: LoginComponent,

    }

This route should hide <app-progress-bar></app-progress-bar>which is ProgressBarComponent

Upvotes: 0

Views: 2605

Answers (1)

Amit kumar
Amit kumar

Reputation: 6147

Store user in a variable user. when user is login or value is true.. our progress bar will work.. when user is false or user is not login user variable have null. so will not be there.

<app-progress-bar *ngIf="user" ></app-progress-bar>

also show us some code. if you have some other issue. this problem you can easily solve using *ngIf structure directive.

using canActivate I hope this will help you

for app-progress-bar component use canActivate: ['canActivateForLoggedIn'],

export const routes: Route[] = [{
    path: '',
    redirectTo: "login",
    pathMatch: "full"
}, 
{
    path: 'login',
    component: LoginComponent
}, 
{
    path: 'csvtemplate',
    component: TemplateComponent,
    canActivate: ['canActivateForLoggedIn'],
    children: [{
        path: '',
        redirectTo: 'dashboard'
    }, 
    {
        path:'dashboard',
        component: DashboardComponent
    },
    {
        path: 'csvtimeline/:month/:year',
        component: CsvTimelineComponent,
        canActivate: ['canActivateForLoggedIn'],
    },{
        path: 'adduser',
        component: adduserComponent
    }
    ]
}];

and in same routes file 

export const ROUTES_PROVIDERS = [{
  provide: 'canActivateForLoggedIn',
  useValue: () => !! Meteor.userId() <--- write your condition here.. i have used meteor.. i don't know what you have used
}];

after that in your module file import it and and put it in providers

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        RouterModule.forRoot(routes),
    ],
    declarations: [
        AppComponent,
    ],
    providers: [
        ...ROUTES_PROVIDERS
    ],
    bootstrap: [
        AppComponent
    ]
})

Upvotes: 1

Related Questions