Angular: how separately show another component

Question

I have propably very basic question, but can't find solution. I'm building small app in Angular. I have first component that is login screen. After successfull login I want to show user a table with some data.

I create another component "table", that have this data. Before I made connection between login and showing data, I want just work on style of table. And... I don't know how to entry only to this view.

I mean, when I run http://localhost:4200/ - I see my login screen. But when I try reach http://localhost:4200/table I still... see login screen.

I added in app.module.ts routing:

    const appRoutes: Routes = [
  { path: 'table', component: TableComponent },
];

and

RouterModule.forRoot([
  {path: 'table', component: TableComponent},
]),

I know, that I need later do redirect from login screen to this, but at this point I don't know how to reach this component view. Could someone advise me and explain, because I'm sure I don't see and understand something here.

Please share your full route configuration: where is login defined? Is there a guard maybe? — Gaël J
– Gaël J, Commented Jul 21, 2021 at 17:39
At the moment it's just view and I'm working on styles first. pastebin.com/aTueLFUc — Marcin Wojcik
– Marcin Wojcik, Commented Jul 21, 2021 at 17:53

Hrishikesh Sharma · Accepted Answer · 2021-07-21 18:48:26Z

2

First of all, as @pertrai1 suggested, do include

<router-outlet></router-outlet>

The above code shall be present in the app.component.html file.

Next, I would prefer to create separate components for Login and Table. So when finally you authenticate user from your login page, you would be able to redirect them to table page. Below is a sample routes config:

 const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'table', component: TableComponent },
  { path: 'notfound', component: NotFoundComponent },
  { path: '**', redirectTo: '/notfound' },
];

To explain the above (assuming you are running this on local),

'' would point to localhost:4200 and be default you will see LoginComponent
'table' would point towards the TableComponent
And '**' is optional if you reach a dead end page, you can show a 404 or NotFoundComponent

answered Jul 21, 2021 at 18:48

Hrishikesh Sharma

666 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marcin Wojcik Over a year ago

Amazing - thanks for explaining. I get, whas I miss - I was putting in app.component two things at same time!

pertrai1 · Accepted Answer · 2021-07-21 17:41:36Z

1

Do you have your <router-outlet></router-outlet> placed in your app somewhere?

answered Jul 21, 2021 at 17:41

pertrai1

4,36613 gold badges49 silver badges77 bronze badges

2 Comments

Marcin Wojcik Over a year ago

Yes in index.html, just below <app-root></app-root>. I started to think, that maybe if I delete app-root from index.html, and create new component for login and AppComponent end without any content, it will work....?

Marcin Wojcik Over a year ago

And this is problem, because without /table route I see my login screen, but when I add route I see login screen and table content below.

Collectives™ on Stack Overflow

Angular: how separately show another component

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related