Skip to main content
Mapagam

Working with Content Components

1. Using IonContent Component

Property Description Default Notes
scrollY Enables or disables vertical scrolling true Set to false to disable scrolling
scrollX Enables or disables horizontal scrolling false Set to true to enable horizontal scrolling
fullscreen Makes the content full-screen false Useful for immersive layouts
forceOverscroll Forces overscroll behavior false Can be used to enable bounce effects on iOS

Example: Basic Usage of IonContent

<ion-content>
  <h1>Hello Ionic!</h1>
  <p>This is a basic example of ion-content.</p>
</ion-content>

Example: Using IonContent with Scroll Properties

<ion-content scrollY="true" scrollX="false">
  <div class="scrollable-content">
    <p>Content with vertical scrolling enabled.</p>
  </div>
</ion-content>
Note: IonContent is a core component in Ionic that provides scrollable content areas and handles platform-specific scrolling behaviors.

2. Implementing Scroll Events

Event Description Usage
ionScroll Triggered when the content is scrolled <ion-content (ionScroll)="onScroll($event)">
ionScrollStart Triggered when scrolling starts <ion-content (ionScrollStart)="onScrollStart($event)">
ionScrollEnd Triggered when scrolling ends <ion-content (ionScrollEnd)="onScrollEnd($event)">

Example: Handling Scroll Events

import { Component } from '@angular/core';

@Component({
  selector: 'app-scroll-example',
  template: `
    <ion-content (ionScroll)="onScroll($event)">
      <div *ngFor="let item of items">
        {{ item }}
      </div>
    </ion-content>
  `
})
export class ScrollExampleComponent {
  items = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);

  onScroll(event: CustomEvent) {
    const scrollElement = event.target as HTMLIonContentElement;
    const scrollTop = scrollElement.scrollTop;
    console.log("Scroll position:", scrollTop);
  }
}
Note: The ionScroll event fires frequently during scrolling, so consider using debounceTime in RxJS to limit the number of executions.

3. Scrolling Programmatically

Property Description Usage
scrollToTop Scrolls the content to the top of the page scrollToTop(animate = true)
scrollToBottom Scrolls the content to the bottom of the page scrollToBottom(animate = true)
scrollToPoint Scrolls to a specific point in the content scrollToPoint(x, y, animate = true)

Example: Scrolling to Top

import { IonContent } from '@ionic/angular';

const content = document.querySelector('ion-content');

content.scrollToTop();

Example: Scrolling to Bottom

import { IonContent } from '@ionic/angular';

const content = document.querySelector('ion-content');

content.scrollToBottom();

Example: Scrolling to Point

import { IonContent } from '@ionic/angular';

const content = document.querySelector('ion-content');

content.scrollToPoint(0, 500);

4. Using Scroll to Element

Property Description Values Notes
ionScrollToElement Directive to scroll to a specific element HTMLElement Scrolls to the provided element in the DOM
scrollDuration Duration of the scroll animation in milliseconds number Defaults to 300ms if not provided
scrollPadding Padding from the top of the scroll container number Used to prevent content from being hidden behind headers

Example: Scrolling to an Element

import { Component, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

@Component({
  selector: 'app-example',
  template: '<ion-content><div #targetElement>Target Element</div></ion-content>'
})
export class ExampleComponent {
  @ViewChild('targetElement') targetElement: any;

  scrollToTarget() {
    const element = this.targetElement.nativeElement;
    const scrollOptions = {
      duration: 500,
      padding: 10
    };

    // Using ionScrollToElement directive (if available)
    // Or manually scroll to element using IonContent
  }
}
Note: The ionScrollToElement directive is not a built-in Ionic directive. You may need to implement custom logic or use IonContent.scrollToElement for scrolling to elements.

Example: Using IonContent.scrollToElement

import { Component, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

@Component({
  selector: 'app-example',
  template: '<ion-content #content></ion-content>'
})
export class ExampleComponent {
  @ViewChild('content', { read: IonContent }) content: IonContent;

  scrollToElement() {
    const element = document.getElementById('my-element');
    if (element) {
      this.content.scrollToElement(element, 300); // scrollDuration = 300ms
    }
  }
}

5. Configuring Scroll Behavior

Property Values Description
scrollY true | false Enables or disables vertical scrolling. Defaults to true.
scrollX true | false Enables or disables horizontal scrolling. Defaults to false.
scrollEvents true | false Enables or disables scroll event propagation. Defaults to false.

Example: Enabling Vertical Scrolling

import { Component } from '@angular/core';

@Component({
  selector: 'app-scrollable-content',
  template: &#x27;<ion-content [scrollY]="true">
  <div>Scrollable content here</div>
</ion-content>&#x27;
})
export class ScrollableContentComponent { }
Note: When scrollY is set to false, the content will not scroll vertically, which can be useful for fixed layouts or when using custom scroll handling.

6. Implementing Pull to Refresh

Pull to refresh is a common UI pattern that allows users to manually update content by pulling down on a scrollable list or page. In Ionic, this is implemented using the ion-refresher component.

Property Values Description
pullingText string Text to display while pulling
pullingIcon string Icon to show while pulling (default: 'arrow-down')
refreshingText string Text to display while refreshing
refreshingIcon string Icon to show while refreshing (default: 'arrow-down')
pullingSpinner 'bubbles' | 'circles' | 'circular' | 'crescent' | 'dots' | 'lines' | 'ripple' | 'spiral' Spinner to show while pulling

Example: Basic Pull to Refresh

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <ion-list>
    <ion-item *ngFor="let item of items">
      <ion-label>{{item.title}}</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

Example: Refresh with Data Fetching

async doRefresh(refresher: IonRefresher) {
  console.log("Pull to refresh started");

  // Simulate API call
  const data = await this.fetchNewData();
  this.items = data;

  console.log("Pull to refresh finished");
  refresher.complete();
}
Note: The ionRefresh event is emitted when the user pulls down and releases the content. The complete() method must be called to indicate that the refresh operation is finished.
Warning: Make sure to call refresher.complete() or refresher.cancel() to prevent the UI from freezing.

7. Using Fixed Content

Fixed content in Ionic refers to UI elements that remain in a fixed position on the screen, regardless of scrolling or layout changes. This is particularly useful for elements like floating action buttons (FABs), navigation bars, or side menus that should stay in view.

Property Description Values Notes
position Defines the fixed position of an element 'top', 'bottom', 'left', 'right' Can be combined for corner positioning
sticky Enables sticky behavior for content true, false Used in conjunction with position

Example: Fixed FAB Button

<ion-fab vertical="bottom" horizontal="end">
  <ion-fab-button>
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>

Example: Fixed Header

<ion-header>
  <ion-toolbar>
    <ion-title>Fixed Header</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- Content here -->
</ion-content>
Note: Fixed content should be used sparingly to avoid cluttering the UI. Ensure that fixed elements do not obstruct important content or navigation.

8. Creating Sticky Headers

Property Description Default Notes
sticky Applies sticky positioning to the header false Boolean value to enable/disable sticky behavior
offsetTop Vertical offset from the top of the container 0 Number in pixels to adjust header position

Example: Sticky Header in Ionic

<ion-header>
  <ion-toolbar sticky="true">
    <ion-title>Sticky Header</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div style="height: 200px;">
    <p>Scroll content here</p>
  </div>
</ion-content>
Note: The sticky property requires a ion-toolbar inside an ion-header.

9. Handling Keyboard Scroll

Property Description Values
keyboardScroll Enables or disables automatic scrolling when the keyboard appears true | false

Example: Enabling Keyboard Scroll

const config = {
  keyboardScroll: true
};

// Apply to Ionic app
Ionic.config(config);
Note: This feature is particularly useful in mobile web apps where the virtual keyboard can obscure input fields.

10. Using Scroll Shadows

Property Values Description
scrollShadow true | false Enables or disables the scroll shadow effect on the content area.

Example: Enabling Scroll Shadow

<ion-content scrollShadow="true">
  <div>Content with scroll shadow</div>
</ion-content>
Note: The scroll shadow is only visible when content overflows the viewable area.

Was this article helpful?

Related Cheat Sheets