Angular 2 set default content in the router-outlet

Question

I want to set some default text inside the router-outlet until it is populated.

I have a parent component that will display the child route component within the router-outlet on that page.

There are 2 buttons that will populate the router-outlet with the child component when clicked. How can i place content inside the router outlet eg. 'Click an options to display the data' then once the button is clicked this message clears and the child component displays in the router outlet?

<div class="container pt-3">
    <div class="clearfix">
        <div class="btn btn-outline-success float-left"
            routerLink="/unpaid/people">
            View People
        </div>
        <div class="btn btn-outline-success float-right"
            routerLink="/unpaid/bills">
            View Bills
        </div>
    </div>
</div>
<router-outlet>Click an options to display the data</router-outlet>

EDIT here are my routes

path: 'unpaid', component: UnpaidBillsComponent,
    children: [
      {path: 'people', component: UnpaidPeopleComponent},
      {path: 'bills', component: UnpaidBillListComponent}
    ]

you cannot do this , you need to look at router events in order to show a loading or any text you want to appear — Rahul Singh, Oct 21 '17 at 07:36

Lazar Ljubenović · Accepted Answer · 2017-10-21T08:24:11.663

18

default text inside the router-outlet until it is populated

Firstly, your assumption here is wrong, content is not inserted inside the outlet, but below it.

You cannot set a default content in the template, but you can set the default route which contains your default content. Simply use path: '' and use a component with your "default" template.

Create a component with the "default" template you need:

@Component({template: `Default template here`})
export class DefaultTemplateComponent {}

And add it to your routes.

children: [
  {path: '', component: DefaultTemplateComponent},
  {path: 'people', component: UnpaidPeopleComponent},
  {path: 'bills', component: UnpaidBillListComponent},
]

edited Oct 21 '17 at 08:24

answered Oct 21 '17 at 07:22

Lazar Ljubenović

18,976
10
56
91

So are you saying create a third component that displays the message? – dale Oct 21 '17 at 07:57
Yep, this does the trick. Thought there might be an easier way or less work than having to create a new component for a simple line of text but it works anyway, so thanks. – dale Oct 21 '17 at 09:33
It's not that much, really. The snippet I posted is minimal but it's exactly what you need: It's only two lines over what you had before: exporting a class and adding an empty path to route definition. You don't need selector or styles in your component, so you can really just inline it with `template:`. – Lazar Ljubenović Oct 21 '17 at 09:35

score 10 · Answer 2 · answered Feb 05 '19 at 15:34

10

In Template:

<p *ngIf="showDefaultMessage">Click an options to display the data</p>
<router-outlet (activate)="toggleDefaultMessage(false)" (deactivate)="toggleDefaultMessage(true)"></router-outlet>

then in Component just toggle "showDefaultMessage" property:

private showDefaultMessage = true; // default state

toggleDefaultMessage(state: boolean) {
    this.showDefaultMessage = state;
}

answered Feb 05 '19 at 15:34

M S

101
1
4

2

Call me old school, but I prefer this implementation. Although I wouldn't declare a callback method at all; you can just unset `showDefaultMessage` in the template directly: `` – Sensei James Feb 28 '20 at 22:16

score 1 · Answer 3 · answered Oct 21 '17 at 07:44

1

children: [
  {path: '', redirectTo: '/people', pathMatch: 'full'},
  {path: 'people', component: UnpaidPeopleComponent},
  {path: 'bills', component: UnpaidBillListComponent}
]

answered Oct 21 '17 at 07:44

Dinesh Kumar

470
1
4
17

I'm not wanting to redirect to there, i'm wanting to display content in the router-outlet before one of the child routes is accessed. – dale Oct 21 '17 at 07:57
then you have to create another component for this text "Click an options to display the data" and redirect to the same component. – Dinesh Kumar Oct 21 '17 at 08:02

score 1 · Answer 4 · answered Oct 01 '18 at 05:14

<div class="col-sm-10">
<router-outlet></router-outlet>
<a routerLink="/" routerLinkActive #rla="routerLinkActive" 
   [routerLinkActiveOptions]="{exact:true}">
  <h5 *ngIf="rla.isActive" class="beauty">Click on any button to start!</h5>
</a>
</div>

https://angular.io/api/router/RouterLinkActive

score 0 · Answer 5 · answered Nov 22 '22 at 08:35

create component you want to see on parent component load and add to children

path: 'unpaid', component: UnpaidBillsComponent,
children: [
  {path: 'people', component: UnpaidPeopleComponent},
  {path: 'bills', component: UnpaidBillListComponent},
  {path: 'default', component: DefaultComponent}
]

and when you open parent component open directly full path with default

router.navigate(['unpaid/default'])

Angular 2 set default content in the router-outlet

5 Answers5

Linked

Related