Ionic 6 Full Starter App
IonicThemesBuy NOWLive Preview
  • What is Ionic 6 Full Starter App?
  • About this Ionic template
  • Template versions
  • Set up the development environment
  • Running the Ionic app
  • How to use this template?
  • Ionic Capacitor
  • Ionic Code Structure
  • Ionic Data Integration
  • Theming
  • Ionic Progressive Web App
  • Ionic Navigation
  • Ionic Server Side Rendering (SSR)
  • Ionic Splash Screens and Icons
  • App Shell
    • Image Shell
    • Text Shell
    • Aspect Ratio
  • Ionic Custom Components
    • Checkbox Wrapper
    • Countdown timer
    • Ionic Show/Hide Password
  • Ionic Walkthrough (or tutorial)
  • Categories
  • Ionic Firebase Integration
    • Firebase Authentication
    • Firebase CRUD
    • Firebase Hosting
    • Push Notifications
  • Google Maps & Geolocation
  • Ionic Video Playlist
  • Ionic Multi Language
  • Getting Started
  • Ionic Authentication
  • Ionic Side Menu
  • Ionic Profile
  • Contact Card
  • Social Sharing
  • Ionic Notifications
  • Forms and Validations
  • Filters
  • FAQs
  • Common Errors and Solutions
  • Glossary
  • Upcoming features
  • 🧐Changelog
  • Reviews / Testimonials ⭐️⭐️⭐️⭐️⭐️
Powered by GitBook
On this page
  • Ionic Countdown timer Component
  • A few examples on how to use this component

Was this helpful?

  1. Ionic Custom Components

Countdown timer

This components shows the remaining time (in days, hours, minutes or seconds) to a given date.

Ionic Countdown timer Component

A few examples on how to use this component

From days to seconds

<app-countdown-timer class="item-countdown" [end]="details?.expirationDate" [units]="{from: 'day', to: 'second'}"></app-countdown-timer>

From days to minutes

<app-countdown-timer class="item-countdown" [end]="details?.expirationDate" [units]="{from: 'day', to: 'minute'}"></app-countdown-timer>

From hours to seconds

<app-countdown-timer class="item-countdown" [end]="details?.expirationDate" [units]="{from: 'hour', to: 'second'}"></app-countdown-timer>

From hours to minutes

<app-countdown-timer class="item-countdown" [end]="details?.expirationDate" [units]="{from: 'hour', to: 'minute'}"></app-countdown-timer>

From minutes to seconds

<app-countdown-timer class="item-countdown" [end]="details?.expirationDate" [units]="{from: 'minute', to: 'second'}"></app-countdown-timer>

Just days

<app-countdown-timer class="item-countdown" [end]="details?.expirationDate" [units]="{from: 'day', to: 'day'}"></app-countdown-timer>

Just hours

<app-countdown-timer class="item-countdown" [end]="details?.expirationDate" [units]="{from: 'hour', to: 'hour'}"></app-countdown-timer>

Just minutes

<app-countdown-timer class="item-countdown" [end]="details?.expirationDate" [units]="{from: 'minute', to: 'minute'}"></app-countdown-timer>

Just seconds

<app-countdown-timer class="item-countdown" [end]="details?.expirationDate" [units]="{from: 'second', to: 'second'}"></app-countdown-timer>
PreviousCheckbox WrapperNextIonic Show/Hide Password

Last updated 3 years ago

Was this helpful?

See the to learn how to use and customize this component.

live Showcase