Angular 2 set default content in the router-outlet

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},
]

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;
}