-
diff --git a/src/app/components/alot.component.ts b/src/app/components/alot.component.ts
index c0e72a7..202b77e 100644
--- a/src/app/components/alot.component.ts
+++ b/src/app/components/alot.component.ts
@@ -1,8 +1,17 @@
+import { NgFor } from '@angular/common';
import { Component } from '@angular/core';
+import { CountdownComponent } from 'ngx-countdown';
+import { ViewCodeComponent } from './view-code.component';
@Component({
selector: 'demo-alot',
- templateUrl: './alot.component.html',
+ template: `
-
-
+
`,
+ standalone: true,
+ imports: [NgFor, CountdownComponent, ViewCodeComponent],
})
export class ALotComponent {
arr = new Array(1000).fill({});
diff --git a/src/app/components/basic.component.ts b/src/app/components/basic.component.ts
index 49c0653..6aef3a4 100644
--- a/src/app/components/basic.component.ts
+++ b/src/app/components/basic.component.ts
@@ -1,4 +1,6 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CountdownComponent } from 'ngx-countdown';
+import { ViewCodeComponent } from './view-code.component';
@Component({
selector: 'demo-basic',
@@ -16,5 +18,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
'[class.text-center]': `true`,
},
changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [CountdownComponent, ViewCodeComponent],
})
export class BasicComponent {}
diff --git a/src/app/components/custom-format-date.component.ts b/src/app/components/custom-format-date.component.ts
index 8bc12cb..8551600 100644
--- a/src/app/components/custom-format-date.component.ts
+++ b/src/app/components/custom-format-date.component.ts
@@ -1,6 +1,7 @@
import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID } from '@angular/core';
-import { CountdownConfig } from 'ngx-countdown';
+import { CountdownComponent, CountdownConfig } from 'ngx-countdown';
import { formatDate } from '@angular/common';
+import { ViewCodeComponent } from './view-code.component';
const MINIUES = 1000 * 60;
@@ -20,6 +21,8 @@ const MINIUES = 1000 * 60;
'[class.text-center]': `true`,
},
changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [CountdownComponent, ViewCodeComponent],
})
export class CustomFormatDateComponent {
constructor(@Inject(LOCALE_ID) private locale: string) {}
diff --git a/src/app/components/custom-format.component.ts b/src/app/components/custom-format.component.ts
index 100f587..cc13391 100644
--- a/src/app/components/custom-format.component.ts
+++ b/src/app/components/custom-format.component.ts
@@ -1,4 +1,6 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CountdownComponent } from 'ngx-countdown';
+import { ViewCodeComponent } from './view-code.component';
@Component({
selector: 'demo-custom-format',
@@ -16,5 +18,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
'[class.text-center]': `true`,
},
changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [CountdownComponent, ViewCodeComponent],
})
export class CustomFormatComponent {}
diff --git a/src/app/components/date-fns.component.ts b/src/app/components/date-fns.component.ts
index b871282..60b7230 100644
--- a/src/app/components/date-fns.component.ts
+++ b/src/app/components/date-fns.component.ts
@@ -1,6 +1,7 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CountdownConfig } from 'ngx-countdown';
+import { CountdownComponent, CountdownConfig } from 'ngx-countdown';
import { format } from 'date-fns';
+import { ViewCodeComponent } from './view-code.component';
@Component({
selector: 'demo-date-fns',
@@ -18,6 +19,8 @@ import { format } from 'date-fns';
'[class.text-center]': `true`,
},
changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [CountdownComponent, ViewCodeComponent],
})
export class DatefnsComponent {
config: CountdownConfig = {
diff --git a/src/app/components/demand.component.ts b/src/app/components/demand.component.ts
index 5fd5344..3a9952d 100644
--- a/src/app/components/demand.component.ts
+++ b/src/app/components/demand.component.ts
@@ -1,4 +1,6 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CountdownComponent } from 'ngx-countdown';
+import { ViewCodeComponent } from './view-code.component';
@Component({
selector: 'demo-demand',
@@ -19,5 +21,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
'[class.text-center]': `true`,
},
changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [CountdownComponent, ViewCodeComponent],
})
export class DemandComponent {}
diff --git a/src/app/components/demo.component.ts b/src/app/components/demo.component.ts
index fea1982..ef8084e 100644
--- a/src/app/components/demo.component.ts
+++ b/src/app/components/demo.component.ts
@@ -1,4 +1,17 @@
import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { BasicComponent } from './basic.component';
+import { CustomFormatComponent } from './custom-format.component';
+import { AccuracyComponent } from './accuracy.component';
+import { NotifyComponent } from './notify.component';
+import { TimestampComponent } from './timestamp.component';
+import { CustomFormatDateComponent } from './custom-format-date.component';
+import { DemandComponent } from './demand.component';
+import { ActionsComponent } from './actions.component';
+import { DatefnsComponent } from './date-fns.component';
+import { PrettyTextComponent } from './pretty-text.component';
+import { MoreThan24HoursComponent } from './more-than-24-hours.component';
+import { OnlySecondsComponent } from './only-seconds.component';
+import { KeepingWhenRefreshComponent } from './keeping-when-refresh.component';
@Component({
selector: 'demo',
@@ -18,5 +31,21 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+ Simple, easy and performance countdown for angular
-
-
`,
host: {
@@ -27,10 +34,13 @@ const CountdownTimeUnits: Array<[string, number]> = [
'[class.text-center]': `true`,
},
changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [CountdownComponent, ViewCodeComponent],
})
export class MoreThan24HoursComponent {
config: CountdownConfig = {
- leftTime: 60 * 60 * 25,
+ leftTime: 60 * 60 * 24 + 3,
+ format: 'DD HH:mm:ss',
formatDate: ({ date, formatStr }) => {
let duration = Number(date || 0);
@@ -39,6 +49,10 @@ export class MoreThan24HoursComponent {
const v = Math.floor(duration / unit);
duration -= v * unit;
return current.replace(new RegExp(`${name}+`, 'g'), (match: string) => {
+ // When days is empty
+ if (name === 'D' && v <= 0) {
+ return '';
+ }
return v.toString().padStart(match.length, '0');
});
}
diff --git a/src/app/components/nothing.component.html b/src/app/components/nothing.component.html
deleted file mode 100644
index cab1630..0000000
--- a/src/app/components/nothing.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-
+
+
+
+
+
- Since there are no any countdown component on this page, Timer will automatically stop running. -
-Confirm this and you can observe it in Chrome-Profiles.
diff --git a/src/app/components/nothing.component.ts b/src/app/components/nothing.component.ts index e3197f1..14ec242 100644 --- a/src/app/components/nothing.component.ts +++ b/src/app/components/nothing.component.ts @@ -2,6 +2,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'demo-nothing', - templateUrl: './nothing.component.html', + template: `Since there are no any countdown component on this page, Timer will automatically stop running.
+Confirm this and you can observe it in Chrome-Profiles.
`, }) export class NothingComponent {} diff --git a/src/app/components/notify.component.ts b/src/app/components/notify.component.ts index c3810b8..7890c5c 100644 --- a/src/app/components/notify.component.ts +++ b/src/app/components/notify.component.ts @@ -1,5 +1,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { CountdownConfig, CountdownEvent } from 'ngx-countdown'; +import { CountdownComponent, CountdownConfig, CountdownEvent } from 'ngx-countdown'; +import { ViewCodeComponent } from './view-code.component'; @Component({ selector: 'demo-notify', @@ -22,6 +23,8 @@ import { CountdownConfig, CountdownEvent } from 'ngx-countdown'; '[class.text-center]': `true`, }, changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [CountdownComponent, ViewCodeComponent], }) export class NotifyComponent { config: CountdownConfig = { leftTime: 10, notify: [2, 5] }; diff --git a/src/app/components/only-seconds.component.ts b/src/app/components/only-seconds.component.ts index 6a65934..c29c29c 100644 --- a/src/app/components/only-seconds.component.ts +++ b/src/app/components/only-seconds.component.ts @@ -1,5 +1,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { CountdownConfig } from 'ngx-countdown'; +import { CountdownComponent, CountdownConfig } from 'ngx-countdown'; +import { ViewCodeComponent } from './view-code.component'; @Component({ selector: 'demo-only-seconds', @@ -17,6 +18,8 @@ import { CountdownConfig } from 'ngx-countdown'; '[class.text-center]': `true`, }, changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [CountdownComponent, ViewCodeComponent], }) export class OnlySecondsComponent { config: CountdownConfig = { diff --git a/src/app/components/pretty-text.component.ts b/src/app/components/pretty-text.component.ts index 1698a6a..b7be8a7 100644 --- a/src/app/components/pretty-text.component.ts +++ b/src/app/components/pretty-text.component.ts @@ -1,5 +1,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { CountdownConfig } from 'ngx-countdown'; +import { CountdownComponent, CountdownConfig } from 'ngx-countdown'; +import { ViewCodeComponent } from './view-code.component'; @Component({ selector: 'demo-pretty-text', @@ -36,6 +37,8 @@ import { CountdownConfig } from 'ngx-countdown'; `, ], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [CountdownComponent, ViewCodeComponent], }) export class PrettyTextComponent { config: CountdownConfig = { diff --git a/src/app/components/test.component.ts b/src/app/components/test.component.ts index 1a44519..4befbde 100644 --- a/src/app/components/test.component.ts +++ b/src/app/components/test.component.ts @@ -1,9 +1,10 @@ import { Component } from '@angular/core'; +import { CountdownComponent } from 'ngx-countdown'; @Component({ selector: 'test', - template: ` -
+ 