Как показать таймер обратного отсчета в Angular с помощью ngx-countdown

В этом руководстве мы узнаем, как добавить таймер обратного отсчета в ваш проект Angular с помощью плагина ngx-countdown шаг за шагом.

Таймер обратного отсчета в Angular с помощью ngx-countdown

Таймеры обратного отсчета часто встречаются на веб-сайтах и в приложениях, особенно при отсчете времени до события, продажи или запуска продукта.

Эти таймеры создают ощущение срочности и могут повысить вовлеченность пользователей.

Что такое ngx-countdown?

ngx-countdown - это библиотека Angular, которая позволяет легко отображать таймеры обратного отсчета в ваших приложениях Angular. Она легкая, настраиваемая и простая в использовании.

Также читайте,

Как динамически загружать внешние скрипты в Angular 14+ | TutsCoder

Шаг 1: Чтобы установить ngx-countdown, выполните следующую команду в терминале:

npm install ngx-countdown --save

Шаг 2: Импортируйте библиотеку

Затем импортируйте библиотеку в ваш модуль Angular, добавив следующую строку в файл app.module.ts:

import { CountdownModule } from 'ngx-countdown';

Шаг 3: Используйте компонент обратного отсчета

Теперь вы можете использовать компонент обратного отсчета в своем HTML-шаблоне. Например:

<ngx-countdown [config]="{leftTime: 3600}" (event)="handleEvent($event)"></ngx-countdown>

В этом примере свойство leftTime установлено в 3600, что означает, что обратный отсчет будет длиться один час. Свойство event позволяет обрабатывать события, например, завершение обратного отсчета.

Читайте также, https://www.tutscoder.com/post/content-projection-angular-ng-content

Шаг 4: Настройка таймера обратного отсчета ngx-countdown предлагает несколько вариантов настройки внешнего вида таймера обратного отсчета, включая размер шрифта, цвет шрифта и цвет фона. Вы также можете добавить пользовательский шаблон к компоненту обратного отсчета.

Например:

<ngx-countdown [config]="{leftTime: 3600}" [format]="'HH:mm:ss'" (event)="handleEvent($event)">
  <ng-template #template let-time>{{time.days}}d {{time.hours}}h {{time.minutes}}m {{time.seconds}}s</ng-template>
</ngx-countdown>

В этом примере свойство format установлено в "HH:mm:ss", что означает, что обратный отсчет будет отображаться в часах, минутах и секундах. Пользовательский шаблон используется для отображения времени в днях, часах, минутах и секундах.

Оригинал статьи опубликован на : https://www.tutscoder.com/post/show-countdown-timer-angular-ngx-countdown

Заключение:

С помощью ngx-countdown добавить таймер обратного отсчета в ваш проект Angular можно быстро и легко. Хотите ли вы вести обратный отсчет до важного события или запуска продукта, ngx-countdown поможет вам в этом. Попробуйте его и посмотрите, как он может улучшить пользовательский опыт на вашем сайте или в приложении.