Skip to content

Commit 8a9108f

Browse files
brandyscarneybrandyscarney
committed
docs(menu): update angular to standalone
1 parent c5926f0 commit 8a9108f

22 files changed

+356
-12
lines changed

‎static/usage/v7/menu/basic/angular/example_component_html.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
```html
2+
<ion-menu contentId="main-content">
3+
<ion-header>
4+
<ion-toolbar>
5+
<ion-title>Menu Content</ion-title>
6+
</ion-toolbar>
7+
</ion-header>
8+
<ion-content class="ion-padding">This is the menu content.</ion-content>
9+
</ion-menu>
10+
<div class="ion-page" id="main-content">
11+
<ion-header>
12+
<ion-toolbar>
13+
<ion-buttons slot="start">
14+
<ion-menu-button></ion-menu-button>
15+
</ion-buttons>
16+
<ion-title>Menu</ion-title>
17+
</ion-toolbar>
18+
</ion-header>
19+
<ion-content class="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content>
20+
</div>
21+
```

‎static/usage/v7/menu/basic/angular/example_component_ts.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import {
4+
IonButtons,
5+
IonContent,
6+
IonHeader,
7+
IonMenu,
8+
IonMenuButton,
9+
IonTitle,
10+
IonToolbar,
11+
} from '@ionic/angular/standalone';
12+
13+
@Component({
14+
selector: 'app-example',
15+
templateUrl: 'example.component.html',
16+
imports: [IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonTitle, IonToolbar],
17+
})
18+
export class ExampleComponent {}
19+
```

‎static/usage/v7/menu/basic/index.md‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,22 @@ import Playground from '@site/src/components/global/Playground';
33
import javascript from './javascript.md';
44
import react from './react.md';
55
import vue from './vue.md';
6-
import angular from './angular.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
79

810
<Playground
911
version="7"
1012
code={{
1113
javascript,
1214
react,
1315
vue,
14-
angular,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
1522
}}
1623
src="usage/v7/menu/basic/demo.html"
1724
devicePreview

‎static/usage/v7/menu/multiple/angular/example_component_ts.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
```ts
22
import { Component } from '@angular/core';
3+
import { IonButton, IonContent, IonHeader, IonMenu, IonTitle, IonToolbar } from '@ionic/angular/standalone';
34
import { MenuController } from '@ionic/angular';
45

56
@Component({
67
selector: 'app-example',
78
templateUrl: 'example.component.html',
9+
imports: [IonButton, IonContent, IonHeader, IonMenu, IonTitle, IonToolbar],
810
})
911
export class ExampleComponent {
1012
constructor(private menuCtrl: MenuController) {}

‎static/usage/v7/menu/sides/angular/example_component_html.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
```html
2+
<ion-menu side="end" contentId="main-content">
3+
<ion-header>
4+
<ion-toolbar>
5+
<ion-title>Menu Content</ion-title>
6+
</ion-toolbar>
7+
</ion-header>
8+
<ion-content class="ion-padding">This is the menu content.</ion-content>
9+
</ion-menu>
10+
<div class="ion-page" id="main-content">
11+
<ion-header>
12+
<ion-toolbar>
13+
<ion-title>Menu</ion-title>
14+
<ion-buttons slot="end">
15+
<ion-menu-button></ion-menu-button>
16+
</ion-buttons>
17+
</ion-toolbar>
18+
</ion-header>
19+
<ion-content class="ion-padding"> Tap the button in the toolbar to open the menu. </ion-content>
20+
</div>
21+
```

‎static/usage/v7/menu/sides/angular/example_component_ts.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import {
4+
IonButtons,
5+
IonContent,
6+
IonHeader,
7+
IonMenu,
8+
IonMenuButton,
9+
IonTitle,
10+
IonToolbar,
11+
} from '@ionic/angular/standalone';
12+
13+
@Component({
14+
selector: 'app-example',
15+
templateUrl: 'example.component.html',
16+
imports: [IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonTitle, IonToolbar],
17+
})
18+
export class ExampleComponent {}
19+
```

‎static/usage/v7/menu/sides/index.md‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,22 @@ import Playground from '@site/src/components/global/Playground';
33
import javascript from './javascript.md';
44
import react from './react.md';
55
import vue from './vue.md';
6-
import angular from './angular.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
79

810
<Playground
911
version="7"
1012
code={{
1113
javascript,
1214
react,
1315
vue,
14-
angular,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
1522
}}
1623
src="usage/v7/menu/sides/demo.html"
1724
devicePreview

‎static/usage/v7/menu/toggle/angular/example_component_html.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
```html
2+
<ion-menu contentId="main-content">
3+
<ion-header>
4+
<ion-toolbar>
5+
<ion-title>Menu Content</ion-title>
6+
</ion-toolbar>
7+
</ion-header>
8+
<ion-content class="ion-padding">
9+
<ion-menu-toggle>
10+
<ion-button>Click to close the menu</ion-button>
11+
</ion-menu-toggle>
12+
</ion-content>
13+
</ion-menu>
14+
<div class="ion-page" id="main-content">
15+
<ion-header>
16+
<ion-toolbar>
17+
<ion-title>Menu</ion-title>
18+
</ion-toolbar>
19+
</ion-header>
20+
<ion-content class="ion-padding">
21+
<ion-menu-toggle>
22+
<ion-button>Click to open the menu</ion-button>
23+
</ion-menu-toggle>
24+
</ion-content>
25+
</div>
26+
```

‎static/usage/v7/menu/toggle/angular/example_component_ts.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import {
4+
IonButton,
5+
IonContent,
6+
IonHeader,
7+
IonMenu,
8+
IonMenuToggle,
9+
IonTitle,
10+
IonToolbar,
11+
} from '@ionic/angular/standalone';
12+
13+
@Component({
14+
selector: 'app-example',
15+
templateUrl: 'example.component.html',
16+
imports: [IonButton, IonContent, IonHeader, IonMenu, IonMenuToggle, IonTitle, IonToolbar],
17+
})
18+
export class ExampleComponent {}
19+
```

‎static/usage/v7/menu/toggle/index.md‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,22 @@ import Playground from '@site/src/components/global/Playground';
33
import javascript from './javascript.md';
44
import react from './react.md';
55
import vue from './vue.md';
6-
import angular from './angular.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
79

810
<Playground
911
version="7"
1012
code={{
1113
javascript,
1214
react,
1315
vue,
14-
angular,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
1522
}}
1623
src="usage/v7/menu/toggle/demo.html"
1724
devicePreview

0 commit comments

Comments
 (0)