Content

ion-content

Improve this doc

The Content component provides an easy to use content area with some useful methods to control the scrollable area. There should only be one content in a single view component. If additional scrollable elements are need, use ionScroll.

The content area can also implement pull-to-refresh with the Refresher component.

Usage

<ion-content>
  Add your content here!
</ion-content>

To get a reference to the content component from a Page's logic, you can use Angular's @ViewChild annotation:

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

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;

  scrollToTop() {
    this.content.scrollToTop();
  }
}

Instance Members

contentBottom

A number representing how many pixels the bottom of the content has been adjusted, which could be by either padding or margin. This adjustment is to account for the space needed for the footer.

contentHeight

Content height of the viewable area. This does not include content which is outside the overflow area, or content area which is under headers and footers. Read-only.

contentTop

A number representing how many pixels the top of the content has been adjusted, which could be by either padding or margin. This adjustment is to account for the space needed for the header.

contentWidth

Content width including content which is not visible on the screen due to overflow. Read-only.

directionX

The current, or last known, horizontal scroll direction. Possible string values include right and left.

directionY

The current, or last known, vertical scroll direction. Possible string values include down and up.

getContentDimensions()

Returns the content and scroll elements’ dimensions.

isScrolling

If the content is actively scrolling or not.

resize()

Tell the content to recalculate its dimensions. This should be called after dynamically adding headers, footers, or tabs.

scrollHeight

Content height including content which is not visible on the screen due to overflow. Read-only.

scrollLefttop

The distance of the content’s left to its leftmost visible content.

scrollTo(x, y, duration)

Scroll to the specified position.

scrollToBottom(duration)

Scroll to the bottom of the content component.

scrollToTop(duration)

Scroll to the top of the content component.

scrollToptop

The distance of the content’s top to its topmost visible content.

scrollWidth

Content width including content which is not visible due to overflow. Read-only.

Input Properties

Output Events

Advanced

Resizing the content

@Component({
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Main Navbar</ion-title>
      </ion-navbar>
      <ion-toolbar *ngIf="showToolbar">
        <ion-title>Dynamic Toolbar</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <button ion-button (click)="toggleToolbar()">Toggle Toolbar</button>
    </ion-content>
`})

class E2EPage {
  @ViewChild(Content) content: Content;
  showToolbar: boolean = false;

  toggleToolbar() {
    this.showToolbar = !this.showToolbar;
    this.content.resize();
  }
}

Scroll to a specific position

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

@Component({
  template: `<ion-content>
               <button ion-button (click)="scrollTo()">Down 500px</button>
             </ion-content>`
)}
export class MyPage{
  @ViewChild(Content) content: Content;

  scrollTo() {
    // set the scrollLeft to 0px, and scrollTop to 500px
    // the scroll duration should take 200ms
    this.content.scrollTo(0, 500, 200);
  }
}

Sass Variables