docs(quickstart): add Call Component Methods section and update paths

Author: brandyscarney

docs/angular/quickstart.md

@@ -69,6 +69,10 @@ Your new app's `src/app` directory will look like this:
     └── home.page.ts
 ```
 
+:::info
+All file paths in the examples below are relative to the `src/app/` directory.
+:::
+
 Let's walk through these files to understand the app's structure.
 
 ## View the App Component
@@ -123,7 +127,7 @@ When you visit the root URL (`/`), the `HomePage` component will be loaded.
 
 ## View the Home Page
 
-The Home page component, defined in `home.page.ts`, imports the Ionic components it uses:
+The Home page component, defined in `home/home.page.ts`, imports the Ionic components it uses:
 
 ```ts
 import { Component } from '@angular/core';
@@ -205,7 +209,7 @@ ionic generate page new
 
 A route will be automatically added to `app.routes.ts`.
 
-In your `new.page.html`, you can add a [Back Button](/docs/api/back-button) to the [Toolbar](/docs/api/toolbar):
+In your `new/new.page.html`, you can add a [Back Button](/docs/api/back-button) to the [Toolbar](/docs/api/toolbar):
 
 ```html
 <ion-header [translucent]="true">
@@ -218,7 +222,7 @@ In your `new.page.html`, you can add a [Back Button](/docs/api/back-button) to t
 </ion-header>
 ```
 
-And import `IonBackButton` and `IonButtons` in `new.page.ts`:
+And import `IonBackButton` and `IonButtons` in `new/new.page.ts`:
 
 ```ts
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
@@ -233,13 +237,13 @@ The `ion-back-button` will automatically handle navigation back to the previous
 
 ## Navigate to the New Page
 
-To navigate to the new page, update the button in `home.page.html`:
+To navigate to the new page, update the button in `home/home.page.html`:
 
 ```html
 <ion-button [routerLink]="['/new']">Navigate</ion-button>
 ```
 
-Then, import `RouterLink` in `home.page.ts`:
+Then, import `RouterLink` in `home/home.page.ts`:
 
 ```ts
 import { RouterLink } from '@angular/router';
@@ -256,7 +260,7 @@ Navigating can also be performed using Angular's Router service. See the [Angula
 
 ## Add Icons to the New Page
 
-Ionic Angular comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `name` property on the `ion-icon` component. Add the following icons to `new.page.html`:
+Ionic Angular comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `name` property on the `ion-icon` component. Add the following icons to `new/new.page.html`:
 
 ```html
 <ion-content>
@@ -267,7 +271,7 @@ Ionic Angular comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. Y
 </ion-content>
 ```
 
-You'll also need to import and register these icons in `new.page.ts`:
+You'll also need to import and register these icons in `new/new.page.ts`:
 
 ```ts
 // ...existing imports...
@@ -288,13 +292,101 @@ export class NewPage implements OnInit {
   constructor() {
     addIcons({ heart, logoIonic });
   }
+
+  ngOnInit() {}
 }
 ```
 
 Alternatively, you can register icons in `app.component.ts` to use them throughout your app.
 
 For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
+## Call Component Methods
+
+Let's add a button that can scroll the content area to the bottom.
+
+Update the `ion-content` in your `new/new.page.html` to include a button and some items after the existing icons:
+
+```html
+<ion-content [fullscreen]="true" #content>
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">new</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-icon name="heart"></ion-icon>
+  <ion-icon name="logo-ionic"></ion-icon>
+
+  <ion-button (click)="scrollToBottom()">Scroll to Bottom</ion-button>
+
+  <!-- Add lots of content to make scrolling possible -->
+  @for (item of items; track $index; let i = $index) {
+  <ion-item>
+    <ion-label>Item {{ i + 1 }}</ion-label>
+  </ion-item>
+  }
+</ion-content>
+```
+
+In the component, add the `ViewChild` import, the new component imports and define the `scrollToBottom` function:
+
+```ts
+import { Component, OnInit, ViewChild } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { heart, logoIonic } from 'ionicons/icons';
+
+@Component({
+  // ...existing config...
+  imports: [
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonTitle,
+    IonToolbar,
+  ],
+})
+export class NewPage implements OnInit {
+  @ViewChild(IonContent) content!: IonContent;
+
+  items = Array.from({ length: 50 }, (_, i) => i);
+
+  constructor() {
+    addIcons({ heart, logoIonic });
+  }
+
+  ngOnInit() {}
+
+  scrollToBottom = () => {
+    this.content.scrollToBottom(300);
+  };
+}
+```
+
+To call methods on Ionic components:
+
+1. Create a `ViewChild` reference for the component
+2. Call the method directly on the component instance
+
+You can find available methods for each component in the [Methods](/docs/api/content#methods) section of their API documentation.
+
 ## Run on a Device
 
 Ionic's components work everywhere: on iOS, Android, and PWAs. To deploy to mobile, use [Capacitor](https://capacitorjs.com):

docs/react/quickstart.md

@@ -66,6 +66,10 @@ Your new app's `src` directory will look like this:
     └── Home.tsx
 ```
 
+:::info
+All file paths in the examples below are relative to the `src/` directory.
+:::
+
 Let's walk through these files to understand the app's structure.
 
 ## View the App Component
@@ -159,7 +163,7 @@ For detailed information about Ionic layout components, see the [Header](/docs/a
 
 ## Add an Ionic Component
 
-You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button) at the end of the `IonContent`:
+You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button) at the end of the `IonContent` in `pages/Home.tsx`:
 
 ```tsx
 import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
@@ -187,7 +191,7 @@ export default Home;
 
 ## Add a New Page
 
-Create a new page at `src/pages/New.tsx`:
+Create a new page at `pages/New.tsx`:
 
 ```tsx
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
@@ -247,7 +251,7 @@ Then, add its route in `IonRouterOutlet`:
 </IonRouterOutlet>
 ```
 
-Once that is done, update the button in `Home.tsx`:
+Once that is done, update the button in `pages/Home.tsx`:
 
 ```tsx
 <IonButton routerLink="/new">Navigate</IonButton>
@@ -261,7 +265,7 @@ Navigating can also be performed programmatically using React Router's `history`
 
 Ionic React comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `icon` property of the `IonIcon` component.
 
-Update the imports in `New.tsx` to import `IonIcon` and the `heart` and `logoIonic` icons:
+Update the imports in `pages/New.tsx` to import `IonIcon` and the `heart` and `logoIonic` icons:
 
 ```tsx
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar } from '@ionic/react';
@@ -279,6 +283,59 @@ Note that we are passing the imported SVG reference, **not** the icon name as a
 
 For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
+## Call Component Methods
+
+Let's add a button that can scroll the content area to the bottom.
+
+Update `pages/New.tsx` to add a `ref` on `IonContent` and a button and some items after the existing icons:
+
+```tsx
+<IonContent ref={content}>
+  <IonIcon icon={heart} />
+  <IonIcon icon={logoIonic} />
+
+  <IonButton onClick={scrollToBottom}>Scroll to Bottom</IonButton>
+
+  {/* Add lots of content to make scrolling possible */}
+  {Array.from({ length: 50 }, (_, i) => (
+    <IonItem key={i}>
+      <IonLabel>Item {i + 1}</IonLabel>
+    </IonItem>
+  ))}
+</IonContent>
+```
+
+Then, add the imports for the additional components and define the `scrollToBottom` function:
+
+```tsx
+import { useRef } from 'react';
+import { IonButton, IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import { heart, logoIonic } from 'ionicons/icons';
+
+const New: React.FC = () => {
+  const content = useRef<HTMLIonContentElement>(null);
+
+  const scrollToBottom = () => {
+    content.current?.scrollToBottom(300);
+  };
+
+  return (
+    // ...existing template...
+  );
+};
+
+export default New;
+```
+
+To call methods on Ionic components:
+
+1. Create a `ref` for the component
+2. Call the method directly on `ref.current`
+
+This pattern is necessary because React refs store the component instance in the `.current` property.
+
+You can find available methods for each component in the [Methods](/docs/api/content#methods) section of their API documentation.
+
 ## Run on a Device
 
 Ionic's components work everywhere: on iOS, Android, and PWAs. To deploy to mobile, use [Capacitor](https://capacitorjs.com):

docs/vue/quickstart.md

@@ -64,6 +64,10 @@ Your new app's `src` directory will look like this:
     └── HomePage.vue
 ```
 
+:::info
+All file paths in the examples below are relative to the `src/` directory.
+:::
+
 Let's walk through these files to understand the app's structure.
 
 ## View the App Component
@@ -117,7 +121,7 @@ When you visit the root URL (`/`), the `HomePage` component will be loaded.
 
 ## View the Home Page
 
-The Home page component, defined in `Views/HomePage.vue`, imports the Ionic components and defines the page template:
+The Home page component, defined in `views/HomePage.vue`, imports the Ionic components and defines the page template:
 
 ```html
 <template>
@@ -283,6 +287,61 @@ Note that we are passing the imported SVG reference, **not** the icon name as a
 
 For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/).
 
+## Call Component Methods
+
+Let's add a button that can scroll the content area to the bottom.
+
+Update `views/NewPage.vue` to include a ref on `ion-content` and a button and some items after the existing icons:
+
+```html
+<ion-content ref="content">
+  <ion-button @click="scrollToBottom">Scroll to Bottom</ion-button>
+
+  <!-- Add lots of content to make scrolling possible -->
+  <ion-item v-for="i in 50" :key="i">
+    <ion-label>Item {{ i }}</ion-label>
+  </ion-item>
+</ion-content>
+```
+
+In the script section, add the new component imports and define the `scrollToBottom` function:
+
+```html
+<script setup lang="ts">
+  import {
+    IonBackButton,
+    IonButtons,
+    IonButton,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonPage,
+    IonTitle,
+    IonToolbar,
+  } from '@ionic/vue';
+  import { heart, logoIonic } from 'ionicons/icons';
+  import { ref } from 'vue';
+
+  const content = ref();
+
+  const scrollToBottom = () => {
+    content.value.$el.scrollToBottom(300);
+  };
+</script>
+```
+
+To call methods on Ionic components:
+
+1. Create a `ref` for the component
+2. Access the underlying Web Component via `$el`
+3. Call the method on the Web Component
+
+This pattern is necessary because Ionic components are built as Web Components. The `$el` property gives you access to the actual Web Component instance where the methods are defined.
+
+You can find available methods for each component in the [Methods](/docs/api/content#methods) section of their API documentation.
+
 ## Run on a Device
 
 Ionic's components work everywhere: on iOS, Android, and PWAs. To deploy to mobile, use [Capacitor](https://capacitorjs.com):
@@ -312,17 +371,17 @@ Ionic Vue projects are created with TypeScript by default, but you can easily co
 npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript vue-tsc
 ```
 
-2. Change the extension of all `.ts` files to `.js`. In a blank Ionic Vue app, this will be the `src/router/index.ts`, `src/main.ts`, and files in the `tests` directory.
+2. Change the extension of all `.ts` files to `.js`. In a blank Ionic Vue app, this will be the `router/index.ts`, `main.ts`, and files in the `tests` directory.
 
 3. In `index.html`, change the imported `<script>` file from `/src/main.ts` to `/src/main.js`.
 
 4. Remove `@vue/typescript/recommended` and `@typescript-eslint/no-explicit-any: 'off'` from `.eslintrc.js`.
 
-5. Remove `Array<RouteRecordRaw>` and the import of `RouteRecordRaw` from `src/router/index.js`.
+5. Remove `Array<RouteRecordRaw>` and the import of `RouteRecordRaw` from `router/index.js`.
 
-6. Remove `lang="ts"` from the `script` tags in any of your Vue components that have them. In a blank Ionic Vue app, this should only be `src/App.vue` and `src/views/HomePage.vue`.
+6. Remove `lang="ts"` from the `script` tags in any of your Vue components that have them. In a blank Ionic Vue app, this should only be `App.vue` and `views/HomePage.vue`.
 
-7. Delete `tsconfig.json` and `src/vite-env.d.ts`.
+7. Delete `tsconfig.json` and `vite-env.d.ts`.
 
 8. In package.json, change the build script from `"build": "vue-tsc && vite build"` to `"build": "vite build"`.