CODEWITHSUNDEEP
angular
Abhinav Singh
Abhinav Singh

Reputation: 263

Angular component outside of router outlet

I want to show my error message using error component but don't want to load the component inside of <router-outlet></router-outlet> for an authenticated user so that nav menu should also not be displayed.

I have the app component like this..

<div>
<nav><nav>
<router-outlet></router-outlet>
</div>

And i have error handler which routes to error component using router.navigate.

But it loads in the router outlet along with the nav component. I want to load it as a whole page and without nav or any other component.

Whats the best way to achieve this.

Upvotes: 7

Views: 10633

Answers (3)

SiddAjmera
SiddAjmera

Reputation: 39432

You can use a Shell-Component as the entry point for your logged-in user who will need to see the header.

Take a look at this Sample StackBlitz project.

If you have a close look at it's route config:

const appRoutes: Routes = [
  {
    path: '',
    component: ShellComponent,
    children: [
      { path: 'dashboard', component: DashboardComponent },
      { path: 'contactus', component: ContactComponent },
      { path: 'events', component: EventsListComponent },
      { path: 'events/:id', component: EventDetailsComponent },
      { path: 'home', component: HomeComponent },
      { path: 'view', component: ViewPostComponent },
      { path: '', component: PlaceholderComponent }
    ]
  },
  { path: 'login', component: LoginComponent },
  { path: 'error', component: ErrorComponent },
  { path: '', redirectTo: '/login', pathMatch: 'full' }
];

You'll see that login is an outer level route where no Header will be showing. But as soon as the user is logged-in, the user is navigated to one of the child routes of the '' route which loads up the ShellComponent.

So you can essentially create another route('error'), at the same level as the 'login' route and then navigate the user accordingly to the ErrorComponent.

Upvotes: 13

Stavm
Stavm

Reputation: 8121

Just use a root-level route for the error page, so it won't be a child of anything.

Something like:

const routes: Routes = [
        { path: 'main', component: LayoutComponent, children: [
            { path: 'profile/:userid', component: UserprofileComponent },
            { path: 'settings/:userid', component: UsersettingsComponent },
            //....
        ]},
        { path: 'error/:statuscode', component: ErrorPageComponent },
        { path: '**', redirectTo: '/error/404'}
    ];

Upvotes: 0

Jimmy Ho
Jimmy Ho

Reputation: 676

service with Rx very useful on your case, subscribe and show on root component, and you can append message anywhere, like this

service

@Injectable()
export class MessageService {
  messages$: Subject<string[]>;
  constructor() {
    this.messages$ = new Subject<string[]>();
   }

  error(content: string) {
    this.messages$.next(content);
  }
}

component html

<div [value]="msgService.messages$ | async"></div>

component

export class LayoutComponent {
  constructor(public msgService: MessageService) {
  }
}

Upvotes: 0

Related Questions