Hi I have the following setup when using the ons-splitter.
app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
// We should have a Blank Page
initialPage: any = DashboardPage;
constructor() {
}
ngOnInit(): void {
}
}
app.component.html
<ons-navigator [page]="initialPage"></ons-navigator>
dashboard.page.ts
@Component({
selector: 'ons-page[dashboard]',
templateUrl: './dashboard.page.html',
})
export class DashboardPage implements OnInit {
sidePage = SidenavPage;
contentPage = ContentPage;
//@ViewChild('splitter') splitter;
constructor(private navigator: OnsNavigator, private sideNavService: SidenavService) {
//this.sideNavService.menu$.subscribe(() => this.splitter.nativeElement.side.open());
}
ngOnInit(): void {
}
navigate(): void {
this.navigator.element.pushPage(DepositPage);
}
}
dashboard.page.html
<ons-splitter #splitter>
<ons-splitter-side [page]="sidePage" side="left" width="220px" collapse swipeable>
</ons-splitter-side>
<ons-splitter-content [page]="contentPage">
</ons-splitter-content>
</ons-splitter>
content.page.ts
@Component({
selector: 'ons-page[content]',
templateUrl: './content.page.html',
})
export class ContentPage implements OnInit {
constructor() {
}
ngOnInit(): void {
}
}
content.page.html
<ons-toolbar>
<div class="left">
<ons-toolbar-button (click)="openMenu()">
<ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Content Page</div>
</ons-toolbar>
<p style="text-align: center; opacity: 0.6; padding-top: 20px;">
Swipe right to open the menu!
</p>
and lastly, sidenav.page.ts
@Component({
selector: 'ons-page[sidenav]',
templateUrl: './sidenav.page.html',
})
export class SidenavPage implements OnInit {
constructor() {
}
ngOnInit(): void {
}
}
sidenav.page.html
<ons-toolbar>
<div class="center">Left Page</div>
</ons-toolbar>
<div class="background"></div>
<div class="content">
</div>
So the AppComponent display the DashboardPage as the initial page for ons-navigator. And DashboardPage has the splitter with the sidePage as the SidePage and the content as the ContentPage
What has caused the error I mentioned about?
Thanks!