Skip to content

Commit 5228288

Browse files
ShaneKShaneK
committed
fix(docs): use playground component for angular navigation
1 parent d2401a0 commit 5228288

15 files changed

Lines changed: 319 additions & 2 deletions

‎docs/angular/navigation.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ sidebar_label: Navigation/Routing
44
---
55

66
import useBaseUrl from '@docusaurus/useBaseUrl';
7+
import NavigationPlayground from '@site/static/usage/v9/angular/navigation/index.md';
78

89
<head>
910
<title>Angular Navigation: How Routing & Redirects Work in Angular Apps</title>
@@ -201,7 +202,7 @@ To get started with standalone components [visit Angular's official docs](https:
201202

202203
## Live Example
203204

204-
If you would prefer to get hands on with the concepts and code described above, please checkout our [live example](https://stackblitz.com/edit/ionic-angular-routing?file=src/app/app-routing.module.ts) of the topics above on StackBlitz.
205+
<NavigationPlayground />
205206

206207
## Linear Routing versus Non-Linear Routing
207208

‎static/usage/v9/angular/navigation/angular/app_component_html.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
```html
2+
<ion-app>
3+
<ion-router-outlet></ion-router-outlet>
4+
</ion-app>
5+
```

‎static/usage/v9/angular/navigation/angular/app_component_ts.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-root',
7+
templateUrl: 'app.component.html',
8+
imports: [IonApp, IonRouterOutlet],
9+
})
10+
export class AppComponent {}
11+
```

‎static/usage/v9/angular/navigation/angular/app_routes_ts.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
```ts
2+
import { Routes } from '@angular/router';
3+
import { ExampleComponent } from './example.component';
4+
5+
export const routes: Routes = [
6+
{
7+
path: 'example',
8+
component: ExampleComponent,
9+
children: [
10+
{
11+
path: 'dashboard',
12+
loadComponent: () =>
13+
import('./dashboard/dashboard-page.component').then((m) => m.DashboardPageComponent),
14+
},
15+
{
16+
path: 'dashboard/:id',
17+
loadComponent: () =>
18+
import('./item-detail/item-detail-page.component').then((m) => m.ItemDetailPageComponent),
19+
},
20+
{
21+
path: 'settings',
22+
loadComponent: () =>
23+
import('./settings/settings-page.component').then((m) => m.SettingsPageComponent),
24+
},
25+
{
26+
path: '',
27+
redirectTo: '/example/dashboard',
28+
pathMatch: 'full',
29+
},
30+
],
31+
},
32+
{
33+
path: '',
34+
redirectTo: '/example/dashboard',
35+
pathMatch: 'full',
36+
},
37+
];
38+
```

‎static/usage/v9/angular/navigation/angular/dashboard_page_component_html.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
```html
2+
<ion-header>
3+
<ion-toolbar>
4+
<ion-title>Dashboard</ion-title>
5+
</ion-toolbar>
6+
</ion-header>
7+
<ion-content>
8+
<ion-list>
9+
@for (item of items; track item.id) {
10+
<ion-item [routerLink]="['/example/dashboard', item.id]">
11+
<ion-label>{{ item.name }}</ion-label>
12+
</ion-item>
13+
}
14+
</ion-list>
15+
</ion-content>
16+
```

‎static/usage/v9/angular/navigation/angular/dashboard_page_component_ts.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import {
4+
IonContent,
5+
IonHeader,
6+
IonItem,
7+
IonLabel,
8+
IonList,
9+
IonTitle,
10+
IonToolbar,
11+
IonRouterLink,
12+
} from '@ionic/angular/standalone';
13+
14+
@Component({
15+
selector: 'app-dashboard-page',
16+
templateUrl: 'dashboard-page.component.html',
17+
imports: [IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonToolbar, IonRouterLink],
18+
})
19+
export class DashboardPageComponent {
20+
items = [
21+
{ id: '1', name: 'Item One' },
22+
{ id: '2', name: 'Item Two' },
23+
{ id: '3', name: 'Item Three' },
24+
];
25+
}
26+
```

‎static/usage/v9/angular/navigation/angular/example_component_html.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
```html
2+
<ion-tabs>
3+
<ion-tab-bar slot="bottom">
4+
<ion-tab-button tab="dashboard" href="/example/dashboard">
5+
<ion-icon name="grid-outline"></ion-icon>
6+
<ion-label>Dashboard</ion-label>
7+
</ion-tab-button>
8+
<ion-tab-button tab="settings" href="/example/settings">
9+
<ion-icon name="settings-outline"></ion-icon>
10+
<ion-label>Settings</ion-label>
11+
</ion-tab-button>
12+
</ion-tab-bar>
13+
</ion-tabs>
14+
```

‎static/usage/v9/angular/navigation/angular/example_component_ts.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs } from '@ionic/angular/standalone';
4+
import { addIcons } from 'ionicons';
5+
import { gridOutline, settingsOutline } from 'ionicons/icons';
6+
7+
@Component({
8+
selector: 'app-example',
9+
templateUrl: 'example.component.html',
10+
imports: [IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs],
11+
})
12+
export class ExampleComponent {
13+
constructor() {
14+
addIcons({ gridOutline, settingsOutline });
15+
}
16+
}
17+
```

‎static/usage/v9/angular/navigation/angular/item_detail_page_component_html.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```html
2+
<ion-header>
3+
<ion-toolbar>
4+
<ion-buttons slot="start">
5+
<ion-back-button defaultHref="/example/dashboard"></ion-back-button>
6+
</ion-buttons>
7+
<ion-title>Item {{ id }}</ion-title>
8+
</ion-toolbar>
9+
</ion-header>
10+
<ion-content class="ion-padding">You navigated to item {{ id }}.</ion-content>
11+
```

‎static/usage/v9/angular/navigation/angular/item_detail_page_component_ts.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
```ts
2+
import { Component, OnInit } from '@angular/core';
3+
import { ActivatedRoute } from '@angular/router';
4+
import {
5+
IonBackButton,
6+
IonButtons,
7+
IonContent,
8+
IonHeader,
9+
IonTitle,
10+
IonToolbar,
11+
} from '@ionic/angular/standalone';
12+
13+
@Component({
14+
selector: 'app-item-detail-page',
15+
templateUrl: 'item-detail-page.component.html',
16+
imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar],
17+
})
18+
export class ItemDetailPageComponent implements OnInit {
19+
id = '';
20+
21+
constructor(private route: ActivatedRoute) {}
22+
23+
ngOnInit() {
24+
this.id = this.route.snapshot.paramMap.get('id') ?? '';
25+
}
26+
}
27+
```

0 commit comments

Comments
 (0)