diff --git a/static/usage/v7/datetime/basic/angular.md b/static/usage/v7/datetime/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime/basic/angular.md rename to static/usage/v7/datetime/basic/angular/example_component_html.md diff --git a/static/usage/v7/datetime/basic/angular/example_component_ts.md b/static/usage/v7/datetime/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v7/datetime/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/basic/index.md b/static/usage/v7/datetime/basic/index.md index 99e893af493..7c9181c4341 100644 --- a/static/usage/v7/datetime/basic/index.md +++ b/static/usage/v7/datetime/basic/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/angular.md b/static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime/buttons/customizing-button-texts/angular.md rename to static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_html.md diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_ts.md b/static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/index.md b/static/usage/v7/datetime/buttons/customizing-button-texts/index.md index 7b03b2ff8f7..ac1d29dc5a3 100644 --- a/static/usage/v7/datetime/buttons/customizing-button-texts/index.md +++ b/static/usage/v7/datetime/buttons/customizing-button-texts/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/angular.md b/static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime/buttons/customizing-buttons/angular.md rename to static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_html.md diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_ts.md b/static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..9a2b1795d68 --- /dev/null +++ b/static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonButtons, IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/index.md b/static/usage/v7/datetime/buttons/customizing-buttons/index.md index 4224357f528..a133ce5eac3 100644 --- a/static/usage/v7/datetime/buttons/customizing-buttons/index.md +++ b/static/usage/v7/datetime/buttons/customizing-buttons/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular.md rename to static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_html.md diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md index 2510a15e899..77ad7161e88 100644 --- a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md +++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md b/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md index 3021390e188..37d9936a824 100644 --- a/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md +++ b/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], }) export class ExampleComponent { isWeekday = (dateString: string) => { diff --git a/static/usage/v7/datetime/date-constraints/max-min/angular.md b/static/usage/v7/datetime/date-constraints/max-min/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime/date-constraints/max-min/angular.md rename to static/usage/v7/datetime/date-constraints/max-min/angular/example_component_html.md diff --git a/static/usage/v7/datetime/date-constraints/max-min/angular/example_component_ts.md b/static/usage/v7/datetime/date-constraints/max-min/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v7/datetime/date-constraints/max-min/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/date-constraints/max-min/index.md b/static/usage/v7/datetime/date-constraints/max-min/index.md index 808fa7bf756..13219e583f8 100644 --- a/static/usage/v7/datetime/date-constraints/max-min/index.md +++ b/static/usage/v7/datetime/date-constraints/max-min/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/datetime/date-constraints/values/angular.md b/static/usage/v7/datetime/date-constraints/values/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime/date-constraints/values/angular.md rename to static/usage/v7/datetime/date-constraints/values/angular/example_component_html.md diff --git a/static/usage/v7/datetime/date-constraints/values/angular/example_component_ts.md b/static/usage/v7/datetime/date-constraints/values/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v7/datetime/date-constraints/values/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/date-constraints/values/index.md b/static/usage/v7/datetime/date-constraints/values/index.md index dc33ed9ac87..57b17c21e27 100644 --- a/static/usage/v7/datetime/date-constraints/values/index.md +++ b/static/usage/v7/datetime/date-constraints/values/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/datetime/format-options/angular.md b/static/usage/v7/datetime/format-options/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime/format-options/angular.md rename to static/usage/v7/datetime/format-options/angular/example_component_html.md diff --git a/static/usage/v7/datetime/format-options/angular/example_component_ts.md b/static/usage/v7/datetime/format-options/angular/example_component_ts.md new file mode 100644 index 00000000000..d762802859f --- /dev/null +++ b/static/usage/v7/datetime/format-options/angular/example_component_ts.md @@ -0,0 +1,16 @@ +```ts +import { Component, NO_ERRORS_SCHEMA } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], + // This schema is used to bypass an issue in Ionic Framework v7 + // where formatOptions is not exported. Upgrade to Ionic + // Framework 8.1.1 or later to remove this workaround. + schemas: [NO_ERRORS_SCHEMA], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/format-options/index.md b/static/usage/v7/datetime/format-options/index.md index f12a9dc3bd2..bb5c3770fe0 100644 --- a/static/usage/v7/datetime/format-options/index.md +++ b/static/usage/v7/datetime/format-options/index.md @@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md index 4ca93b85f44..1382b5db0e9 100644 --- a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md +++ b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], }) export class ExampleComponent { highlightedDates = [ diff --git a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md index 60f9c700d05..b877e31c7e5 100644 --- a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md +++ b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md @@ -1,12 +1,15 @@ ```ts import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], }) export class ExampleComponent { - highlightedDates = (isoString) => { + highlightedDates = (isoString: string) => { const date = new Date(isoString); const utcDay = date.getUTCDate(); diff --git a/static/usage/v7/datetime/localization/custom-locale/angular.md b/static/usage/v7/datetime/localization/custom-locale/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime/localization/custom-locale/angular.md rename to static/usage/v7/datetime/localization/custom-locale/angular/example_component_html.md diff --git a/static/usage/v7/datetime/localization/custom-locale/angular/example_component_ts.md b/static/usage/v7/datetime/localization/custom-locale/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v7/datetime/localization/custom-locale/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/localization/custom-locale/index.md b/static/usage/v7/datetime/localization/custom-locale/index.md index 566363cc089..ecbef0b093f 100644 --- a/static/usage/v7/datetime/localization/custom-locale/index.md +++ b/static/usage/v7/datetime/localization/custom-locale/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/datetime/localization/first-day-of-week/angular.md b/static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime/localization/first-day-of-week/angular.md rename to static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_html.md diff --git a/static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_ts.md b/static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/localization/first-day-of-week/index.md b/static/usage/v7/datetime/localization/first-day-of-week/index.md index 389010b4302..eab3232865b 100644 --- a/static/usage/v7/datetime/localization/first-day-of-week/index.md +++ b/static/usage/v7/datetime/localization/first-day-of-week/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/datetime/localization/hour-cycle/angular.md b/static/usage/v7/datetime/localization/hour-cycle/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime/localization/hour-cycle/angular.md rename to static/usage/v7/datetime/localization/hour-cycle/angular/example_component_html.md diff --git a/static/usage/v7/datetime/localization/hour-cycle/angular/example_component_ts.md b/static/usage/v7/datetime/localization/hour-cycle/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v7/datetime/localization/hour-cycle/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/localization/hour-cycle/index.md b/static/usage/v7/datetime/localization/hour-cycle/index.md index 5ffaf29bb41..b03b4360a26 100644 --- a/static/usage/v7/datetime/localization/hour-cycle/index.md +++ b/static/usage/v7/datetime/localization/hour-cycle/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/angular.md b/static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime/localization/locale-extension-tags/angular.md rename to static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_html.md diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_ts.md b/static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/index.md b/static/usage/v7/datetime/localization/locale-extension-tags/index.md index 33c92262f9e..1355a443479 100644 --- a/static/usage/v7/datetime/localization/locale-extension-tags/index.md +++ b/static/usage/v7/datetime/localization/locale-extension-tags/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/datetime/localization/time-label/angular.md b/static/usage/v7/datetime/localization/time-label/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime/localization/time-label/angular.md rename to static/usage/v7/datetime/localization/time-label/angular/example_component_html.md diff --git a/static/usage/v7/datetime/localization/time-label/angular/example_component_ts.md b/static/usage/v7/datetime/localization/time-label/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v7/datetime/localization/time-label/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/localization/time-label/index.md b/static/usage/v7/datetime/localization/time-label/index.md index e35108abac4..3841888f4ff 100644 --- a/static/usage/v7/datetime/localization/time-label/index.md +++ b/static/usage/v7/datetime/localization/time-label/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/datetime/multiple/angular.md b/static/usage/v7/datetime/multiple/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime/multiple/angular.md rename to static/usage/v7/datetime/multiple/angular/example_component_html.md diff --git a/static/usage/v7/datetime/multiple/angular/example_component_ts.md b/static/usage/v7/datetime/multiple/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v7/datetime/multiple/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/multiple/index.md b/static/usage/v7/datetime/multiple/index.md index 84405fb740f..250303f71bc 100644 --- a/static/usage/v7/datetime/multiple/index.md +++ b/static/usage/v7/datetime/multiple/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/datetime/presentation/date/angular.md b/static/usage/v7/datetime/presentation/date/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime/presentation/date/angular.md rename to static/usage/v7/datetime/presentation/date/angular/example_component_html.md diff --git a/static/usage/v7/datetime/presentation/date/angular/example_component_ts.md b/static/usage/v7/datetime/presentation/date/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v7/datetime/presentation/date/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/presentation/date/index.md b/static/usage/v7/datetime/presentation/date/index.md index 97780827260..182b1d07aeb 100644 --- a/static/usage/v7/datetime/presentation/date/index.md +++ b/static/usage/v7/datetime/presentation/date/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/datetime/presentation/month-and-year/angular.md b/static/usage/v7/datetime/presentation/month-and-year/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime/presentation/month-and-year/angular.md rename to static/usage/v7/datetime/presentation/month-and-year/angular/example_component_html.md diff --git a/static/usage/v7/datetime/presentation/month-and-year/angular/example_component_ts.md b/static/usage/v7/datetime/presentation/month-and-year/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v7/datetime/presentation/month-and-year/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/presentation/month-and-year/index.md b/static/usage/v7/datetime/presentation/month-and-year/index.md index 524545fb033..b1f841692e4 100644 --- a/static/usage/v7/datetime/presentation/month-and-year/index.md +++ b/static/usage/v7/datetime/presentation/month-and-year/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/datetime/presentation/time/angular.md b/static/usage/v7/datetime/presentation/time/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime/presentation/time/angular.md rename to static/usage/v7/datetime/presentation/time/angular/example_component_html.md diff --git a/static/usage/v7/datetime/presentation/time/angular/example_component_ts.md b/static/usage/v7/datetime/presentation/time/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v7/datetime/presentation/time/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/presentation/time/index.md b/static/usage/v7/datetime/presentation/time/index.md index 9423cfba0f9..c2482e6f001 100644 --- a/static/usage/v7/datetime/presentation/time/index.md +++ b/static/usage/v7/datetime/presentation/time/index.md @@ -3,10 +3,22 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/datetime/presentation/wheel/angular.md b/static/usage/v7/datetime/presentation/wheel/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime/presentation/wheel/angular.md rename to static/usage/v7/datetime/presentation/wheel/angular/example_component_html.md diff --git a/static/usage/v7/datetime/presentation/wheel/angular/example_component_ts.md b/static/usage/v7/datetime/presentation/wheel/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v7/datetime/presentation/wheel/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/presentation/wheel/index.md b/static/usage/v7/datetime/presentation/wheel/index.md index 47e4923bba6..8305adfc583 100644 --- a/static/usage/v7/datetime/presentation/wheel/index.md +++ b/static/usage/v7/datetime/presentation/wheel/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md b/static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md index 56c95d0ba0e..20df0e860fc 100644 --- a/static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md +++ b/static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md @@ -1,5 +1,7 @@ ```ts import { Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; +import { FormsModule } from '@angular/forms'; // ViewEncapsulation is turned off for this demo due to // a lack of support for styling multiple css shadow parts @@ -9,9 +11,10 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; templateUrl: 'example.component.html', styleUrls: ['example.component.css'], encapsulation: ViewEncapsulation.None, + imports: [IonDatetime, FormsModule], }) export class ExampleComponent implements OnInit { - public datetime; + public datetime!: string; ngOnInit() { const date = new Date(); diff --git a/static/usage/v7/datetime/styling/global-theming/angular/example_component_ts.md b/static/usage/v7/datetime/styling/global-theming/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v7/datetime/styling/global-theming/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/styling/global-theming/angular/global_css.md b/static/usage/v7/datetime/styling/global-theming/angular/global_css.md index 4ec3d3ecdf9..08a64bf203e 100644 --- a/static/usage/v7/datetime/styling/global-theming/angular/global_css.md +++ b/static/usage/v7/datetime/styling/global-theming/angular/global_css.md @@ -1,19 +1,19 @@ ```css /* Core CSS required for Ionic components to work properly */ -@import '~@ionic/angular/css/core.css'; +@import '@ionic/angular/css/core.css'; /* Basic CSS for apps built with Ionic */ -@import '~@ionic/angular/css/normalize.css'; -@import '~@ionic/angular/css/structure.css'; -@import '~@ionic/angular/css/typography.css'; -@import '~@ionic/angular/css/display.css'; +@import '@ionic/angular/css/normalize.css'; +@import '@ionic/angular/css/structure.css'; +@import '@ionic/angular/css/typography.css'; +@import '@ionic/angular/css/display.css'; /* Optional CSS utils that can be commented out */ -@import '~@ionic/angular/css/padding.css'; -@import '~@ionic/angular/css/float-elements.css'; -@import '~@ionic/angular/css/text-alignment.css'; -@import '~@ionic/angular/css/text-transformation.css'; -@import '~@ionic/angular/css/flex-utils.css'; +@import '@ionic/angular/css/padding.css'; +@import '@ionic/angular/css/float-elements.css'; +@import '@ionic/angular/css/text-alignment.css'; +@import '@ionic/angular/css/text-transformation.css'; +@import '@ionic/angular/css/flex-utils.css'; :root { --ion-color-rose: #831843; diff --git a/static/usage/v7/datetime/styling/global-theming/index.md b/static/usage/v7/datetime/styling/global-theming/index.md index f8824304f07..d566af6e990 100644 --- a/static/usage/v7/datetime/styling/global-theming/index.md +++ b/static/usage/v7/datetime/styling/global-theming/index.md @@ -8,6 +8,7 @@ import react_main_css from './react/main_css.md'; import vue from './vue.md'; import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; import angular_global_css from './angular/global_css.md'; diff --git a/static/usage/v7/datetime/title/showing-default-title/angular.md b/static/usage/v7/datetime/title/showing-default-title/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime/title/showing-default-title/angular.md rename to static/usage/v7/datetime/title/showing-default-title/angular/example_component_html.md diff --git a/static/usage/v7/datetime/title/showing-default-title/angular/example_component_ts.md b/static/usage/v7/datetime/title/showing-default-title/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v7/datetime/title/showing-default-title/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/title/showing-default-title/index.md b/static/usage/v7/datetime/title/showing-default-title/index.md index c0efd60dc18..192f93026ba 100644 --- a/static/usage/v7/datetime/title/showing-default-title/index.md +++ b/static/usage/v7/datetime/title/showing-default-title/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/datetime/basic/angular.md b/static/usage/v8/datetime/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime/basic/angular.md rename to static/usage/v8/datetime/basic/angular/example_component_html.md diff --git a/static/usage/v8/datetime/basic/angular/example_component_ts.md b/static/usage/v8/datetime/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/basic/index.md b/static/usage/v8/datetime/basic/index.md index 4d9429d3054..62ae8d73b99 100644 --- a/static/usage/v8/datetime/basic/index.md +++ b/static/usage/v8/datetime/basic/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/angular.md b/static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime/buttons/customizing-button-texts/angular.md rename to static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_html.md diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_ts.md b/static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/index.md b/static/usage/v8/datetime/buttons/customizing-button-texts/index.md index 8f8e886ca0a..641ef621906 100644 --- a/static/usage/v8/datetime/buttons/customizing-button-texts/index.md +++ b/static/usage/v8/datetime/buttons/customizing-button-texts/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/angular.md b/static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime/buttons/customizing-buttons/angular.md rename to static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_html.md diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_ts.md b/static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..9a2b1795d68 --- /dev/null +++ b/static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonButtons, IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/index.md b/static/usage/v8/datetime/buttons/customizing-buttons/index.md index 8c8dd6234a5..0e870411201 100644 --- a/static/usage/v8/datetime/buttons/customizing-buttons/index.md +++ b/static/usage/v8/datetime/buttons/customizing-buttons/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular.md rename to static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_html.md diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md index 209eb126efe..ea89976eaa5 100644 --- a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md +++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md b/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md index 3021390e188..37d9936a824 100644 --- a/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md +++ b/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], }) export class ExampleComponent { isWeekday = (dateString: string) => { diff --git a/static/usage/v8/datetime/date-constraints/max-min/angular.md b/static/usage/v8/datetime/date-constraints/max-min/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime/date-constraints/max-min/angular.md rename to static/usage/v8/datetime/date-constraints/max-min/angular/example_component_html.md diff --git a/static/usage/v8/datetime/date-constraints/max-min/angular/example_component_ts.md b/static/usage/v8/datetime/date-constraints/max-min/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/max-min/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/date-constraints/max-min/index.md b/static/usage/v8/datetime/date-constraints/max-min/index.md index d10c5885604..4c43fcb3fe7 100644 --- a/static/usage/v8/datetime/date-constraints/max-min/index.md +++ b/static/usage/v8/datetime/date-constraints/max-min/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/datetime/date-constraints/values/angular.md b/static/usage/v8/datetime/date-constraints/values/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime/date-constraints/values/angular.md rename to static/usage/v8/datetime/date-constraints/values/angular/example_component_html.md diff --git a/static/usage/v8/datetime/date-constraints/values/angular/example_component_ts.md b/static/usage/v8/datetime/date-constraints/values/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/values/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/date-constraints/values/index.md b/static/usage/v8/datetime/date-constraints/values/index.md index 3695e380fad..8e4964da788 100644 --- a/static/usage/v8/datetime/date-constraints/values/index.md +++ b/static/usage/v8/datetime/date-constraints/values/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/datetime/format-options/angular.md b/static/usage/v8/datetime/format-options/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime/format-options/angular.md rename to static/usage/v8/datetime/format-options/angular/example_component_html.md diff --git a/static/usage/v8/datetime/format-options/angular/example_component_ts.md b/static/usage/v8/datetime/format-options/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/format-options/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/format-options/index.md b/static/usage/v8/datetime/format-options/index.md index d6e6eb0ca44..c4321c59338 100644 --- a/static/usage/v8/datetime/format-options/index.md +++ b/static/usage/v8/datetime/format-options/index.md @@ -3,7 +3,9 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md index 4ca93b85f44..1382b5db0e9 100644 --- a/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md +++ b/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], }) export class ExampleComponent { highlightedDates = [ diff --git a/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md index 60f9c700d05..b877e31c7e5 100644 --- a/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md +++ b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md @@ -1,12 +1,15 @@ ```ts import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], }) export class ExampleComponent { - highlightedDates = (isoString) => { + highlightedDates = (isoString: string) => { const date = new Date(isoString); const utcDay = date.getUTCDate(); diff --git a/static/usage/v8/datetime/localization/custom-locale/angular.md b/static/usage/v8/datetime/localization/custom-locale/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime/localization/custom-locale/angular.md rename to static/usage/v8/datetime/localization/custom-locale/angular/example_component_html.md diff --git a/static/usage/v8/datetime/localization/custom-locale/angular/example_component_ts.md b/static/usage/v8/datetime/localization/custom-locale/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/localization/custom-locale/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/localization/custom-locale/index.md b/static/usage/v8/datetime/localization/custom-locale/index.md index 330a1e415bb..b45ae547fe5 100644 --- a/static/usage/v8/datetime/localization/custom-locale/index.md +++ b/static/usage/v8/datetime/localization/custom-locale/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/datetime/localization/first-day-of-week/angular.md b/static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime/localization/first-day-of-week/angular.md rename to static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_html.md diff --git a/static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_ts.md b/static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/localization/first-day-of-week/index.md b/static/usage/v8/datetime/localization/first-day-of-week/index.md index 4cc8b4b7bda..0b725341ad3 100644 --- a/static/usage/v8/datetime/localization/first-day-of-week/index.md +++ b/static/usage/v8/datetime/localization/first-day-of-week/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/datetime/localization/hour-cycle/angular.md b/static/usage/v8/datetime/localization/hour-cycle/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime/localization/hour-cycle/angular.md rename to static/usage/v8/datetime/localization/hour-cycle/angular/example_component_html.md diff --git a/static/usage/v8/datetime/localization/hour-cycle/angular/example_component_ts.md b/static/usage/v8/datetime/localization/hour-cycle/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/localization/hour-cycle/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/localization/hour-cycle/index.md b/static/usage/v8/datetime/localization/hour-cycle/index.md index 0e15b22a685..1fa52bc59c8 100644 --- a/static/usage/v8/datetime/localization/hour-cycle/index.md +++ b/static/usage/v8/datetime/localization/hour-cycle/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/angular.md b/static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime/localization/locale-extension-tags/angular.md rename to static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_html.md diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_ts.md b/static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/index.md b/static/usage/v8/datetime/localization/locale-extension-tags/index.md index 0013edd6d6f..e7c706b4534 100644 --- a/static/usage/v8/datetime/localization/locale-extension-tags/index.md +++ b/static/usage/v8/datetime/localization/locale-extension-tags/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/datetime/localization/time-label/angular.md b/static/usage/v8/datetime/localization/time-label/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime/localization/time-label/angular.md rename to static/usage/v8/datetime/localization/time-label/angular/example_component_html.md diff --git a/static/usage/v8/datetime/localization/time-label/angular/example_component_ts.md b/static/usage/v8/datetime/localization/time-label/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/localization/time-label/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/localization/time-label/index.md b/static/usage/v8/datetime/localization/time-label/index.md index 6586c762c06..d2baad09405 100644 --- a/static/usage/v8/datetime/localization/time-label/index.md +++ b/static/usage/v8/datetime/localization/time-label/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/datetime/multiple/angular.md b/static/usage/v8/datetime/multiple/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime/multiple/angular.md rename to static/usage/v8/datetime/multiple/angular/example_component_html.md diff --git a/static/usage/v8/datetime/multiple/angular/example_component_ts.md b/static/usage/v8/datetime/multiple/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/multiple/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/multiple/index.md b/static/usage/v8/datetime/multiple/index.md index b0542b8b8fc..8b9749c748d 100644 --- a/static/usage/v8/datetime/multiple/index.md +++ b/static/usage/v8/datetime/multiple/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/datetime/presentation/date/angular.md b/static/usage/v8/datetime/presentation/date/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime/presentation/date/angular.md rename to static/usage/v8/datetime/presentation/date/angular/example_component_html.md diff --git a/static/usage/v8/datetime/presentation/date/angular/example_component_ts.md b/static/usage/v8/datetime/presentation/date/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/presentation/date/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/presentation/date/index.md b/static/usage/v8/datetime/presentation/date/index.md index 7cb18100bd5..569e249c60f 100644 --- a/static/usage/v8/datetime/presentation/date/index.md +++ b/static/usage/v8/datetime/presentation/date/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/datetime/presentation/month-and-year/angular.md b/static/usage/v8/datetime/presentation/month-and-year/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime/presentation/month-and-year/angular.md rename to static/usage/v8/datetime/presentation/month-and-year/angular/example_component_html.md diff --git a/static/usage/v8/datetime/presentation/month-and-year/angular/example_component_ts.md b/static/usage/v8/datetime/presentation/month-and-year/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/presentation/month-and-year/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/presentation/month-and-year/index.md b/static/usage/v8/datetime/presentation/month-and-year/index.md index d8cb4417e6c..68d952f04af 100644 --- a/static/usage/v8/datetime/presentation/month-and-year/index.md +++ b/static/usage/v8/datetime/presentation/month-and-year/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/datetime/presentation/time/angular.md b/static/usage/v8/datetime/presentation/time/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime/presentation/time/angular.md rename to static/usage/v8/datetime/presentation/time/angular/example_component_html.md diff --git a/static/usage/v8/datetime/presentation/time/angular/example_component_ts.md b/static/usage/v8/datetime/presentation/time/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/presentation/time/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/presentation/time/index.md b/static/usage/v8/datetime/presentation/time/index.md index 0dd5b553635..2941c9aff9c 100644 --- a/static/usage/v8/datetime/presentation/time/index.md +++ b/static/usage/v8/datetime/presentation/time/index.md @@ -3,10 +3,22 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/datetime/presentation/wheel/angular.md b/static/usage/v8/datetime/presentation/wheel/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime/presentation/wheel/angular.md rename to static/usage/v8/datetime/presentation/wheel/angular/example_component_html.md diff --git a/static/usage/v8/datetime/presentation/wheel/angular/example_component_ts.md b/static/usage/v8/datetime/presentation/wheel/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/presentation/wheel/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/presentation/wheel/index.md b/static/usage/v8/datetime/presentation/wheel/index.md index 0561288d93b..c0c0b53a308 100644 --- a/static/usage/v8/datetime/presentation/wheel/index.md +++ b/static/usage/v8/datetime/presentation/wheel/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md index 56c95d0ba0e..20df0e860fc 100644 --- a/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md +++ b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md @@ -1,5 +1,7 @@ ```ts import { Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; +import { FormsModule } from '@angular/forms'; // ViewEncapsulation is turned off for this demo due to // a lack of support for styling multiple css shadow parts @@ -9,9 +11,10 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; templateUrl: 'example.component.html', styleUrls: ['example.component.css'], encapsulation: ViewEncapsulation.None, + imports: [IonDatetime, FormsModule], }) export class ExampleComponent implements OnInit { - public datetime; + public datetime!: string; ngOnInit() { const date = new Date(); diff --git a/static/usage/v8/datetime/styling/global-theming/angular/example_component_ts.md b/static/usage/v8/datetime/styling/global-theming/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/styling/global-theming/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/styling/global-theming/index.md b/static/usage/v8/datetime/styling/global-theming/index.md index f87d6e8fad5..a8cc488ac3e 100644 --- a/static/usage/v8/datetime/styling/global-theming/index.md +++ b/static/usage/v8/datetime/styling/global-theming/index.md @@ -9,6 +9,7 @@ import vue_example from './vue/example_vue.md'; import angular_example_component_html from './angular/example_component_html.md'; import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; import variables_css from './theme/variables_css.md'; @@ -39,6 +40,7 @@ import variables_css from './theme/variables_css.md'; files: { 'src/app/example.component.html': angular_example_component_html, 'src/app/example.component.css': angular_example_component_css, + 'src/app/example.component.ts': angular_example_component_ts, 'src/theme/variables.css': variables_css, }, }, diff --git a/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_ts.md b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_ts.md index 39bac10093c..65416271761 100644 --- a/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_ts.md +++ b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component, ViewEncapsulation } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; // ViewEncapsulation is turned off for this demo due to // a lack of support for styling multiple css shadow parts @@ -9,6 +10,7 @@ import { Component, ViewEncapsulation } from '@angular/core'; templateUrl: 'example.component.html', styleUrls: ['example.component.css'], encapsulation: ViewEncapsulation.None, + imports: [IonDatetime], }) export class ExampleComponent {} ``` diff --git a/static/usage/v8/datetime/title/customizing-title/angular.md b/static/usage/v8/datetime/title/customizing-title/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime/title/customizing-title/angular.md rename to static/usage/v8/datetime/title/customizing-title/angular/example_component_html.md diff --git a/static/usage/v8/datetime/title/customizing-title/angular/example_component_ts.md b/static/usage/v8/datetime/title/customizing-title/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/title/customizing-title/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/title/customizing-title/index.md b/static/usage/v8/datetime/title/customizing-title/index.md index 248c0b86bab..3c1ca1c82f1 100644 --- a/static/usage/v8/datetime/title/customizing-title/index.md +++ b/static/usage/v8/datetime/title/customizing-title/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v8/datetime/title/showing-default-title/angular.md b/static/usage/v8/datetime/title/showing-default-title/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime/title/showing-default-title/angular.md rename to static/usage/v8/datetime/title/showing-default-title/angular/example_component_html.md diff --git a/static/usage/v8/datetime/title/showing-default-title/angular/example_component_ts.md b/static/usage/v8/datetime/title/showing-default-title/angular/example_component_ts.md new file mode 100644 index 00000000000..64d541cb04e --- /dev/null +++ b/static/usage/v8/datetime/title/showing-default-title/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/title/showing-default-title/index.md b/static/usage/v8/datetime/title/showing-default-title/index.md index c053667913e..237eccc68bf 100644 --- a/static/usage/v8/datetime/title/showing-default-title/index.md +++ b/static/usage/v8/datetime/title/showing-default-title/index.md @@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md';