diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.md index dba18927800..5a8d29dc832 100644 --- a/docs/api/infinite-scroll.md +++ b/docs/api/infinite-scroll.md @@ -21,6 +21,8 @@ The Infinite Scroll component calls an action to be performed when the user scro The expression assigned to the `ionInfinite` event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the `complete()` method on the infinite scroll instance. +## Basic Usage + import Basic from '@site/static/usage/v8/infinite-scroll/basic/index.md'; @@ -118,4 +120,4 @@ interface InfiniteScrollCustomEvent extends CustomEvent { ## Slots - \ No newline at end of file + diff --git a/docs/api/reorder.md b/docs/api/reorder.md index dd9e3c0f4e2..ad07a4290ea 100644 --- a/docs/api/reorder.md +++ b/docs/api/reorder.md @@ -67,7 +67,7 @@ In order to sort the array upon completion of the reorder, the array should be p In some cases, it may be necessary for an app to reorder both the array and the DOM nodes on its own. If this is required, `false` should be passed as a parameter to the `complete` method. This will prevent Ionic from reordering any DOM nodes inside of the reorder group. -Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `trackBy` for Angular, and `key` for React and Vue. +Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `track` for Angular, and `key` for React and Vue. import UpdatingData from '@site/static/usage/v8/reorder/updating-data/index.md'; diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts index 620d6dbe2d2..64e019af931 100644 --- a/src/components/global/Playground/stackblitz.utils.ts +++ b/src/components/global/Playground/stackblitz.utils.ts @@ -105,67 +105,63 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => { const openAngularEditor = async (code: string, options?: EditorOptions) => { const defaultFiles = await loadSourceFiles( [ + 'angular/package.json', + 'angular/angular.json', + 'angular/tsconfig.json', + 'angular/tsconfig.app.json', 'angular/main.ts', - 'angular/app.module.ts', - 'angular/app.component.ts', + 'angular/index.html', + 'angular/app.routes.ts', + options?.includeIonContent ? 'angular/app.component.withContent.ts' : 'angular/app.component.ts', 'angular/app.component.css', options?.includeIonContent ? 'angular/app.component.withContent.html' : 'angular/app.component.html', 'angular/example.component.ts', 'angular/styles.css', 'angular/global.css', 'angular/variables.css', - 'angular/angular.json', - 'angular/tsconfig.json', - 'angular/package.json', ], options.version ); - const appModule = 'src/app/app.module.ts'; + const package_json = JSON.parse(defaultFiles[0]); + + if (options?.dependencies) { + package_json.dependencies = { + ...package_json.dependencies, + ...options.dependencies, + }; + } + + const main = 'src/main.ts'; + const files = { - 'src/main.ts': defaultFiles[0], + 'package.json': JSON.stringify(package_json, null, 2), + 'angular.json': defaultFiles[1], + 'tsconfig.json': defaultFiles[2], + 'tsconfig.app.json': defaultFiles[3], + [main]: defaultFiles[4], + 'src/index.html': defaultFiles[5], 'src/polyfills.ts': `import 'zone.js';`, - [appModule]: defaultFiles[1], - 'src/app/app.component.ts': defaultFiles[2], - 'src/app/app.component.css': defaultFiles[3], - 'src/app/app.component.html': defaultFiles[4], - 'src/app/example.component.ts': defaultFiles[5], + 'src/app/app.routes.ts': defaultFiles[6], + 'src/app/app.component.ts': defaultFiles[7], + 'src/app/app.component.css': defaultFiles[8], + 'src/app/app.component.html': defaultFiles[9], + 'src/app/example.component.ts': defaultFiles[10], 'src/app/example.component.html': code, 'src/app/example.component.css': '', - 'src/index.html': '', - 'src/styles.css': defaultFiles[6], - 'src/global.css': defaultFiles[7], - 'src/theme/variables.css': defaultFiles[8], - 'angular.json': defaultFiles[9], - 'tsconfig.json': defaultFiles[10], + 'src/styles.css': defaultFiles[11], + 'src/global.css': defaultFiles[12], + 'src/theme/variables.css': defaultFiles[13], ...options?.files, - ...options?.dependencies, }; - const package_json = defaultFiles[11]; - - files[appModule] = files[appModule].replace( - 'IonicModule.forRoot({})', - `IonicModule.forRoot({ mode: '${options?.mode}' })` - ); - - let dependencies = {}; - try { - dependencies = { - ...dependencies, - ...JSON.parse(package_json).dependencies, - ...options?.dependencies, - }; - } catch (e) { - console.error('Failed to parse package.json contents', e); - } + files[main] = files[main].replace('provideIonicAngular()', `provideIonicAngular({ mode: '${options?.mode}' })`); sdk.openProject({ - template: 'angular-cli', + template: 'node', title: options?.title ?? DEFAULT_EDITOR_TITLE, description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION, files, - dependencies, }); }; diff --git a/static/code/stackblitz/v7/angular/angular.json b/static/code/stackblitz/v7/angular/angular.json index 811624f69b5..7cc8b31603c 100644 --- a/static/code/stackblitz/v7/angular/angular.json +++ b/static/code/stackblitz/v7/angular/angular.json @@ -4,66 +4,86 @@ "newProjectRoot": "projects", "projects": { "app": { + "projectType": "application", "root": "", "sourceRoot": "src", - "projectType": "application", "prefix": "app", - "schematics": {}, "architect": { "build": { - "builder": "@angular-devkit/build-angular:browser", + "builder": "@angular-devkit/build-angular:application", "options": { - "outputPath": "dist", + "outputPath": { + "base": "www" + }, "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "src/tsconfig.app.json", - "assets": ["src/favicon.ico", "src/assets"], + "polyfills": [ + "src/polyfills.ts" + ], + "tsConfig": "tsconfig.app.json", + "assets": [ + { + "glob": "**/*", + "input": "src/assets", + "output": "assets" + } + ], "styles": ["src/styles.css", "src/global.css", "src/theme/variables.css"], - "scripts": [] + "scripts": [], + "browser": "src/main.ts" }, "configurations": { "production": { - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" - } - ], - "optimization": true, - "outputHashing": "all", - "sourceMap": false, - "extractCss": true, - "namedChunks": false, - "aot": true, - "extractLicenses": true, - "vendorChunk": false, - "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" } - ] + ], + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + }, + "ci": { + "progress": false } - } + }, + "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", - "options": { - "browserTarget": "app:build" - }, "configurations": { "production": { - "browserTarget": "app:build:production" + "buildTarget": "app:build:production" + }, + "development": { + "buildTarget": "app:build:development" + }, + "ci": { + "progress": false } - } + }, + "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { - "browserTarget": "app:build" + "buildTarget": "app:build" } }, "test": { @@ -71,48 +91,43 @@ "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", - "tsConfig": "src/tsconfig.spec.json", - "karmaConfig": "src/karma.conf.js", - "styles": ["src/styles.css"], - "scripts": [], - "assets": ["src/favicon.ico", "src/assets"] - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] - } - } - } - }, - "app-e2e": { - "root": "e2e/", - "projectType": "application", - "prefix": "", - "architect": { - "e2e": { - "builder": "@angular-devkit/build-angular:protractor", - "options": { - "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "app:serve" + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "assets": [ + { + "glob": "**/*", + "input": "src/assets", + "output": "assets" + } + ], + "styles": ["src/styles.css", "src/global.css", "src/theme/variables.css"], + "scripts": [] }, "configurations": { - "production": { - "devServerTarget": "app:serve:production" + "ci": { + "progress": false, + "watch": false } } }, "lint": { - "builder": "@angular-devkit/build-angular:tslint", + "builder": "@angular-eslint/builder:lint", "options": { - "tsConfig": "e2e/tsconfig.e2e.json", - "exclude": ["**/node_modules/**"] + "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"] } } } } }, - "defaultProject": "app" + "cli": { + "schematicCollections": ["@ionic/angular-toolkit"] + }, + "schematics": { + "@angular-eslint/schematics:application": { + "setParserOptionsProject": true + }, + "@angular-eslint/schematics:library": { + "setParserOptionsProject": true + } + } } diff --git a/static/code/stackblitz/v7/angular/app.component.ts b/static/code/stackblitz/v7/angular/app.component.ts index ed440084f8f..0cf0f64b77f 100644 --- a/static/code/stackblitz/v7/angular/app.component.ts +++ b/static/code/stackblitz/v7/angular/app.component.ts @@ -1,8 +1,13 @@ import { Component } from '@angular/core'; +import { IonApp } from '@ionic/angular/standalone'; +import { ExampleComponent } from './example.component'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', - styleUrls: ['app.component.css'] + styleUrls: ['app.component.css'], + imports: [ExampleComponent, IonApp], }) -export class AppComponent { } +export class AppComponent { + constructor() {} +} diff --git a/static/code/stackblitz/v7/angular/app.component.withContent.ts b/static/code/stackblitz/v7/angular/app.component.withContent.ts new file mode 100644 index 00000000000..0a7113552c3 --- /dev/null +++ b/static/code/stackblitz/v7/angular/app.component.withContent.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { IonApp, IonContent } from '@ionic/angular/standalone'; +import { ExampleComponent } from './example.component'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'], + imports: [ExampleComponent, IonApp, IonContent], +}) +export class AppComponent { + constructor() {} +} diff --git a/static/code/stackblitz/v7/angular/app.module.ts b/static/code/stackblitz/v7/angular/app.module.ts deleted file mode 100644 index 7f6894ce6af..00000000000 --- a/static/code/stackblitz/v7/angular/app.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - -import { IonicModule } from '@ionic/angular'; - -import { AppComponent } from './app.component'; -import { ExampleComponent } from './example.component'; - -@NgModule({ - imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({})], - declarations: [AppComponent, ExampleComponent], - bootstrap: [AppComponent], -}) -export class AppModule { } diff --git a/static/code/stackblitz/v7/angular/app.routes.ts b/static/code/stackblitz/v7/angular/app.routes.ts new file mode 100644 index 00000000000..f442724b6f3 --- /dev/null +++ b/static/code/stackblitz/v7/angular/app.routes.ts @@ -0,0 +1,13 @@ +import { Routes } from '@angular/router'; + +export const routes: Routes = [ + { + path: 'example', + loadComponent: () => import('./example.component').then((m) => m.ExampleComponent), + }, + { + path: '', + redirectTo: 'example', + pathMatch: 'full', + }, +]; diff --git a/static/code/stackblitz/v7/angular/index.html b/static/code/stackblitz/v7/angular/index.html new file mode 100644 index 00000000000..227b2a07ed1 --- /dev/null +++ b/static/code/stackblitz/v7/angular/index.html @@ -0,0 +1,15 @@ + + + + + + + + Ionic App + + + + + + + diff --git a/static/code/stackblitz/v7/angular/main.ts b/static/code/stackblitz/v7/angular/main.ts index 518110491b2..db355ecf14a 100644 --- a/static/code/stackblitz/v7/angular/main.ts +++ b/static/code/stackblitz/v7/angular/main.ts @@ -1,7 +1,14 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router'; +import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone'; -import { AppModule } from './app/app.module'; +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err: any) => console.error(err)); +bootstrapApplication(AppComponent, { + providers: [ + { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, + provideIonicAngular(), + provideRouter(routes, withPreloading(PreloadAllModules)), + ], +}); diff --git a/static/code/stackblitz/v7/angular/package.json b/static/code/stackblitz/v7/angular/package.json index 2fbb72a6380..fcb7176519a 100644 --- a/static/code/stackblitz/v7/angular/package.json +++ b/static/code/stackblitz/v7/angular/package.json @@ -1,8 +1,32 @@ { + "name": "angular-starter", + "private": true, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build" + }, "dependencies": { + "@angular/animations": "^19.0.0", + "@angular/common": "^19.0.0", + "@angular/compiler": "^19.0.0", + "@angular/core": "^19.0.0", + "@angular/forms": "^19.0.0", + "@angular/platform-browser": "^19.0.0", + "@angular/platform-browser-dynamic": "^19.0.0", + "@angular/router": "^19.0.0", "@ionic/angular": "^7.0.0", "@ionic/core": "^7.0.0", - "@angular/platform-browser-dynamic": "19.0.1", - "ionicons": "7.4.0" + "ionicons": "7.4.0", + "rxjs": "^7.8.1", + "tslib": "^2.5.0", + "zone.js": "~0.15.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "^19.0.0", + "@angular/build": "^19.0.0", + "@angular/cli": "^19.0.0", + "@angular/compiler-cli": "^19.0.0", + "typescript": "^5.6.3" } } diff --git a/static/code/stackblitz/v7/angular/styles.css b/static/code/stackblitz/v7/angular/styles.css index 463c50148fb..b01fadedbee 100644 --- a/static/code/stackblitz/v7/angular/styles.css +++ b/static/code/stackblitz/v7/angular/styles.css @@ -10,17 +10,17 @@ */ /* 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/normalize.css"; +@import "@ionic/angular/css/structure.css"; +@import "@ionic/angular/css/typography.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/display.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"; +@import "@ionic/angular/css/display.css"; diff --git a/static/code/stackblitz/v7/angular/tsconfig.app.json b/static/code/stackblitz/v7/angular/tsconfig.app.json new file mode 100644 index 00000000000..f69a169a56e --- /dev/null +++ b/static/code/stackblitz/v7/angular/tsconfig.app.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/app", + "types": [] + }, + "files": ["src/main.ts", "src/polyfills.ts"], + "include": ["src/**/*.d.ts"] +} diff --git a/static/code/stackblitz/v7/angular/tsconfig.json b/static/code/stackblitz/v7/angular/tsconfig.json index 129cb6a3887..f46b98bad6e 100644 --- a/static/code/stackblitz/v7/angular/tsconfig.json +++ b/static/code/stackblitz/v7/angular/tsconfig.json @@ -3,20 +3,27 @@ "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "esModuleInterop": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, "sourceMap": true, "declaration": false, - "downlevelIteration": true, "experimentalDecorators": true, - "module": "esnext", "moduleResolution": "node", "importHelpers": true, - "target": "es2015", - "typeRoots": ["node_modules/@types"], - "lib": ["es2018", "dom"] + "target": "es2022", + "module": "es2020", + "lib": ["es2018", "dom"], + "useDefineForClassFields": false }, "angularCompilerOptions": { - "enableIvy": true, - "fullTemplateTypeCheck": true, - "strictInjectionParameters": true + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true } } diff --git a/static/code/stackblitz/v8/angular/angular.json b/static/code/stackblitz/v8/angular/angular.json index 811624f69b5..7cc8b31603c 100644 --- a/static/code/stackblitz/v8/angular/angular.json +++ b/static/code/stackblitz/v8/angular/angular.json @@ -4,66 +4,86 @@ "newProjectRoot": "projects", "projects": { "app": { + "projectType": "application", "root": "", "sourceRoot": "src", - "projectType": "application", "prefix": "app", - "schematics": {}, "architect": { "build": { - "builder": "@angular-devkit/build-angular:browser", + "builder": "@angular-devkit/build-angular:application", "options": { - "outputPath": "dist", + "outputPath": { + "base": "www" + }, "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "src/tsconfig.app.json", - "assets": ["src/favicon.ico", "src/assets"], + "polyfills": [ + "src/polyfills.ts" + ], + "tsConfig": "tsconfig.app.json", + "assets": [ + { + "glob": "**/*", + "input": "src/assets", + "output": "assets" + } + ], "styles": ["src/styles.css", "src/global.css", "src/theme/variables.css"], - "scripts": [] + "scripts": [], + "browser": "src/main.ts" }, "configurations": { "production": { - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" - } - ], - "optimization": true, - "outputHashing": "all", - "sourceMap": false, - "extractCss": true, - "namedChunks": false, - "aot": true, - "extractLicenses": true, - "vendorChunk": false, - "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" } - ] + ], + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + }, + "ci": { + "progress": false } - } + }, + "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", - "options": { - "browserTarget": "app:build" - }, "configurations": { "production": { - "browserTarget": "app:build:production" + "buildTarget": "app:build:production" + }, + "development": { + "buildTarget": "app:build:development" + }, + "ci": { + "progress": false } - } + }, + "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { - "browserTarget": "app:build" + "buildTarget": "app:build" } }, "test": { @@ -71,48 +91,43 @@ "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", - "tsConfig": "src/tsconfig.spec.json", - "karmaConfig": "src/karma.conf.js", - "styles": ["src/styles.css"], - "scripts": [], - "assets": ["src/favicon.ico", "src/assets"] - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] - } - } - } - }, - "app-e2e": { - "root": "e2e/", - "projectType": "application", - "prefix": "", - "architect": { - "e2e": { - "builder": "@angular-devkit/build-angular:protractor", - "options": { - "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "app:serve" + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "assets": [ + { + "glob": "**/*", + "input": "src/assets", + "output": "assets" + } + ], + "styles": ["src/styles.css", "src/global.css", "src/theme/variables.css"], + "scripts": [] }, "configurations": { - "production": { - "devServerTarget": "app:serve:production" + "ci": { + "progress": false, + "watch": false } } }, "lint": { - "builder": "@angular-devkit/build-angular:tslint", + "builder": "@angular-eslint/builder:lint", "options": { - "tsConfig": "e2e/tsconfig.e2e.json", - "exclude": ["**/node_modules/**"] + "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"] } } } } }, - "defaultProject": "app" + "cli": { + "schematicCollections": ["@ionic/angular-toolkit"] + }, + "schematics": { + "@angular-eslint/schematics:application": { + "setParserOptionsProject": true + }, + "@angular-eslint/schematics:library": { + "setParserOptionsProject": true + } + } } diff --git a/static/code/stackblitz/v8/angular/app.component.ts b/static/code/stackblitz/v8/angular/app.component.ts index ed440084f8f..0cf0f64b77f 100644 --- a/static/code/stackblitz/v8/angular/app.component.ts +++ b/static/code/stackblitz/v8/angular/app.component.ts @@ -1,8 +1,13 @@ import { Component } from '@angular/core'; +import { IonApp } from '@ionic/angular/standalone'; +import { ExampleComponent } from './example.component'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', - styleUrls: ['app.component.css'] + styleUrls: ['app.component.css'], + imports: [ExampleComponent, IonApp], }) -export class AppComponent { } +export class AppComponent { + constructor() {} +} diff --git a/static/code/stackblitz/v8/angular/app.component.withContent.ts b/static/code/stackblitz/v8/angular/app.component.withContent.ts new file mode 100644 index 00000000000..0a7113552c3 --- /dev/null +++ b/static/code/stackblitz/v8/angular/app.component.withContent.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { IonApp, IonContent } from '@ionic/angular/standalone'; +import { ExampleComponent } from './example.component'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'], + imports: [ExampleComponent, IonApp, IonContent], +}) +export class AppComponent { + constructor() {} +} diff --git a/static/code/stackblitz/v8/angular/app.module.ts b/static/code/stackblitz/v8/angular/app.module.ts deleted file mode 100644 index 7f6894ce6af..00000000000 --- a/static/code/stackblitz/v8/angular/app.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - -import { IonicModule } from '@ionic/angular'; - -import { AppComponent } from './app.component'; -import { ExampleComponent } from './example.component'; - -@NgModule({ - imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({})], - declarations: [AppComponent, ExampleComponent], - bootstrap: [AppComponent], -}) -export class AppModule { } diff --git a/static/code/stackblitz/v8/angular/app.routes.ts b/static/code/stackblitz/v8/angular/app.routes.ts new file mode 100644 index 00000000000..f442724b6f3 --- /dev/null +++ b/static/code/stackblitz/v8/angular/app.routes.ts @@ -0,0 +1,13 @@ +import { Routes } from '@angular/router'; + +export const routes: Routes = [ + { + path: 'example', + loadComponent: () => import('./example.component').then((m) => m.ExampleComponent), + }, + { + path: '', + redirectTo: 'example', + pathMatch: 'full', + }, +]; diff --git a/static/code/stackblitz/v8/angular/index.html b/static/code/stackblitz/v8/angular/index.html new file mode 100644 index 00000000000..227b2a07ed1 --- /dev/null +++ b/static/code/stackblitz/v8/angular/index.html @@ -0,0 +1,15 @@ + + + + + + + + Ionic App + + + + + + + diff --git a/static/code/stackblitz/v8/angular/main.ts b/static/code/stackblitz/v8/angular/main.ts index 518110491b2..db355ecf14a 100644 --- a/static/code/stackblitz/v8/angular/main.ts +++ b/static/code/stackblitz/v8/angular/main.ts @@ -1,7 +1,14 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router'; +import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone'; -import { AppModule } from './app/app.module'; +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err: any) => console.error(err)); +bootstrapApplication(AppComponent, { + providers: [ + { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, + provideIonicAngular(), + provideRouter(routes, withPreloading(PreloadAllModules)), + ], +}); diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json index cc00c35fb5c..b0c78d7f466 100644 --- a/static/code/stackblitz/v8/angular/package.json +++ b/static/code/stackblitz/v8/angular/package.json @@ -1,8 +1,32 @@ { + "name": "angular-starter", + "private": true, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build" + }, "dependencies": { - "@ionic/angular": "8.4.1", - "@ionic/core": "8.4.1", - "@angular/platform-browser-dynamic": "19.0.1", - "ionicons": "7.4.0" + "@angular/animations": "^19.0.0", + "@angular/common": "^19.0.0", + "@angular/compiler": "^19.0.0", + "@angular/core": "^19.0.0", + "@angular/forms": "^19.0.0", + "@angular/platform-browser": "^19.0.0", + "@angular/platform-browser-dynamic": "^19.0.0", + "@angular/router": "^19.0.0", + "@ionic/angular": "^8.0.0", + "@ionic/core": "^8.0.0", + "ionicons": "7.4.0", + "rxjs": "^7.8.1", + "tslib": "^2.5.0", + "zone.js": "~0.15.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "^19.0.0", + "@angular/build": "^19.0.0", + "@angular/cli": "^19.0.0", + "@angular/compiler-cli": "^19.0.0", + "typescript": "^5.6.3" } } diff --git a/static/code/stackblitz/v8/angular/styles.css b/static/code/stackblitz/v8/angular/styles.css index 4532a9076d4..6d58ddeb61d 100644 --- a/static/code/stackblitz/v8/angular/styles.css +++ b/static/code/stackblitz/v8/angular/styles.css @@ -10,28 +10,28 @@ */ /* 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/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/display.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"; /** - * Ionic Dark Theme + * Ionic Dark Palette * ----------------------------------------------------- - * For more information, please see: + * For more info, please see: * https://ionicframework.com/docs/theming/dark-mode */ -/* @import "~@ionic/angular/css/palettes/dark.always.css"; */ -/* @import "~@ionic/angular/css/palettes/dark.class.css"; */ -@import "~@ionic/angular/css/palettes/dark.system.css"; +/* @import "@ionic/angular/css/palettes/dark.always.css"; */ +/* @import "@ionic/angular/css/palettes/dark.class.css"; */ +@import '@ionic/angular/css/palettes/dark.system.css'; diff --git a/static/code/stackblitz/v8/angular/tsconfig.app.json b/static/code/stackblitz/v8/angular/tsconfig.app.json new file mode 100644 index 00000000000..f69a169a56e --- /dev/null +++ b/static/code/stackblitz/v8/angular/tsconfig.app.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/app", + "types": [] + }, + "files": ["src/main.ts", "src/polyfills.ts"], + "include": ["src/**/*.d.ts"] +} diff --git a/static/code/stackblitz/v8/angular/tsconfig.json b/static/code/stackblitz/v8/angular/tsconfig.json index 129cb6a3887..f46b98bad6e 100644 --- a/static/code/stackblitz/v8/angular/tsconfig.json +++ b/static/code/stackblitz/v8/angular/tsconfig.json @@ -3,20 +3,27 @@ "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "esModuleInterop": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, "sourceMap": true, "declaration": false, - "downlevelIteration": true, "experimentalDecorators": true, - "module": "esnext", "moduleResolution": "node", "importHelpers": true, - "target": "es2015", - "typeRoots": ["node_modules/@types"], - "lib": ["es2018", "dom"] + "target": "es2022", + "module": "es2020", + "lib": ["es2018", "dom"], + "useDefineForClassFields": false }, "angularCompilerOptions": { - "enableIvy": true, - "fullTemplateTypeCheck": true, - "strictInjectionParameters": true + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true } } diff --git a/static/usage/v7/accordion/accessibility/animations/angular.md b/static/usage/v7/accordion/accessibility/animations/angular/example_component_html.md similarity index 100% rename from static/usage/v7/accordion/accessibility/animations/angular.md rename to static/usage/v7/accordion/accessibility/animations/angular/example_component_html.md diff --git a/static/usage/v7/accordion/accessibility/animations/angular/example_component_ts.md b/static/usage/v7/accordion/accessibility/animations/angular/example_component_ts.md new file mode 100644 index 00000000000..b1a1813cc13 --- /dev/null +++ b/static/usage/v7/accordion/accessibility/animations/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/accordion/accessibility/animations/index.md b/static/usage/v7/accordion/accessibility/animations/index.md index 867276f88f2..d0c8c431f1a 100644 --- a/static/usage/v7/accordion/accessibility/animations/index.md +++ b/static/usage/v7/accordion/accessibility/animations/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/accordion/basic/angular.md b/static/usage/v7/accordion/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/accordion/basic/angular.md rename to static/usage/v7/accordion/basic/angular/example_component_html.md diff --git a/static/usage/v7/accordion/basic/angular/example_component_ts.md b/static/usage/v7/accordion/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..b1a1813cc13 --- /dev/null +++ b/static/usage/v7/accordion/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/accordion/basic/index.md b/static/usage/v7/accordion/basic/index.md index 36bb76371e2..1b29e600d17 100644 --- a/static/usage/v7/accordion/basic/index.md +++ b/static/usage/v7/accordion/basic/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'; - - - - - Button - - - - - - - - - -
- - - - First Accordion - -
First Content
- - - - Second Accordion - -
Second Content
- - - - Third Accordion - -
Third Content
- - -
- - - - diff --git a/static/usage/v7/accordion/disable-group/index.md b/static/usage/v7/accordion/disable-group/index.md deleted file mode 100644 index 204508c6b3c..00000000000 --- a/static/usage/v7/accordion/disable-group/index.md +++ /dev/null @@ -1,17 +0,0 @@ -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'; - - diff --git a/static/usage/v7/accordion/disable-group/javascript.md b/static/usage/v7/accordion/disable-group/javascript.md deleted file mode 100644 index 163641a544c..00000000000 --- a/static/usage/v7/accordion/disable-group/javascript.md +++ /dev/null @@ -1,22 +0,0 @@ -```html - - - - First Accordion - -
First Content
- - - - Second Accordion - -
Second Content
- - - - Third Accordion - -
Third Content
- - -``` diff --git a/static/usage/v7/accordion/disable-group/react.md b/static/usage/v7/accordion/disable-group/react.md deleted file mode 100644 index b2ff09b5fe4..00000000000 --- a/static/usage/v7/accordion/disable-group/react.md +++ /dev/null @@ -1,35 +0,0 @@ -```tsx -import React from 'react'; -import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; -function Example() { - return ( - - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - - ); -} -export default Example; -``` diff --git a/static/usage/v7/accordion/disable-group/vue.md b/static/usage/v7/accordion/disable-group/vue.md deleted file mode 100644 index 6c9e3567845..00000000000 --- a/static/usage/v7/accordion/disable-group/vue.md +++ /dev/null @@ -1,37 +0,0 @@ -```html - - - -``` diff --git a/static/usage/v7/accordion/disable-group/angular.md b/static/usage/v7/accordion/disable/group/angular/example_component_html.md similarity index 100% rename from static/usage/v7/accordion/disable-group/angular.md rename to static/usage/v7/accordion/disable/group/angular/example_component_html.md diff --git a/static/usage/v7/accordion/disable/group/angular/example_component_ts.md b/static/usage/v7/accordion/disable/group/angular/example_component_ts.md new file mode 100644 index 00000000000..b1a1813cc13 --- /dev/null +++ b/static/usage/v7/accordion/disable/group/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/accordion/disable/group/index.md b/static/usage/v7/accordion/disable/group/index.md index c564a2d16bd..32a10a6cf92 100644 --- a/static/usage/v7/accordion/disable/group/index.md +++ b/static/usage/v7/accordion/disable/group/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/accordion/disable/individual/angular.md b/static/usage/v7/accordion/disable/individual/angular/example_component_html.md similarity index 100% rename from static/usage/v7/accordion/disable/individual/angular.md rename to static/usage/v7/accordion/disable/individual/angular/example_component_html.md diff --git a/static/usage/v7/accordion/disable/individual/angular/example_component_ts.md b/static/usage/v7/accordion/disable/individual/angular/example_component_ts.md new file mode 100644 index 00000000000..b1a1813cc13 --- /dev/null +++ b/static/usage/v7/accordion/disable/individual/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/accordion/disable/individual/index.md b/static/usage/v7/accordion/disable/individual/index.md index 28172bca32b..da216e2c645 100644 --- a/static/usage/v7/accordion/disable/individual/index.md +++ b/static/usage/v7/accordion/disable/individual/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'; { + accordionGroupChange = (ev: CustomEvent) => { const collapsedItems = this.values.filter((value) => value !== ev.detail.value); const selectedValue = ev.detail.value; diff --git a/static/usage/v7/accordion/multiple/angular.md b/static/usage/v7/accordion/multiple/angular/example_component_html.md similarity index 100% rename from static/usage/v7/accordion/multiple/angular.md rename to static/usage/v7/accordion/multiple/angular/example_component_html.md diff --git a/static/usage/v7/accordion/multiple/angular/example_component_ts.md b/static/usage/v7/accordion/multiple/angular/example_component_ts.md new file mode 100644 index 00000000000..b1a1813cc13 --- /dev/null +++ b/static/usage/v7/accordion/multiple/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/accordion/multiple/index.md b/static/usage/v7/accordion/multiple/index.md index 868eaaa7c16..b63360d76cc 100644 --- a/static/usage/v7/accordion/multiple/index.md +++ b/static/usage/v7/accordion/multiple/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/accordion/toggle/angular/example_component_ts.md b/static/usage/v7/accordion/toggle/angular/example_component_ts.md index bdcac1d862f..3afda996a1d 100644 --- a/static/usage/v7/accordion/toggle/angular/example_component_ts.md +++ b/static/usage/v7/accordion/toggle/angular/example_component_ts.md @@ -1,13 +1,15 @@ ```ts import { Component, ViewChild } from '@angular/core'; -import { IonAccordionGroup } from '@ionic/angular'; +import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel], }) export class ExampleComponent { - @ViewChild('accordionGroup', { static: true }) accordionGroup: IonAccordionGroup; + @ViewChild('accordionGroup', { static: true }) accordionGroup!: IonAccordionGroup; toggleAccordion = () => { const nativeEl = this.accordionGroup; diff --git a/static/usage/v7/action-sheet/controller/angular/example_component_ts.md b/static/usage/v7/action-sheet/controller/angular/example_component_ts.md index c7ecc272663..7257bcb45e6 100644 --- a/static/usage/v7/action-sheet/controller/angular/example_component_ts.md +++ b/static/usage/v7/action-sheet/controller/angular/example_component_ts.md @@ -1,11 +1,12 @@ ```ts import { Component } from '@angular/core'; - -import { ActionSheetController } from '@ionic/angular'; +import { ActionSheetController, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], }) export class ExampleComponent { constructor(private actionSheetCtrl: ActionSheetController) {} diff --git a/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md b/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md index 78d9ddf05c8..df6c89aabe0 100644 --- a/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md +++ b/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonActionSheet, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonActionSheet, IonButton], }) export class ExampleComponent { isActionSheetOpen = false; diff --git a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md index f991151c4a1..082f779fe19 100644 --- a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md +++ b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonActionSheet, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonActionSheet, IonButton], }) export class ExampleComponent { public actionSheetButtons = [ diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md index a38c0b92307..f0f7fcc8d50 100644 --- a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md +++ b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md @@ -1,10 +1,13 @@ ```ts import { Component } from '@angular/core'; +import { IonActionSheet, IonButton } from '@ionic/angular/standalone'; +import type { OverlayEventDetail } from '@ionic/core'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['./example.component.css'], + imports: [IonActionSheet, IonButton], }) export class ExampleComponent { public actionSheetButtons = [ @@ -32,8 +35,8 @@ export class ExampleComponent { constructor() {} - logResult(ev) { - console.log(JSON.stringify(ev.detail, null, 2)); + logResult(event: CustomEvent>) { + console.log(JSON.stringify(event.detail, null, 2)); } } ``` diff --git a/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_ts.md index d9714abb668..709135c1c1f 100644 --- a/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_ts.md +++ b/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonActionSheet, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['./example.component.css'], + imports: [IonActionSheet, IonButton], }) export class ExampleComponent { public actionSheetButtons = [ diff --git a/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md b/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md index d9714abb668..709135c1c1f 100644 --- a/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md +++ b/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonActionSheet, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['./example.component.css'], + imports: [IonActionSheet, IonButton], }) export class ExampleComponent { public actionSheetButtons = [ diff --git a/static/usage/v7/alert/buttons/angular/example_component_ts.md b/static/usage/v7/alert/buttons/angular/example_component_ts.md index 20858d60e46..55be132d670 100644 --- a/static/usage/v7/alert/buttons/angular/example_component_ts.md +++ b/static/usage/v7/alert/buttons/angular/example_component_ts.md @@ -1,9 +1,13 @@ ```ts import { Component } from '@angular/core'; +import { IonAlert, IonButton } from '@ionic/angular/standalone'; +import type { OverlayEventDetail } from '@ionic/core'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAlert, IonButton], }) export class ExampleComponent { public alertButtons = [ @@ -23,7 +27,8 @@ export class ExampleComponent { }, ]; - setResult(ev) { + setResult(event: Event) { + const ev = event as CustomEvent>; console.log(`Dismissed with role: ${ev.detail.role}`); } } diff --git a/static/usage/v7/alert/customization/angular/example_component_ts.md b/static/usage/v7/alert/customization/angular/example_component_ts.md index 51552ff9852..ebfd969430e 100644 --- a/static/usage/v7/alert/customization/angular/example_component_ts.md +++ b/static/usage/v7/alert/customization/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonAlert, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAlert, IonButton], }) export class ExampleComponent { public alertButtons = [ diff --git a/static/usage/v7/alert/inputs/radios/angular/example_component_ts.md b/static/usage/v7/alert/inputs/radios/angular/example_component_ts.md index 34f44b288da..56ca5fedeb4 100644 --- a/static/usage/v7/alert/inputs/radios/angular/example_component_ts.md +++ b/static/usage/v7/alert/inputs/radios/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonAlert, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAlert, IonButton], }) export class ExampleComponent { public alertButtons = ['OK']; diff --git a/static/usage/v7/alert/inputs/text-inputs/angular/example_component_ts.md b/static/usage/v7/alert/inputs/text-inputs/angular/example_component_ts.md index 713dc9067fa..ae2c39e6164 100644 --- a/static/usage/v7/alert/inputs/text-inputs/angular/example_component_ts.md +++ b/static/usage/v7/alert/inputs/text-inputs/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonAlert, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAlert, IonButton], }) export class ExampleComponent { public alertButtons = ['OK']; diff --git a/static/usage/v7/alert/presenting/controller/angular/example_component_ts.md b/static/usage/v7/alert/presenting/controller/angular/example_component_ts.md index 6fdd69c7f69..baf0999fd30 100644 --- a/static/usage/v7/alert/presenting/controller/angular/example_component_ts.md +++ b/static/usage/v7/alert/presenting/controller/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; -import { AlertController } from '@ionic/angular'; +import { AlertController, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], }) export class ExampleComponent { constructor(private alertController: AlertController) {} diff --git a/static/usage/v7/alert/presenting/isOpen/angular/example_component_ts.md b/static/usage/v7/alert/presenting/isOpen/angular/example_component_ts.md index 82d1f17e457..e2f5ccac609 100644 --- a/static/usage/v7/alert/presenting/isOpen/angular/example_component_ts.md +++ b/static/usage/v7/alert/presenting/isOpen/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonAlert, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAlert, IonButton], }) export class ExampleComponent { isAlertOpen = false; diff --git a/static/usage/v7/alert/presenting/trigger/angular/example_component_ts.md b/static/usage/v7/alert/presenting/trigger/angular/example_component_ts.md index 9526ebdde8f..7d7adf11d25 100644 --- a/static/usage/v7/alert/presenting/trigger/angular/example_component_ts.md +++ b/static/usage/v7/alert/presenting/trigger/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonAlert, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAlert, IonButton], }) export class ExampleComponent { alertButtons = ['Action']; diff --git a/static/usage/v7/animations/basic/angular/example_component_ts.md b/static/usage/v7/animations/basic/angular/example_component_ts.md index e8a1dae1af8..117dd07dcbd 100644 --- a/static/usage/v7/animations/basic/angular/example_component_ts.md +++ b/static/usage/v7/animations/basic/angular/example_component_ts.md @@ -1,17 +1,18 @@ ```ts -import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; -import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} diff --git a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md index 36a7e22081a..32c5089fdcb 100644 --- a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md +++ b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md @@ -1,40 +1,48 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} ngAfterViewInit() { - const card = this.animationCtrl - .create() - .addElement(this.cardElements.get(0).nativeElement) - .duration(2000) - .beforeStyles({ - filter: 'invert(75%)', - }) - .beforeClearStyles(['box-shadow']) - .afterStyles({ - 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px', - }) - .afterClearStyles(['filter']) - .keyframes([ - { offset: 0, transform: 'scale(1)' }, - { offset: 0.5, transform: 'scale(1.5)' }, - { offset: 1, transform: 'scale(1)' }, - ]); - - this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]); + const cardEl = this.cardElements.get(0); + + const card = cardEl + ? this.animationCtrl + .create() + .addElement(cardEl.nativeElement) + .duration(2000) + .beforeStyles({ + filter: 'invert(75%)', + }) + .beforeClearStyles(['box-shadow']) + .afterStyles({ + 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px', + }) + .afterClearStyles(['filter']) + .keyframes([ + { offset: 0, transform: 'scale(1)' }, + { offset: 0.5, transform: 'scale(1.5)' }, + { offset: 1, transform: 'scale(1)' }, + ]) + : null; + + if (card) { + this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]); + } } play() { diff --git a/static/usage/v7/animations/chain/angular/example_component_ts.md b/static/usage/v7/animations/chain/angular/example_component_ts.md index 6c6acbef993..cb81d2e30d9 100644 --- a/static/usage/v7/animations/chain/angular/example_component_ts.md +++ b/static/usage/v7/animations/chain/angular/example_component_ts.md @@ -1,73 +1,85 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; - private cardA: Animation; - private cardB: Animation; - private cardC: Animation; + private cardA!: Animation | null; + private cardB!: Animation | null; + private cardC!: Animation | null; constructor(private animationCtrl: AnimationController) {} ngAfterViewInit() { - this.cardA = this.animationCtrl - .create() - .addElement(this.cardElements.get(0).nativeElement) - .fill('none') - .duration(1000) - .keyframes([ - { offset: 0, transform: 'scale(1) rotate(0)' }, - { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' }, - { offset: 1, transform: 'scale(1) rotate(0)' }, - ]); + const cardElA = this.cardElements.get(0); + const cardElB = this.cardElements.get(1); + const cardElC = this.cardElements.get(2); - this.cardB = this.animationCtrl - .create() - .addElement(this.cardElements.get(1).nativeElement) - .fill('none') - .duration(1000) - .keyframes([ - { offset: 0, transform: 'scale(1)', opacity: '1' }, - { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' }, - { offset: 1, transform: 'scale(1)', opacity: '1' }, - ]); + this.cardA = cardElA + ? this.animationCtrl + .create() + .addElement(cardElA.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1) rotate(0)' }, + { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' }, + { offset: 1, transform: 'scale(1) rotate(0)' }, + ]) + : null; - this.cardC = this.animationCtrl - .create() - .addElement(this.cardElements.get(2).nativeElement) - .fill('none') - .duration(1000) - .keyframes([ - { offset: 0, transform: 'scale(1)', opacity: '0.5' }, - { offset: 0.5, transform: 'scale(0.8)', opacity: '1' }, - { offset: 1, transform: 'scale(1)', opacity: '0.5' }, - ]); + this.cardB = cardElB + ? this.animationCtrl + .create() + .addElement(cardElB.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '1' }, + { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' }, + { offset: 1, transform: 'scale(1)', opacity: '1' }, + ]) + : null; + + this.cardC = cardElC + ? this.animationCtrl + .create() + .addElement(cardElC.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '0.5' }, + { offset: 0.5, transform: 'scale(0.8)', opacity: '1' }, + { offset: 1, transform: 'scale(1)', opacity: '0.5' }, + ]) + : null; } async play() { - await this.cardA.play(); - await this.cardB.play(); - await this.cardC.play(); + await this.cardA?.play(); + await this.cardB?.play(); + await this.cardC?.play(); } pause() { - this.cardA.pause(); - this.cardB.pause(); - this.cardC.pause(); + this.cardA?.pause(); + this.cardB?.pause(); + this.cardC?.pause(); } - stop() { - this.cardA.stop(); - this.cardB.stop(); - this.cardC.stop(); + async stop() { + await this.cardA?.stop(); + await this.cardB?.stop(); + await this.cardC?.stop(); } } ``` diff --git a/static/usage/v7/animations/gesture/angular/example_component_ts.md b/static/usage/v7/animations/gesture/angular/example_component_ts.md index 7b9aadccf5e..49bb9e92f64 100644 --- a/static/usage/v7/animations/gesture/angular/example_component_ts.md +++ b/static/usage/v7/animations/gesture/angular/example_component_ts.md @@ -1,18 +1,19 @@ ```ts -import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; -import { AnimationController, GestureController, IonCard } from '@ionic/angular'; -import type { Animation, Gesture, GestureDetail } from '@ionic/angular'; +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { AnimationController, GestureController, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation, Gesture, GestureDetail } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; - private gesture: Gesture; + private animation!: Animation; + private gesture!: Gesture; private started = false; private initialStep = 0; diff --git a/static/usage/v7/animations/group/angular/example_component_ts.md b/static/usage/v7/animations/group/angular/example_component_ts.md index 63f7a7b2f7a..607b9e9cdcd 100644 --- a/static/usage/v7/animations/group/angular/example_component_ts.md +++ b/static/usage/v7/animations/group/angular/example_component_ts.md @@ -1,33 +1,35 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} ngAfterViewInit() { const cardA = this.animationCtrl .create() - .addElement(this.cardElements.get(0).nativeElement) + .addElement(this.cardElements.get(0)!.nativeElement) .keyframes([ { offset: 0, transform: 'scale(1) rotate(0)' }, { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' }, - { offset: 1, transform: 'scale(1) rotate(0) ' }, + { offset: 1, transform: 'scale(1) rotate(0)' }, ]); const cardB = this.animationCtrl .create() - .addElement(this.cardElements.get(1).nativeElement) + .addElement(this.cardElements.get(1)!.nativeElement) .keyframes([ { offset: 0, transform: 'scale(1)', opacity: '1' }, { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' }, @@ -36,7 +38,7 @@ export class ExampleComponent { const cardC = this.animationCtrl .create() - .addElement(this.cardElements.get(2).nativeElement) + .addElement(this.cardElements.get(2)!.nativeElement) .duration(5000) .keyframes([ { offset: 0, transform: 'scale(1)', opacity: '0.5' }, @@ -48,7 +50,7 @@ export class ExampleComponent { .create() .duration(2000) .iterations(Infinity) - .addAnimation([cardA, cardB, cardC]); + .addAnimation([cardA, cardB, cardC].filter(Boolean) as Animation[]); } play() { diff --git a/static/usage/v7/animations/keyframes/angular/example_component_ts.md b/static/usage/v7/animations/keyframes/angular/example_component_ts.md index 4ee04bea423..88bc548bd60 100644 --- a/static/usage/v7/animations/keyframes/angular/example_component_ts.md +++ b/static/usage/v7/animations/keyframes/angular/example_component_ts.md @@ -1,16 +1,18 @@ ```ts import { Component, ElementRef, ViewChild } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard, IonCardContent } from '@ionic/angular'; +import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} diff --git a/static/usage/v7/animations/modal-override/angular/example_component_ts.md b/static/usage/v7/animations/modal-override/angular/example_component_ts.md index b1fe997c1d4..85a6a5f9b3b 100644 --- a/static/usage/v7/animations/modal-override/angular/example_component_ts.md +++ b/static/usage/v7/animations/modal-override/angular/example_component_ts.md @@ -1,14 +1,24 @@ ```ts import { Component, ViewChild } from '@angular/core'; -import type { IonModal } from '@ionic/angular'; -import { AnimationController } from '@ionic/angular'; +import { + AnimationController, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonModal, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar], }) export class ExampleComponent { - @ViewChild('modal', { static: true }) modal: IonModal; + @ViewChild('modal', { static: true }) modal!: IonModal; constructor(private animationCtrl: AnimationController) {} @@ -16,18 +26,22 @@ export class ExampleComponent { const enterAnimation = (baseEl: HTMLElement) => { const root = baseEl.shadowRoot; + const backdropElement = root?.querySelector('ion-backdrop'); + const wrapperElement = root?.querySelector('.modal-wrapper'); + const backdropAnimation = this.animationCtrl .create() - .addElement(root.querySelector('ion-backdrop')) + .addElement(backdropElement || baseEl) .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); - const wrapperAnimation = this.animationCtrl - .create() - .addElement(root.querySelector('.modal-wrapper')) - .keyframes([ + const wrapperAnimation = this.animationCtrl.create(); + + if (wrapperElement) { + wrapperAnimation.addElement(wrapperElement).keyframes([ { offset: 0, opacity: '0', transform: 'scale(0)' }, { offset: 1, opacity: '0.99', transform: 'scale(1)' }, ]); + } return this.animationCtrl .create() diff --git a/static/usage/v7/animations/preference-based/angular/example_component_ts.md b/static/usage/v7/animations/preference-based/angular/example_component_ts.md index c0e383d5ec0..98b3a8d4119 100644 --- a/static/usage/v7/animations/preference-based/angular/example_component_ts.md +++ b/static/usage/v7/animations/preference-based/angular/example_component_ts.md @@ -1,18 +1,18 @@ ```ts -import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; -import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['./example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} diff --git a/static/usage/v7/avatar/basic/angular.md b/static/usage/v7/avatar/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/avatar/basic/angular.md rename to static/usage/v7/avatar/basic/angular/example_component_html.md diff --git a/static/usage/v7/avatar/basic/angular/example_component_ts.md b/static/usage/v7/avatar/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..effe5580243 --- /dev/null +++ b/static/usage/v7/avatar/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAvatar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/avatar/basic/index.md b/static/usage/v7/avatar/basic/index.md index 8c51fa21d00..e77c4d5719c 100644 --- a/static/usage/v7/avatar/basic/index.md +++ b/static/usage/v7/avatar/basic/index.md @@ -3,6 +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/avatar/chip/angular.md b/static/usage/v7/avatar/chip/angular/example_component_html.md similarity index 100% rename from static/usage/v7/avatar/chip/angular.md rename to static/usage/v7/avatar/chip/angular/example_component_html.md diff --git a/static/usage/v7/avatar/chip/angular/example_component_ts.md b/static/usage/v7/avatar/chip/angular/example_component_ts.md new file mode 100644 index 00000000000..244bc7b789d --- /dev/null +++ b/static/usage/v7/avatar/chip/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAvatar, IonChip, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonChip, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/avatar/chip/index.md b/static/usage/v7/avatar/chip/index.md index d3a7fc0f6a9..1c26e7fff70 100644 --- a/static/usage/v7/avatar/chip/index.md +++ b/static/usage/v7/avatar/chip/index.md @@ -3,6 +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/avatar/item/angular.md b/static/usage/v7/avatar/item/angular/example_component_html.md similarity index 100% rename from static/usage/v7/avatar/item/angular.md rename to static/usage/v7/avatar/item/angular/example_component_html.md diff --git a/static/usage/v7/avatar/item/angular/example_component_ts.md b/static/usage/v7/avatar/item/angular/example_component_ts.md new file mode 100644 index 00000000000..80785adaf8a --- /dev/null +++ b/static/usage/v7/avatar/item/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAvatar, IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/avatar/item/index.md b/static/usage/v7/avatar/item/index.md index 52814ca5af0..dd14f3df10a 100644 --- a/static/usage/v7/avatar/item/index.md +++ b/static/usage/v7/avatar/item/index.md @@ -3,6 +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/avatar/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/avatar/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..effe5580243 --- /dev/null +++ b/static/usage/v7/avatar/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAvatar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/avatar/theming/css-properties/index.md b/static/usage/v7/avatar/theming/css-properties/index.md index 38bc99f7e8a..a030f931d09 100644 --- a/static/usage/v7/avatar/theming/css-properties/index.md +++ b/static/usage/v7/avatar/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; `, + imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar], }) export class PageOneComponent { component = PageTwoComponent; diff --git a/static/usage/v7/back-button/basic/angular/page_two_component_ts.md b/static/usage/v7/back-button/basic/angular/page_two_component_ts.md index b2cda11d2a8..55048bd7b27 100644 --- a/static/usage/v7/back-button/basic/angular/page_two_component_ts.md +++ b/static/usage/v7/back-button/basic/angular/page_two_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; @Component({ selector: 'app-page-two', @@ -17,6 +18,7 @@ import { Component } from '@angular/core';

Use the back button to navigate to the previous page.

`, + imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar], }) export class PageTwoComponent {} ``` diff --git a/static/usage/v7/back-button/basic/index.md b/static/usage/v7/back-button/basic/index.md index 27c7d6b0c0c..e1fc97ab64f 100644 --- a/static/usage/v7/back-button/basic/index.md +++ b/static/usage/v7/back-button/basic/index.md @@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; -import angular_app_module_ts from './angular/app_module_ts.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_page_one_component_ts from './angular/page_one_component_ts.md'; @@ -26,7 +25,6 @@ import vue_page_two from './vue/page_two_vue.md'; 'src/app/example.component.ts': angular_example_component_ts, 'src/app/page-one.component.ts': angular_page_one_component_ts, 'src/app/page-two.component.ts': angular_page_two_component_ts, - 'src/app/app.module.ts': angular_app_module_ts, }, }, react: { diff --git a/static/usage/v7/back-button/custom/angular/app_module_ts.md b/static/usage/v7/back-button/custom/angular/app_module_ts.md deleted file mode 100644 index 3c20b511446..00000000000 --- a/static/usage/v7/back-button/custom/angular/app_module_ts.md +++ /dev/null @@ -1,20 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - -import { IonicModule } from '@ionic/angular'; - -import { AppComponent } from './app.component'; -import { ExampleComponent } from './example.component'; - -import { PageOneComponent } from './page-one.component'; -import { PageTwoComponent } from './page-two.component'; - -@NgModule({ - imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})], - declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` diff --git a/static/usage/v7/back-button/custom/angular/example_component_ts.md b/static/usage/v7/back-button/custom/angular/example_component_ts.md index b123a4858ce..4c364e72340 100644 --- a/static/usage/v7/back-button/custom/angular/example_component_ts.md +++ b/static/usage/v7/back-button/custom/angular/example_component_ts.md @@ -1,11 +1,14 @@ ```ts import { Component } from '@angular/core'; +import { IonNav } from '@ionic/angular/standalone'; import { PageOneComponent } from './page-one.component'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonNav], }) export class ExampleComponent { component = PageOneComponent; diff --git a/static/usage/v7/back-button/custom/angular/page_one_component_ts.md b/static/usage/v7/back-button/custom/angular/page_one_component_ts.md index d181c5a5268..2f9b78ab164 100644 --- a/static/usage/v7/back-button/custom/angular/page_one_component_ts.md +++ b/static/usage/v7/back-button/custom/angular/page_one_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar } from '@ionic/angular/standalone'; import { PageTwoComponent } from './page-two.component'; @@ -19,6 +20,7 @@ import { PageTwoComponent } from './page-two.component'; `, + imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar], }) export class PageOneComponent { component = PageTwoComponent; diff --git a/static/usage/v7/back-button/custom/angular/page_two_component_ts.md b/static/usage/v7/back-button/custom/angular/page_two_component_ts.md index 05a1bd64d79..b0fb5a01ece 100644 --- a/static/usage/v7/back-button/custom/angular/page_two_component_ts.md +++ b/static/usage/v7/back-button/custom/angular/page_two_component_ts.md @@ -1,5 +1,9 @@ ```ts import { Component } from '@angular/core'; +import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +import { addIcons } from 'ionicons'; +import { caretBack } from 'ionicons/icons'; @Component({ selector: 'app-page-two', @@ -17,6 +21,16 @@ import { Component } from '@angular/core';

Use the back button to navigate to the previous page.

`, + imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar], }) -export class PageTwoComponent {} +export class PageTwoComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ caretBack }); + } +} ``` diff --git a/static/usage/v7/back-button/custom/index.md b/static/usage/v7/back-button/custom/index.md index d90a901513f..61c3038ecfb 100644 --- a/static/usage/v7/back-button/custom/index.md +++ b/static/usage/v7/back-button/custom/index.md @@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; -import angular_app_module_ts from './angular/app_module_ts.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_page_one_component_ts from './angular/page_one_component_ts.md'; @@ -26,7 +25,6 @@ import vue_page_two from './vue/page_two_vue.md'; 'src/app/example.component.ts': angular_example_component_ts, 'src/app/page-one.component.ts': angular_page_one_component_ts, 'src/app/page-two.component.ts': angular_page_two_component_ts, - 'src/app/app.module.ts': angular_app_module_ts, }, }, react: { diff --git a/static/usage/v7/backdrop/basic/angular/example_component_ts.md b/static/usage/v7/backdrop/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..c4809eb9652 --- /dev/null +++ b/static/usage/v7/backdrop/basic/angular/example_component_ts.md @@ -0,0 +1,21 @@ +```ts +import { Component } from '@angular/core'; +import { + IonBackdrop, + IonButton, + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBackdrop, IonButton, IonCheckbox, IonContent, IonHeader, IonItem, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/backdrop/basic/index.md b/static/usage/v7/backdrop/basic/index.md index 491b5eec6e1..f42ba8c6fce 100644 --- a/static/usage/v7/backdrop/basic/index.md +++ b/static/usage/v7/backdrop/basic/index.md @@ -7,8 +7,9 @@ import react_main_css from './react/main_css.md'; import vue from './vue.md'; -import angular_example_component_css from './angular/example_component_css.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 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/badge/theming/colors/angular.md b/static/usage/v7/badge/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v7/badge/theming/colors/angular.md rename to static/usage/v7/badge/theming/colors/angular/example_component_html.md diff --git a/static/usage/v7/badge/theming/colors/angular/example_component_ts.md b/static/usage/v7/badge/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..73c490c2240 --- /dev/null +++ b/static/usage/v7/badge/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBadge, IonItem, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/badge/theming/colors/index.md b/static/usage/v7/badge/theming/colors/index.md index 1b640d0675b..24e4c355683 100644 --- a/static/usage/v7/badge/theming/colors/index.md +++ b/static/usage/v7/badge/theming/colors/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/badge/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/badge/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..73c490c2240 --- /dev/null +++ b/static/usage/v7/badge/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBadge, IonItem, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/badge/theming/css-properties/index.md b/static/usage/v7/badge/theming/css-properties/index.md index 3fdf7e333a1..427b06d5336 100644 --- a/static/usage/v7/badge/theming/css-properties/index.md +++ b/static/usage/v7/badge/theming/css-properties/index.md @@ -8,6 +8,7 @@ import react_main_css from './react/main_css.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 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/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md index 8ae69af72a5..269836b83db 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md @@ -1,12 +1,15 @@ ```ts -import { Component, ViewChild } from '@angular/core'; +import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs], }) export class ExampleComponent { - maxBreadcrumbs = 4; + maxBreadcrumbs? = 4; expandBreadcrumbs() { this.maxBreadcrumbs = undefined; diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular.md b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular/example_component_html.md similarity index 100% rename from static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular.md rename to static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular/example_component_html.md diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular/example_component_ts.md new file mode 100644 index 00000000000..6b8add86109 --- /dev/null +++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md index 3df433d1891..6966fcca9b3 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/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/breadcrumbs/collapsing-items/max-items/angular.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/angular/example_component_html.md similarity index 100% rename from static/usage/v7/breadcrumbs/collapsing-items/max-items/angular.md rename to static/usage/v7/breadcrumbs/collapsing-items/max-items/angular/example_component_html.md diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/angular/example_component_ts.md new file mode 100644 index 00000000000..6b8add86109 --- /dev/null +++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md index 48e8a4ed82f..78ec179e699 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/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/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md index e3c0462a148..abd91bba073 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md @@ -11,13 +11,11 @@ - + @for (breadcrumb of collapsedBreadcrumbs; track breadcrumb; let last = $last) { + {{ breadcrumb.textContent }} + } diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md index aabfb29a821..17d100420d3 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md @@ -1,12 +1,23 @@ ```ts import { Component, ViewChild } from '@angular/core'; +import { + IonBreadcrumb, + IonBreadcrumbs, + IonContent, + IonItem, + IonLabel, + IonList, + IonPopover, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover], }) export class ExampleComponent { - @ViewChild('popover') popover; + @ViewChild('popover') popover!: HTMLIonPopoverElement; isOpen = false; collapsedBreadcrumbs: HTMLIonBreadcrumbElement[] = []; diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/icons/custom-separators/angular/example_component_ts.md index 072f2c1090f..2634a7a252f 100644 --- a/static/usage/v7/breadcrumbs/icons/custom-separators/angular/example_component_ts.md +++ b/static/usage/v7/breadcrumbs/icons/custom-separators/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { arrowForwardCircle } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { arrowForwardCircle } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs, IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md index ccc9439a382..474da49689d 100644 --- a/static/usage/v7/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md +++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { camera, film, flash, home } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { camera, film, flash, home } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/breadcrumbs/theming/colors/angular.md b/static/usage/v7/breadcrumbs/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v7/breadcrumbs/theming/colors/angular.md rename to static/usage/v7/breadcrumbs/theming/colors/angular/example_component_html.md diff --git a/static/usage/v7/breadcrumbs/theming/colors/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..6b8add86109 --- /dev/null +++ b/static/usage/v7/breadcrumbs/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/breadcrumbs/theming/colors/index.md b/static/usage/v7/breadcrumbs/theming/colors/index.md index c100fffe65d..647ec6cc988 100644 --- a/static/usage/v7/breadcrumbs/theming/colors/index.md +++ b/static/usage/v7/breadcrumbs/theming/colors/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/breadcrumbs/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..6b8add86109 --- /dev/null +++ b/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/index.md b/static/usage/v7/breadcrumbs/theming/css-properties/index.md index d808d24927b..c9ce8d95c73 100644 --- a/static/usage/v7/breadcrumbs/theming/css-properties/index.md +++ b/static/usage/v7/breadcrumbs/theming/css-properties/index.md @@ -8,6 +8,7 @@ import react_main_css from './react/main_css.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 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/button/expand/angular.md b/static/usage/v7/button/expand/angular/example_component_html.md similarity index 100% rename from static/usage/v7/button/expand/angular.md rename to static/usage/v7/button/expand/angular/example_component_html.md diff --git a/static/usage/v7/button/expand/angular/example_component_ts.md b/static/usage/v7/button/expand/angular/example_component_ts.md new file mode 100644 index 00000000000..403e44caaec --- /dev/null +++ b/static/usage/v7/button/expand/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/button/expand/index.md b/static/usage/v7/button/expand/index.md index 6bf7c9907f6..e93387cdccb 100644 --- a/static/usage/v7/button/expand/index.md +++ b/static/usage/v7/button/expand/index.md @@ -3,6 +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/button/fill/angular.md b/static/usage/v7/button/fill/angular/example_component_html.md similarity index 100% rename from static/usage/v7/button/fill/angular.md rename to static/usage/v7/button/fill/angular/example_component_html.md diff --git a/static/usage/v7/button/fill/angular/example_component_ts.md b/static/usage/v7/button/fill/angular/example_component_ts.md new file mode 100644 index 00000000000..403e44caaec --- /dev/null +++ b/static/usage/v7/button/fill/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/button/fill/index.md b/static/usage/v7/button/fill/index.md index db05b92b344..1d97a1bbbd0 100644 --- a/static/usage/v7/button/fill/index.md +++ b/static/usage/v7/button/fill/index.md @@ -3,6 +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/button/icons/angular/example_component_ts.md b/static/usage/v7/button/icons/angular/example_component_ts.md index 90bc1d24d3a..b852f87302b 100644 --- a/static/usage/v7/button/icons/angular/example_component_ts.md +++ b/static/usage/v7/button/icons/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { star } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { star } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/button/shape/angular.md b/static/usage/v7/button/shape/angular/example_component_html.md similarity index 100% rename from static/usage/v7/button/shape/angular.md rename to static/usage/v7/button/shape/angular/example_component_html.md diff --git a/static/usage/v7/button/shape/angular/example_component_ts.md b/static/usage/v7/button/shape/angular/example_component_ts.md new file mode 100644 index 00000000000..403e44caaec --- /dev/null +++ b/static/usage/v7/button/shape/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/button/shape/index.md b/static/usage/v7/button/shape/index.md index cc5417f8d56..2e5fa3e0a3f 100644 --- a/static/usage/v7/button/shape/index.md +++ b/static/usage/v7/button/shape/index.md @@ -3,6 +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/button/size/angular.md b/static/usage/v7/button/size/angular/example_component_html.md similarity index 100% rename from static/usage/v7/button/size/angular.md rename to static/usage/v7/button/size/angular/example_component_html.md diff --git a/static/usage/v7/button/size/angular/example_component_ts.md b/static/usage/v7/button/size/angular/example_component_ts.md new file mode 100644 index 00000000000..403e44caaec --- /dev/null +++ b/static/usage/v7/button/size/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/button/size/index.md b/static/usage/v7/button/size/index.md index e59a99edb6a..b7ff7457aa1 100644 --- a/static/usage/v7/button/size/index.md +++ b/static/usage/v7/button/size/index.md @@ -3,6 +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/button/text-wrapping/angular.md b/static/usage/v7/button/text-wrapping/angular/example_component_html.md similarity index 100% rename from static/usage/v7/button/text-wrapping/angular.md rename to static/usage/v7/button/text-wrapping/angular/example_component_html.md diff --git a/static/usage/v7/button/text-wrapping/angular/example_component_ts.md b/static/usage/v7/button/text-wrapping/angular/example_component_ts.md new file mode 100644 index 00000000000..403e44caaec --- /dev/null +++ b/static/usage/v7/button/text-wrapping/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/button/text-wrapping/index.md b/static/usage/v7/button/text-wrapping/index.md index 7696d798857..508d80714b9 100644 --- a/static/usage/v7/button/text-wrapping/index.md +++ b/static/usage/v7/button/text-wrapping/index.md @@ -3,6 +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/button/theming/colors/angular.md b/static/usage/v7/button/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v7/button/theming/colors/angular.md rename to static/usage/v7/button/theming/colors/angular/example_component_html.md diff --git a/static/usage/v7/button/theming/colors/angular/example_component_ts.md b/static/usage/v7/button/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..403e44caaec --- /dev/null +++ b/static/usage/v7/button/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/button/theming/colors/index.md b/static/usage/v7/button/theming/colors/index.md index 88cb6539a81..4c7697f0188 100644 --- a/static/usage/v7/button/theming/colors/index.md +++ b/static/usage/v7/button/theming/colors/index.md @@ -3,6 +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/button/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/button/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..403e44caaec --- /dev/null +++ b/static/usage/v7/button/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/button/theming/css-properties/index.md b/static/usage/v7/button/theming/css-properties/index.md index 32f67b6f002..d2c079e37c1 100644 --- a/static/usage/v7/button/theming/css-properties/index.md +++ b/static/usage/v7/button/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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 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/buttons/placement/angular.md b/static/usage/v7/buttons/placement/angular/example_component_html.md similarity index 100% rename from static/usage/v7/buttons/placement/angular.md rename to static/usage/v7/buttons/placement/angular/example_component_html.md diff --git a/static/usage/v7/buttons/placement/angular/example_component_ts.md b/static/usage/v7/buttons/placement/angular/example_component_ts.md new file mode 100644 index 00000000000..dd7b99299de --- /dev/null +++ b/static/usage/v7/buttons/placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/buttons/placement/index.md b/static/usage/v7/buttons/placement/index.md index 9d2fd3dcfec..38e38bc2562 100644 --- a/static/usage/v7/buttons/placement/index.md +++ b/static/usage/v7/buttons/placement/index.md @@ -3,6 +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/buttons/types/angular/example_component_ts.md b/static/usage/v7/buttons/types/angular/example_component_ts.md index 7af150bd169..94e3d6ef6fa 100644 --- a/static/usage/v7/buttons/types/angular/example_component_ts.md +++ b/static/usage/v7/buttons/types/angular/example_component_ts.md @@ -1,5 +1,14 @@ ```ts import { Component } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonIcon, + IonMenuButton, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons'; @@ -8,6 +17,7 @@ import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/card/basic/angular.md b/static/usage/v7/card/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/card/basic/angular.md rename to static/usage/v7/card/basic/angular/example_component_html.md diff --git a/static/usage/v7/card/basic/angular/example_component_ts.md b/static/usage/v7/card/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..d35351dd783 --- /dev/null +++ b/static/usage/v7/card/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/card/basic/index.md b/static/usage/v7/card/basic/index.md index 6c090f394bb..acb83e49696 100644 --- a/static/usage/v7/card/basic/index.md +++ b/static/usage/v7/card/basic/index.md @@ -3,6 +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/card/buttons/angular.md b/static/usage/v7/card/buttons/angular/example_component_html.md similarity index 100% rename from static/usage/v7/card/buttons/angular.md rename to static/usage/v7/card/buttons/angular/example_component_html.md diff --git a/static/usage/v7/card/buttons/angular/example_component_ts.md b/static/usage/v7/card/buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..74ee512cb4f --- /dev/null +++ b/static/usage/v7/card/buttons/angular/example_component_ts.md @@ -0,0 +1,19 @@ +```ts +import { Component } from '@angular/core'; +import { + IonButton, + IonCard, + IonCardContent, + IonCardHeader, + IonCardSubtitle, + IonCardTitle, +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/card/buttons/index.md b/static/usage/v7/card/buttons/index.md index c19055f3a7f..2d837481dbe 100644 --- a/static/usage/v7/card/buttons/index.md +++ b/static/usage/v7/card/buttons/index.md @@ -3,6 +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/card/list/angular/example_component_ts.md b/static/usage/v7/card/list/angular/example_component_ts.md new file mode 100644 index 00000000000..204d500d316 --- /dev/null +++ b/static/usage/v7/card/list/angular/example_component_ts.md @@ -0,0 +1,32 @@ +```ts +import { Component } from '@angular/core'; +import { + IonCard, + IonCardContent, + IonCardHeader, + IonCardSubtitle, + IonCardTitle, + IonItem, + IonLabel, + IonList, + IonThumbnail, +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonCard, + IonCardContent, + IonCardHeader, + IonCardSubtitle, + IonCardTitle, + IonItem, + IonLabel, + IonList, + IonThumbnail, + ], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/card/list/index.md b/static/usage/v7/card/list/index.md index 3cc353476b8..6acc2c4d2a8 100644 --- a/static/usage/v7/card/list/index.md +++ b/static/usage/v7/card/list/index.md @@ -9,6 +9,7 @@ import vue from './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 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/card/theming/colors/angular.md b/static/usage/v7/card/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v7/card/theming/colors/angular.md rename to static/usage/v7/card/theming/colors/angular/example_component_html.md diff --git a/static/usage/v7/card/theming/colors/angular/example_component_ts.md b/static/usage/v7/card/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..d35351dd783 --- /dev/null +++ b/static/usage/v7/card/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/card/theming/colors/index.md b/static/usage/v7/card/theming/colors/index.md index 30ce310e99c..69f6a1a5d01 100644 --- a/static/usage/v7/card/theming/colors/index.md +++ b/static/usage/v7/card/theming/colors/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/card/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/card/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..d35351dd783 --- /dev/null +++ b/static/usage/v7/card/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/card/theming/css-properties/index.md b/static/usage/v7/card/theming/css-properties/index.md index cc473c03d32..2770079f8b3 100644 --- a/static/usage/v7/card/theming/css-properties/index.md +++ b/static/usage/v7/card/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; diff --git a/static/usage/v7/checkbox/basic/angular.md b/static/usage/v7/checkbox/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/checkbox/basic/angular.md rename to static/usage/v7/checkbox/basic/angular/example_component_html.md diff --git a/static/usage/v7/checkbox/basic/angular/example_component_ts.md b/static/usage/v7/checkbox/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..0d67119a86b --- /dev/null +++ b/static/usage/v7/checkbox/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/checkbox/basic/index.md b/static/usage/v7/checkbox/basic/index.md index e238ae9c63f..ec6feae0a22 100644 --- a/static/usage/v7/checkbox/basic/index.md +++ b/static/usage/v7/checkbox/basic/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/checkbox/indeterminate/angular.md b/static/usage/v7/checkbox/indeterminate/angular/example_component_html.md similarity index 100% rename from static/usage/v7/checkbox/indeterminate/angular.md rename to static/usage/v7/checkbox/indeterminate/angular/example_component_html.md diff --git a/static/usage/v7/checkbox/indeterminate/angular/example_component_ts.md b/static/usage/v7/checkbox/indeterminate/angular/example_component_ts.md new file mode 100644 index 00000000000..0d67119a86b --- /dev/null +++ b/static/usage/v7/checkbox/indeterminate/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/checkbox/indeterminate/index.md b/static/usage/v7/checkbox/indeterminate/index.md index bcc02a761e7..d28dabb4d30 100644 --- a/static/usage/v7/checkbox/indeterminate/index.md +++ b/static/usage/v7/checkbox/indeterminate/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/checkbox/justify/angular.md b/static/usage/v7/checkbox/justify/angular/example_component_html.md similarity index 100% rename from static/usage/v7/checkbox/justify/angular.md rename to static/usage/v7/checkbox/justify/angular/example_component_html.md diff --git a/static/usage/v7/checkbox/justify/angular/example_component_ts.md b/static/usage/v7/checkbox/justify/angular/example_component_ts.md new file mode 100644 index 00000000000..b6b56f82f51 --- /dev/null +++ b/static/usage/v7/checkbox/justify/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox, IonItem, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/checkbox/justify/index.md b/static/usage/v7/checkbox/justify/index.md index 1128d74a9f6..c27af62666b 100644 --- a/static/usage/v7/checkbox/justify/index.md +++ b/static/usage/v7/checkbox/justify/index.md @@ -3,6 +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/checkbox/label-link/angular.md b/static/usage/v7/checkbox/label-link/angular/example_component_html.md similarity index 100% rename from static/usage/v7/checkbox/label-link/angular.md rename to static/usage/v7/checkbox/label-link/angular/example_component_html.md diff --git a/static/usage/v7/checkbox/label-link/angular/example_component_ts.md b/static/usage/v7/checkbox/label-link/angular/example_component_ts.md new file mode 100644 index 00000000000..0d67119a86b --- /dev/null +++ b/static/usage/v7/checkbox/label-link/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/checkbox/label-link/index.md b/static/usage/v7/checkbox/label-link/index.md index 1e34eef6990..3c7ff7673dd 100644 --- a/static/usage/v7/checkbox/label-link/index.md +++ b/static/usage/v7/checkbox/label-link/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/checkbox/label-placement/angular.md b/static/usage/v7/checkbox/label-placement/angular/example_component_html.md similarity index 100% rename from static/usage/v7/checkbox/label-placement/angular.md rename to static/usage/v7/checkbox/label-placement/angular/example_component_html.md diff --git a/static/usage/v7/checkbox/label-placement/angular/example_component_ts.md b/static/usage/v7/checkbox/label-placement/angular/example_component_ts.md new file mode 100644 index 00000000000..0d67119a86b --- /dev/null +++ b/static/usage/v7/checkbox/label-placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/checkbox/label-placement/index.md b/static/usage/v7/checkbox/label-placement/index.md index 2534249529a..96474facc29 100644 --- a/static/usage/v7/checkbox/label-placement/index.md +++ b/static/usage/v7/checkbox/label-placement/index.md @@ -3,6 +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/checkbox/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..0d67119a86b --- /dev/null +++ b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/checkbox/theming/css-properties/index.md b/static/usage/v7/checkbox/theming/css-properties/index.md index 51d619f8ccf..d6ae616fd9c 100644 --- a/static/usage/v7/checkbox/theming/css-properties/index.md +++ b/static/usage/v7/checkbox/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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 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/chip/slots/angular/example_component_ts.md b/static/usage/v7/chip/slots/angular/example_component_ts.md index 6b388ef38d9..5edb3cd8867 100644 --- a/static/usage/v7/chip/slots/angular/example_component_ts.md +++ b/static/usage/v7/chip/slots/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonAvatar, IonChip, IonIcon, IonLabel } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { close, closeCircle, pin } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { close, closeCircle, pin } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonAvatar, IonChip, IonIcon, IonLabel], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/chip/theming/colors/angular.md b/static/usage/v7/chip/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v7/chip/theming/colors/angular.md rename to static/usage/v7/chip/theming/colors/angular/example_component_html.md diff --git a/static/usage/v7/chip/theming/colors/angular/example_component_ts.md b/static/usage/v7/chip/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..0cfbf3e1a78 --- /dev/null +++ b/static/usage/v7/chip/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonChip } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonChip], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/chip/theming/colors/index.md b/static/usage/v7/chip/theming/colors/index.md index 08aba14caca..1fef347970a 100644 --- a/static/usage/v7/chip/theming/colors/index.md +++ b/static/usage/v7/chip/theming/colors/index.md @@ -3,6 +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/chip/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/chip/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..0cfbf3e1a78 --- /dev/null +++ b/static/usage/v7/chip/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonChip } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonChip], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/chip/theming/css-properties/index.md b/static/usage/v7/chip/theming/css-properties/index.md index 2ce8f542f9c..29019aac707 100644 --- a/static/usage/v7/chip/theming/css-properties/index.md +++ b/static/usage/v7/chip/theming/css-properties/index.md @@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md'; import vue from './vue.md'; -import angular_example_component_css from './angular/example_component_css.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'; -

Scroll the content and notice that the fixed button does not scroll.

- - Normal Button - Fixed Button - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in - risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, - sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. - Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit - ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec - placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus - placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et - neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut - nulla sit amet erat malesuada euismod vel a nulla. -

-

- Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean - venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, - sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed - lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit - faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique - maximus. -

-

- Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo - tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et - elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus - justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, - ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. - Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae - turpis. -

-

- Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales - fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam - facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue - sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae - lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris - condimentum fermentum rutrum. -

-

- Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis - eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, - venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, - ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. - Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, - semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis - sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. -

- -``` diff --git a/static/usage/v7/content/fixed/angular/example_component_ts.md b/static/usage/v7/content/fixed/angular/example_component_ts.md new file mode 100644 index 00000000000..38a7b14090e --- /dev/null +++ b/static/usage/v7/content/fixed/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/content/fixed/index.md b/static/usage/v7/content/fixed/index.md index 6ff6db1f65e..e389cbcc2cd 100644 --- a/static/usage/v7/content/fixed/index.md +++ b/static/usage/v7/content/fixed/index.md @@ -9,6 +9,7 @@ import vue from './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'; -

Scroll the content and notice that the fixed button does not scroll.

- - Normal Button - Fixed Button - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum - in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, - sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed - neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula - blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula - justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. - Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque - mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl - dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. -

-

- Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean - venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, - sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula - sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc - et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis - tristique maximus. -

-

- Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo - tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum - et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue - faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis - venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean - sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id - molestie sed, pretium vitae turpis. -

-

- Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et - sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit - amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. - Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum - vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus - at. Mauris condimentum fermentum rutrum. -

-

- Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce - mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim - enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo - orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero - cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed - vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, - egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. -

- - ); -} -export default Example; -``` diff --git a/static/usage/v7/content/fullscreen/angular/example_component_ts.md b/static/usage/v7/content/fullscreen/angular/example_component_ts.md new file mode 100644 index 00000000000..5180063af58 --- /dev/null +++ b/static/usage/v7/content/fullscreen/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonFooter, IonHeader, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/content/fullscreen/index.md b/static/usage/v7/content/fullscreen/index.md index cc20ddf5070..20d142fbd0d 100644 --- a/static/usage/v7/content/fullscreen/index.md +++ b/static/usage/v7/content/fullscreen/index.md @@ -9,6 +9,7 @@ import vue from './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'; diff --git a/static/usage/v7/datetime-button/format-options/angular.md b/static/usage/v7/datetime-button/format-options/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime-button/format-options/angular.md rename to static/usage/v7/datetime-button/format-options/angular/example_component_html.md diff --git a/static/usage/v7/datetime-button/format-options/angular/example_component_ts.md b/static/usage/v7/datetime-button/format-options/angular/example_component_ts.md new file mode 100644 index 00000000000..777f7fe66a7 --- /dev/null +++ b/static/usage/v7/datetime-button/format-options/angular/example_component_ts.md @@ -0,0 +1,16 @@ +```ts +import { Component, NO_ERRORS_SCHEMA } from '@angular/core'; +import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime, IonDatetimeButton, IonModal], + // 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-button/format-options/index.md b/static/usage/v7/datetime-button/format-options/index.md index 482629caa38..28df6cbc5ee 100644 --- a/static/usage/v7/datetime-button/format-options/index.md +++ b/static/usage/v7/datetime-button/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/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/v7/fab/basic/angular/example_component_ts.md b/static/usage/v7/fab/basic/angular/example_component_ts.md index f881c10c61c..29c5aeb3007 100644 --- a/static/usage/v7/fab/basic/angular/example_component_ts.md +++ b/static/usage/v7/fab/basic/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { add } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { add } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/fab/button-sizing/angular/example_component_ts.md b/static/usage/v7/fab/button-sizing/angular/example_component_ts.md index 403209255c4..d852445f1db 100644 --- a/static/usage/v7/fab/button-sizing/angular/example_component_ts.md +++ b/static/usage/v7/fab/button-sizing/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { add, colorPalette, document, globe } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { add, colorPalette, document, globe } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonFabList, IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/fab/list-side/angular/example_component_ts.md b/static/usage/v7/fab/list-side/angular/example_component_ts.md index bc62ad83c78..7a2109d0c2c 100644 --- a/static/usage/v7/fab/list-side/angular/example_component_ts.md +++ b/static/usage/v7/fab/list-side/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionico selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonFabList, IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/fab/positioning/angular/example_component_ts.md b/static/usage/v7/fab/positioning/angular/example_component_ts.md index 4fed5b64b8a..11dac9f8e38 100644 --- a/static/usage/v7/fab/positioning/angular/example_component_ts.md +++ b/static/usage/v7/fab/positioning/angular/example_component_ts.md @@ -1,5 +1,15 @@ ```ts import { Component } from '@angular/core'; +import { + IonContent, + IonFab, + IonFabButton, + IonFabList, + IonHeader, + IonIcon, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { @@ -15,6 +25,7 @@ import { selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonContent, IonFab, IonFabButton, IonFabList, IonHeader, IonIcon, IonTitle, IonToolbar], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/fab/safe-area/angular/example_component_ts.md b/static/usage/v7/fab/safe-area/angular/example_component_ts.md index f881c10c61c..29c5aeb3007 100644 --- a/static/usage/v7/fab/safe-area/angular/example_component_ts.md +++ b/static/usage/v7/fab/safe-area/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { add } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { add } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/fab/theming/colors/angular/example_component_ts.md b/static/usage/v7/fab/theming/colors/angular/example_component_ts.md index bc62ad83c78..7a2109d0c2c 100644 --- a/static/usage/v7/fab/theming/colors/angular/example_component_ts.md +++ b/static/usage/v7/fab/theming/colors/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionico selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonFabList, IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_ts.md b/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_ts.md index 403209255c4..d852445f1db 100644 --- a/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_ts.md +++ b/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { add, colorPalette, document, globe } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { add, colorPalette, document, globe } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonFabList, IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_ts.md index 403209255c4..d852445f1db 100644 --- a/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_ts.md +++ b/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { add, colorPalette, document, globe } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { add, colorPalette, document, globe } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonFabList, IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/footer/basic/angular.md b/static/usage/v7/footer/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/footer/basic/angular.md rename to static/usage/v7/footer/basic/angular/example_component_html.md diff --git a/static/usage/v7/footer/basic/angular/example_component_ts.md b/static/usage/v7/footer/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..bcdf570e97b --- /dev/null +++ b/static/usage/v7/footer/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonFooter, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/footer/basic/index.md b/static/usage/v7/footer/basic/index.md index d9abf47d787..c63e64ffa3a 100644 --- a/static/usage/v7/footer/basic/index.md +++ b/static/usage/v7/footer/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'; ; - @ViewChild('debug', { read: ElementRef }) debug: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; + @ViewChild('debug', { read: ElementRef }) debug!: ElementRef; isCardActive = false; diff --git a/static/usage/v7/gestures/double-click/angular/example_component_ts.md b/static/usage/v7/gestures/double-click/angular/example_component_ts.md index 08159621553..8c963786c16 100644 --- a/static/usage/v7/gestures/double-click/angular/example_component_ts.md +++ b/static/usage/v7/gestures/double-click/angular/example_component_ts.md @@ -1,14 +1,15 @@ ```ts import { Component, ElementRef, ViewChild } from '@angular/core'; -import { GestureController, IonCard } from '@ionic/angular'; +import { GestureController, IonCard, IonCardContent } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['./example.component.css'], + imports: [IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild('card', { read: ElementRef }) card: ElementRef; + @ViewChild('card', { read: ElementRef }) card!: ElementRef; private currentOffset: number = 0; private lastOnStart: number = 0; diff --git a/static/usage/v7/grid/basic/angular/example_component_ts.md b/static/usage/v7/grid/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..993d724b887 --- /dev/null +++ b/static/usage/v7/grid/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCol, IonGrid, IonRow], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/grid/basic/index.md b/static/usage/v7/grid/basic/index.md index 6945d9ba91b..69b6f42c8ed 100644 --- a/static/usage/v7/grid/basic/index.md +++ b/static/usage/v7/grid/basic/index.md @@ -9,6 +9,7 @@ import vue from './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 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/infinite-scroll/basic/angular/example_component_html.md b/static/usage/v7/infinite-scroll/basic/angular/example_component_html.md index 55469ab3c5a..962be4924aa 100644 --- a/static/usage/v7/infinite-scroll/basic/angular/example_component_html.md +++ b/static/usage/v7/infinite-scroll/basic/angular/example_component_html.md @@ -1,12 +1,14 @@ ```html - + @for (item of items; track item; let index = $index) { + avatar {{ item }} + } diff --git a/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md index 390ba6b75f1..7c35aba2138 100644 --- a/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md +++ b/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md @@ -1,15 +1,24 @@ ```tsx import { Component, OnInit } from '@angular/core'; - -import { InfiniteScrollCustomEvent } from '@ionic/angular'; +import { + InfiniteScrollCustomEvent, + IonAvatar, + IonContent, + IonInfiniteScroll, + IonInfiniteScrollContent, + IonItem, + IonLabel, + IonList, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - styleUrls: ['example.component.scss'], + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList], }) export class ExampleComponent implements OnInit { - items = []; + items: string[] = []; ngOnInit() { this.generateItems(); @@ -22,10 +31,10 @@ export class ExampleComponent implements OnInit { } } - onIonInfinite(ev) { + onIonInfinite(ev: InfiniteScrollCustomEvent) { this.generateItems(); setTimeout(() => { - (ev as InfiniteScrollCustomEvent).target.complete(); + ev.target.complete(); }, 500); } } diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md index 60c02b86ea0..fb41f8761c7 100644 --- a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md +++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md @@ -1,12 +1,14 @@ ```html - + @for (item of items; track item; let index = $index) { + avatar {{ item }} + }
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md index 415ed5dba8b..e7a9c133f12 100644 --- a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md +++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md @@ -1,15 +1,15 @@ ```tsx import { Component, OnInit } from '@angular/core'; - -import { InfiniteScrollCustomEvent } from '@ionic/angular'; +import { IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - styleUrls: ['example.component.scss'], + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList], }) export class ExampleComponent implements OnInit { - items = []; + items: string[] = []; ngOnInit() { for (let i = 1; i < 51; i++) { diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md index 2e23e359257..d73da989437 100644 --- a/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md +++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md @@ -1,12 +1,14 @@ ```html - + @for (item of items; track item; let index = $index) { + avatar {{ item }} + } diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md index 415ed5dba8b..e670c8c3220 100644 --- a/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md +++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md @@ -1,15 +1,23 @@ ```tsx import { Component, OnInit } from '@angular/core'; - -import { InfiniteScrollCustomEvent } from '@ionic/angular'; +import { + IonAvatar, + IonContent, + IonInfiniteScroll, + IonInfiniteScrollContent, + IonItem, + IonLabel, + IonList, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - styleUrls: ['example.component.scss'], + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList], }) export class ExampleComponent implements OnInit { - items = []; + items: string[] = []; ngOnInit() { for (let i = 1; i < 51; i++) { diff --git a/static/usage/v7/input/basic/angular.md b/static/usage/v7/input/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/input/basic/angular.md rename to static/usage/v7/input/basic/angular/example_component_html.md diff --git a/static/usage/v7/input/basic/angular/example_component_ts.md b/static/usage/v7/input/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..fbf2fdf258f --- /dev/null +++ b/static/usage/v7/input/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/input/basic/index.md b/static/usage/v7/input/basic/index.md index ed54a843667..bd7cb7c7a40 100644 --- a/static/usage/v7/input/basic/index.md +++ b/static/usage/v7/input/basic/index.md @@ -3,6 +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/input/clear/angular.md b/static/usage/v7/input/clear/angular/example_component_html.md similarity index 100% rename from static/usage/v7/input/clear/angular.md rename to static/usage/v7/input/clear/angular/example_component_html.md diff --git a/static/usage/v7/input/clear/angular/example_component_ts.md b/static/usage/v7/input/clear/angular/example_component_ts.md new file mode 100644 index 00000000000..fbf2fdf258f --- /dev/null +++ b/static/usage/v7/input/clear/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/input/clear/index.md b/static/usage/v7/input/clear/index.md index eecea0ba6cf..66943660549 100644 --- a/static/usage/v7/input/clear/index.md +++ b/static/usage/v7/input/clear/index.md @@ -3,6 +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/input/counter-alignment/angular.md b/static/usage/v7/input/counter-alignment/angular/example_component_html.md similarity index 100% rename from static/usage/v7/input/counter-alignment/angular.md rename to static/usage/v7/input/counter-alignment/angular/example_component_html.md diff --git a/static/usage/v7/input/counter-alignment/angular/example_component_ts.md b/static/usage/v7/input/counter-alignment/angular/example_component_ts.md new file mode 100644 index 00000000000..fbf2fdf258f --- /dev/null +++ b/static/usage/v7/input/counter-alignment/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/input/counter-alignment/index.md b/static/usage/v7/input/counter-alignment/index.md index c590c8a24c8..f6e28f7b897 100644 --- a/static/usage/v7/input/counter-alignment/index.md +++ b/static/usage/v7/input/counter-alignment/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/input/counter/angular/example_component_ts.md b/static/usage/v7/input/counter/angular/example_component_ts.md index 2c08dc06fc2..2392e6cd2d9 100644 --- a/static/usage/v7/input/counter/angular/example_component_ts.md +++ b/static/usage/v7/input/counter/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonInput } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput], }) export class ExampleComponent { customCounterFormatter(inputLength: number, maxLength: number) { diff --git a/static/usage/v7/input/fill/angular.md b/static/usage/v7/input/fill/angular/example_component_html.md similarity index 100% rename from static/usage/v7/input/fill/angular.md rename to static/usage/v7/input/fill/angular/example_component_html.md diff --git a/static/usage/v7/input/fill/angular/example_component_ts.md b/static/usage/v7/input/fill/angular/example_component_ts.md new file mode 100644 index 00000000000..9dc150bb9c8 --- /dev/null +++ b/static/usage/v7/input/fill/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/input/fill/index.md b/static/usage/v7/input/fill/index.md index 7a702b37d08..044fa65dcaa 100644 --- a/static/usage/v7/input/fill/index.md +++ b/static/usage/v7/input/fill/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/input/label-slot/angular.md b/static/usage/v7/input/label-slot/angular/example_component_html.md similarity index 100% rename from static/usage/v7/input/label-slot/angular.md rename to static/usage/v7/input/label-slot/angular/example_component_html.md diff --git a/static/usage/v7/input/label-slot/angular/example_component_ts.md b/static/usage/v7/input/label-slot/angular/example_component_ts.md new file mode 100644 index 00000000000..39bae8be846 --- /dev/null +++ b/static/usage/v7/input/label-slot/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList, IonText } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList, IonText], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/input/label-slot/index.md b/static/usage/v7/input/label-slot/index.md index 5161508076b..74fa89cb4fd 100644 --- a/static/usage/v7/input/label-slot/index.md +++ b/static/usage/v7/input/label-slot/index.md @@ -3,6 +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/input/mask/angular/app_module_ts.md b/static/usage/v7/input/mask/angular/app_module_ts.md deleted file mode 100644 index 7eb78206d7f..00000000000 --- a/static/usage/v7/input/mask/angular/app_module_ts.md +++ /dev/null @@ -1,19 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; - -import { IonicModule } from '@ionic/angular'; - -import { AppComponent } from './app.component'; -import { ExampleComponent } from './example.component'; - -import { MaskitoDirective } from '@maskito/angular'; - -@NgModule({ - imports: [BrowserModule, FormsModule, MaskitoDirective, IonicModule.forRoot({})], - declarations: [AppComponent, ExampleComponent], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` diff --git a/static/usage/v7/input/mask/angular/example_component_ts.md b/static/usage/v7/input/mask/angular/example_component_ts.md index c7f0c898017..a118f6faa72 100644 --- a/static/usage/v7/input/mask/angular/example_component_ts.md +++ b/static/usage/v7/input/mask/angular/example_component_ts.md @@ -1,11 +1,16 @@ ```ts import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular/standalone'; +import { FormsModule } from '@angular/forms'; import { MaskitoOptions, MaskitoElementPredicate, maskitoTransform } from '@maskito/core'; +import { MaskitoDirective } from '@maskito/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [FormsModule, IonInput, IonItem, IonList, MaskitoDirective], }) export class ExampleComponent { readonly phoneMask: MaskitoOptions = { diff --git a/static/usage/v7/input/mask/index.md b/static/usage/v7/input/mask/index.md index 68e8194ca75..30609f6f167 100644 --- a/static/usage/v7/input/mask/index.md +++ b/static/usage/v7/input/mask/index.md @@ -7,7 +7,6 @@ import react_main_tsx from './react.md'; import vue_example_vue from './vue.md'; -import angular_app_module_ts from './angular/app_module_ts.md'; import angular_example_component_html from './angular/example_component_html.md'; import angular_example_component_ts from './angular/example_component_ts.md'; @@ -43,7 +42,6 @@ import angular_example_component_ts from './angular/example_component_ts.md'; }, angular: { files: { - 'src/app/app.module.ts': angular_app_module_ts, 'src/app/example.component.html': angular_example_component_html, 'src/app/example.component.ts': angular_example_component_ts, }, diff --git a/static/usage/v7/input/no-visible-label/angular.md b/static/usage/v7/input/no-visible-label/angular/example_component_html.md similarity index 100% rename from static/usage/v7/input/no-visible-label/angular.md rename to static/usage/v7/input/no-visible-label/angular/example_component_html.md diff --git a/static/usage/v7/input/no-visible-label/angular/example_component_ts.md b/static/usage/v7/input/no-visible-label/angular/example_component_ts.md new file mode 100644 index 00000000000..fbf2fdf258f --- /dev/null +++ b/static/usage/v7/input/no-visible-label/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/input/no-visible-label/index.md b/static/usage/v7/input/no-visible-label/index.md index 715c46e475f..930cb9b4629 100644 --- a/static/usage/v7/input/no-visible-label/index.md +++ b/static/usage/v7/input/no-visible-label/index.md @@ -3,6 +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/input/set-focus/angular.md b/static/usage/v7/input/set-focus/angular/example_component_html.md similarity index 100% rename from static/usage/v7/input/set-focus/angular.md rename to static/usage/v7/input/set-focus/angular/example_component_html.md diff --git a/static/usage/v7/input/set-focus/angular/example_component_ts.md b/static/usage/v7/input/set-focus/angular/example_component_ts.md new file mode 100644 index 00000000000..f950296880e --- /dev/null +++ b/static/usage/v7/input/set-focus/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonInput, IonItem, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/input/set-focus/index.md b/static/usage/v7/input/set-focus/index.md index 4728673f041..6d06e405f1d 100644 --- a/static/usage/v7/input/set-focus/index.md +++ b/static/usage/v7/input/set-focus/index.md @@ -1,7 +1,9 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.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'; import vue from './vue.md'; import react from './react.md'; @@ -9,9 +11,14 @@ import react from './react.md'; version="7" code={{ javascript, - vue, - angular, react, + vue, + angular: { + files: { + 'src/app/example.component.html': angular_example_component_html, + 'src/app/example.component.ts': angular_example_component_ts, + }, + }, }} src="usage/v7/input/set-focus/demo.html" /> diff --git a/static/usage/v7/input/start-end-slots/angular/example_component_ts.md b/static/usage/v7/input/start-end-slots/angular/example_component_ts.md index 899f7a826a3..2a339335955 100644 --- a/static/usage/v7/input/start-end-slots/angular/example_component_ts.md +++ b/static/usage/v7/input/start-end-slots/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonIcon, IonInput, IonItem, IonList } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { eye, lockClosed } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { eye, lockClosed } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon, IonInput, IonItem, IonList], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/input/theming/colors/angular.md b/static/usage/v7/input/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v7/input/theming/colors/angular.md rename to static/usage/v7/input/theming/colors/angular/example_component_html.md diff --git a/static/usage/v7/input/theming/colors/angular/example_component_ts.md b/static/usage/v7/input/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..9dc150bb9c8 --- /dev/null +++ b/static/usage/v7/input/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/input/theming/colors/index.md b/static/usage/v7/input/theming/colors/index.md index 17c29f994c3..84623a174b7 100644 --- a/static/usage/v7/input/theming/colors/index.md +++ b/static/usage/v7/input/theming/colors/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/input/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/input/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..9dc150bb9c8 --- /dev/null +++ b/static/usage/v7/input/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/input/theming/css-properties/index.md b/static/usage/v7/input/theming/css-properties/index.md index b87bfe5194c..5861fbac21f 100644 --- a/static/usage/v7/input/theming/css-properties/index.md +++ b/static/usage/v7/input/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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 angular_global_css from './angular/global_css.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/item-divider/basic/angular.md b/static/usage/v7/item-divider/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/item-divider/basic/angular.md rename to static/usage/v7/item-divider/basic/angular/example_component_html.md diff --git a/static/usage/v7/item-divider/basic/angular/example_component_ts.md b/static/usage/v7/item-divider/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..1d2ea0f0dbf --- /dev/null +++ b/static/usage/v7/item-divider/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/item-divider/basic/index.md b/static/usage/v7/item-divider/basic/index.md index 9c8a9e292be..1415cd6805e 100644 --- a/static/usage/v7/item-divider/basic/index.md +++ b/static/usage/v7/item-divider/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/item-divider/theming/colors/angular.md b/static/usage/v7/item-divider/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v7/item-divider/theming/colors/angular.md rename to static/usage/v7/item-divider/theming/colors/angular/example_component_html.md diff --git a/static/usage/v7/item-divider/theming/colors/angular/example_component_ts.md b/static/usage/v7/item-divider/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..11c0c268eb1 --- /dev/null +++ b/static/usage/v7/item-divider/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItemDivider, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItemDivider, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/item-divider/theming/colors/index.md b/static/usage/v7/item-divider/theming/colors/index.md index a728b84c5db..0e3629f0d4e 100644 --- a/static/usage/v7/item-divider/theming/colors/index.md +++ b/static/usage/v7/item-divider/theming/colors/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/item-divider/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/item-divider/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..11c0c268eb1 --- /dev/null +++ b/static/usage/v7/item-divider/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItemDivider, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItemDivider, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/item-divider/theming/css-properties/index.md b/static/usage/v7/item-divider/theming/css-properties/index.md index f425706d75d..7ee7eda8a5b 100644 --- a/static/usage/v7/item-divider/theming/css-properties/index.md +++ b/static/usage/v7/item-divider/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; diff --git a/static/usage/v7/item-group/sliding-items/angular.md b/static/usage/v7/item-group/sliding-items/angular/example_component_html.md similarity index 100% rename from static/usage/v7/item-group/sliding-items/angular.md rename to static/usage/v7/item-group/sliding-items/angular/example_component_html.md diff --git a/static/usage/v7/item-group/sliding-items/angular/example_component_ts.md b/static/usage/v7/item-group/sliding-items/angular/example_component_ts.md new file mode 100644 index 00000000000..5c823eabc6f --- /dev/null +++ b/static/usage/v7/item-group/sliding-items/angular/example_component_ts.md @@ -0,0 +1,20 @@ +```ts +import { Component } from '@angular/core'; +import { + IonItem, + IonItemDivider, + IonItemGroup, + IonItemOption, + IonItemOptions, + IonItemSliding, + IonLabel, +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/item-group/sliding-items/index.md b/static/usage/v7/item-group/sliding-items/index.md index 39983e2a9bc..1c23e3b9e2a 100644 --- a/static/usage/v7/item-group/sliding-items/index.md +++ b/static/usage/v7/item-group/sliding-items/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/item-sliding/basic/angular.md b/static/usage/v7/item-sliding/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/item-sliding/basic/angular.md rename to static/usage/v7/item-sliding/basic/angular/example_component_html.md diff --git a/static/usage/v7/item-sliding/basic/angular/example_component_ts.md b/static/usage/v7/item-sliding/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..e06ea993f98 --- /dev/null +++ b/static/usage/v7/item-sliding/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/item-sliding/basic/index.md b/static/usage/v7/item-sliding/basic/index.md index a75eff57b64..5f2438a5d28 100644 --- a/static/usage/v7/item-sliding/basic/index.md +++ b/static/usage/v7/item-sliding/basic/index.md @@ -3,6 +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/item-sliding/expandable/angular.md b/static/usage/v7/item-sliding/expandable/angular/example_component_html.md similarity index 100% rename from static/usage/v7/item-sliding/expandable/angular.md rename to static/usage/v7/item-sliding/expandable/angular/example_component_html.md diff --git a/static/usage/v7/item-sliding/expandable/angular/example_component_ts.md b/static/usage/v7/item-sliding/expandable/angular/example_component_ts.md new file mode 100644 index 00000000000..e06ea993f98 --- /dev/null +++ b/static/usage/v7/item-sliding/expandable/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/item-sliding/expandable/index.md b/static/usage/v7/item-sliding/expandable/index.md index f794264ce0f..3920ea07be7 100644 --- a/static/usage/v7/item-sliding/expandable/index.md +++ b/static/usage/v7/item-sliding/expandable/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/item-sliding/icons/angular/example_component_ts.md b/static/usage/v7/item-sliding/icons/angular/example_component_ts.md index 5f32e92459b..a3169b92266 100644 --- a/static/usage/v7/item-sliding/icons/angular/example_component_ts.md +++ b/static/usage/v7/item-sliding/icons/angular/example_component_ts.md @@ -1,5 +1,14 @@ ```ts import { Component } from '@angular/core'; +import { + IonIcon, + IonItem, + IonItemOption, + IonItemOptions, + IonItemSliding, + IonLabel, + IonList, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { archive, heart, trash } from 'ionicons/icons'; @@ -8,6 +17,7 @@ import { archive, heart, trash } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/item/basic/angular.md b/static/usage/v7/item/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/item/basic/angular.md rename to static/usage/v7/item/basic/angular/example_component_html.md diff --git a/static/usage/v7/item/basic/angular/example_component_ts.md b/static/usage/v7/item/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..f3dbc764613 --- /dev/null +++ b/static/usage/v7/item/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/item/basic/index.md b/static/usage/v7/item/basic/index.md index f5c330d7b40..095abe32ac0 100644 --- a/static/usage/v7/item/basic/index.md +++ b/static/usage/v7/item/basic/index.md @@ -3,6 +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/item/buttons/angular/example_component_ts.md b/static/usage/v7/item/buttons/angular/example_component_ts.md index 5f8f10b788e..6d056d6d719 100644 --- a/static/usage/v7/item/buttons/angular/example_component_ts.md +++ b/static/usage/v7/item/buttons/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { home, navigate, star } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { home, navigate, star } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon, IonItem, IonLabel], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/item/clickable/angular.md b/static/usage/v7/item/clickable/angular/example_component_html.md similarity index 100% rename from static/usage/v7/item/clickable/angular.md rename to static/usage/v7/item/clickable/angular/example_component_html.md diff --git a/static/usage/v7/item/clickable/angular/example_component_ts.md b/static/usage/v7/item/clickable/angular/example_component_ts.md new file mode 100644 index 00000000000..f3dbc764613 --- /dev/null +++ b/static/usage/v7/item/clickable/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/item/clickable/index.md b/static/usage/v7/item/clickable/index.md index 11fe249d0c5..16fb2015997 100644 --- a/static/usage/v7/item/clickable/index.md +++ b/static/usage/v7/item/clickable/index.md @@ -3,6 +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/item/content-types/actions/angular/example_component_ts.md b/static/usage/v7/item/content-types/actions/angular/example_component_ts.md index 019d31f99f1..5944353da35 100644 --- a/static/usage/v7/item/content-types/actions/angular/example_component_ts.md +++ b/static/usage/v7/item/content-types/actions/angular/example_component_ts.md @@ -1,5 +1,19 @@ ```ts import { Component } from '@angular/core'; +import { + IonAvatar, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonItemOption, + IonItemOptions, + IonItemSliding, + IonLabel, + IonList, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { pin, share, trash } from 'ionicons/icons'; @@ -8,6 +22,20 @@ import { pin, share, trash } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [ + IonAvatar, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonItemOption, + IonItemOptions, + IonItemSliding, + IonLabel, + IonList, + IonTitle, + IonToolbar, + ], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/item/content-types/controls/angular.md b/static/usage/v7/item/content-types/controls/angular/example_component_html.md similarity index 100% rename from static/usage/v7/item/content-types/controls/angular.md rename to static/usage/v7/item/content-types/controls/angular/example_component_html.md diff --git a/static/usage/v7/item/content-types/controls/angular/example_component_ts.md b/static/usage/v7/item/content-types/controls/angular/example_component_ts.md new file mode 100644 index 00000000000..18cbb2e5926 --- /dev/null +++ b/static/usage/v7/item/content-types/controls/angular/example_component_ts.md @@ -0,0 +1,21 @@ +```ts +import { Component } from '@angular/core'; +import { + IonCheckbox, + IonContent, + IonHeader, + IonInput, + IonItem, + IonList, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox, IonContent, IonHeader, IonInput, IonItem, IonList, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/item/content-types/controls/index.md b/static/usage/v7/item/content-types/controls/index.md index 8c878934a01..22248a9414d 100644 --- a/static/usage/v7/item/content-types/controls/index.md +++ b/static/usage/v7/item/content-types/controls/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/item/inputs/angular.md b/static/usage/v7/item/inputs/angular/example_component_html.md similarity index 100% rename from static/usage/v7/item/inputs/angular.md rename to static/usage/v7/item/inputs/angular/example_component_html.md diff --git a/static/usage/v7/item/inputs/angular/example_component_ts.md b/static/usage/v7/item/inputs/angular/example_component_ts.md new file mode 100644 index 00000000000..e42eafb8242 --- /dev/null +++ b/static/usage/v7/item/inputs/angular/example_component_ts.md @@ -0,0 +1,20 @@ +```ts +import { Component } from '@angular/core'; +import { + IonCheckbox, + IonInput, + IonItem, + IonRange, + IonSelect, + IonSelectOption, + IonToggle, +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox, IonInput, IonItem, IonRange, IonSelect, IonSelectOption, IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/item/inputs/index.md b/static/usage/v7/item/inputs/index.md index 1925824c43f..6e81dc877a8 100644 --- a/static/usage/v7/item/inputs/index.md +++ b/static/usage/v7/item/inputs/index.md @@ -3,6 +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/item/lines/angular/example_component_ts.md b/static/usage/v7/item/lines/angular/example_component_ts.md index 3122a1f730f..06597ba96cf 100644 --- a/static/usage/v7/item/lines/angular/example_component_ts.md +++ b/static/usage/v7/item/lines/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonIcon, IonItem, IonLabel } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { informationCircle, star } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { informationCircle, star } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonIcon, IonItem, IonLabel], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/item/media/angular.md b/static/usage/v7/item/media/angular/example_component_html.md similarity index 100% rename from static/usage/v7/item/media/angular.md rename to static/usage/v7/item/media/angular/example_component_html.md diff --git a/static/usage/v7/item/media/angular/example_component_ts.md b/static/usage/v7/item/media/angular/example_component_ts.md new file mode 100644 index 00000000000..d8cb142b8f1 --- /dev/null +++ b/static/usage/v7/item/media/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAvatar, IonItem, IonLabel, IonThumbnail } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonItem, IonLabel, IonThumbnail], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/item/media/index.md b/static/usage/v7/item/media/index.md index c8c7d6e309c..a073a87227d 100644 --- a/static/usage/v7/item/media/index.md +++ b/static/usage/v7/item/media/index.md @@ -3,6 +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/item/theming/colors/angular.md b/static/usage/v7/item/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v7/item/theming/colors/angular.md rename to static/usage/v7/item/theming/colors/angular/example_component_html.md diff --git a/static/usage/v7/item/theming/colors/angular/example_component_ts.md b/static/usage/v7/item/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..f3dbc764613 --- /dev/null +++ b/static/usage/v7/item/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/item/theming/colors/index.md b/static/usage/v7/item/theming/colors/index.md index 9973f9daa33..ff8d9aa25cd 100644 --- a/static/usage/v7/item/theming/colors/index.md +++ b/static/usage/v7/item/theming/colors/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/item/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/item/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..f3dbc764613 --- /dev/null +++ b/static/usage/v7/item/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/item/theming/css-properties/index.md b/static/usage/v7/item/theming/css-properties/index.md index f3d49f6332b..bbd5334bd9e 100644 --- a/static/usage/v7/item/theming/css-properties/index.md +++ b/static/usage/v7/item/theming/css-properties/index.md @@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md'; import vue from './vue.md'; -import angular_example_component_css from './angular/example_component_css.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'; diff --git a/static/usage/v7/keyboard/inputmode/angular.md b/static/usage/v7/keyboard/inputmode/angular/example_component_html.md similarity index 100% rename from static/usage/v7/keyboard/inputmode/angular.md rename to static/usage/v7/keyboard/inputmode/angular/example_component_html.md diff --git a/static/usage/v7/keyboard/inputmode/angular/example_component_ts.md b/static/usage/v7/keyboard/inputmode/angular/example_component_ts.md new file mode 100644 index 00000000000..fbf2fdf258f --- /dev/null +++ b/static/usage/v7/keyboard/inputmode/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/keyboard/inputmode/index.md b/static/usage/v7/keyboard/inputmode/index.md index 44379c3901a..b52747c514f 100644 --- a/static/usage/v7/keyboard/inputmode/index.md +++ b/static/usage/v7/keyboard/inputmode/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/label/basic/angular.md b/static/usage/v7/label/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/label/basic/angular.md rename to static/usage/v7/label/basic/angular/example_component_html.md diff --git a/static/usage/v7/label/basic/angular/example_component_ts.md b/static/usage/v7/label/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..5a7fdcebe2b --- /dev/null +++ b/static/usage/v7/label/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/label/basic/index.md b/static/usage/v7/label/basic/index.md index b9365587f5c..fd1b9312fdc 100644 --- a/static/usage/v7/label/basic/index.md +++ b/static/usage/v7/label/basic/index.md @@ -3,6 +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/label/input/angular.md b/static/usage/v7/label/input/angular/example_component_html.md similarity index 100% rename from static/usage/v7/label/input/angular.md rename to static/usage/v7/label/input/angular/example_component_html.md diff --git a/static/usage/v7/label/input/angular/example_component_ts.md b/static/usage/v7/label/input/angular/example_component_ts.md new file mode 100644 index 00000000000..88e481153be --- /dev/null +++ b/static/usage/v7/label/input/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox, IonInput, IonItem, IonLabel, IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/label/input/index.md b/static/usage/v7/label/input/index.md index a1e95d3ab95..72d429fd52d 100644 --- a/static/usage/v7/label/input/index.md +++ b/static/usage/v7/label/input/index.md @@ -3,6 +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/label/item/angular.md b/static/usage/v7/label/item/angular/example_component_html.md similarity index 100% rename from static/usage/v7/label/item/angular.md rename to static/usage/v7/label/item/angular/example_component_html.md diff --git a/static/usage/v7/label/item/angular/example_component_ts.md b/static/usage/v7/label/item/angular/example_component_ts.md new file mode 100644 index 00000000000..f3dbc764613 --- /dev/null +++ b/static/usage/v7/label/item/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/label/item/index.md b/static/usage/v7/label/item/index.md index 2c712e82183..4cdbf406926 100644 --- a/static/usage/v7/label/item/index.md +++ b/static/usage/v7/label/item/index.md @@ -3,6 +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/label/theming/colors/angular.md b/static/usage/v7/label/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v7/label/theming/colors/angular.md rename to static/usage/v7/label/theming/colors/angular/example_component_html.md diff --git a/static/usage/v7/label/theming/colors/angular/example_component_ts.md b/static/usage/v7/label/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..5a7fdcebe2b --- /dev/null +++ b/static/usage/v7/label/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/label/theming/colors/index.md b/static/usage/v7/label/theming/colors/index.md index 45363df63a4..9abf7316101 100644 --- a/static/usage/v7/label/theming/colors/index.md +++ b/static/usage/v7/label/theming/colors/index.md @@ -3,6 +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/layout/dynamic-font-scaling/angular/example_component_ts.md b/static/usage/v7/layout/dynamic-font-scaling/angular/example_component_ts.md index 4e45ccc6674..d5a28316278 100644 --- a/static/usage/v7/layout/dynamic-font-scaling/angular/example_component_ts.md +++ b/static/usage/v7/layout/dynamic-font-scaling/angular/example_component_ts.md @@ -1,5 +1,22 @@ ```ts import { Component } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonFooter, + IonHeader, + IonIcon, + IonInput, + IonItem, + IonLabel, + IonList, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { create } from 'ionicons/icons'; @@ -8,6 +25,23 @@ import { create } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [ + IonBackButton, + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonFooter, + IonHeader, + IonIcon, + IonInput, + IonItem, + IonLabel, + IonList, + IonTitle, + IonToggle, + IonToolbar, + ], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/list-header/basic/angular.md b/static/usage/v7/list-header/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/list-header/basic/angular.md rename to static/usage/v7/list-header/basic/angular/example_component_html.md diff --git a/static/usage/v7/list-header/basic/angular/example_component_ts.md b/static/usage/v7/list-header/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..dd5f0b5005b --- /dev/null +++ b/static/usage/v7/list-header/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonListHeader], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/list-header/basic/index.md b/static/usage/v7/list-header/basic/index.md index 79b5b31a75f..771693f7356 100644 --- a/static/usage/v7/list-header/basic/index.md +++ b/static/usage/v7/list-header/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/list-header/buttons/angular.md b/static/usage/v7/list-header/buttons/angular/example_component_html.md similarity index 100% rename from static/usage/v7/list-header/buttons/angular.md rename to static/usage/v7/list-header/buttons/angular/example_component_html.md diff --git a/static/usage/v7/list-header/buttons/angular/example_component_ts.md b/static/usage/v7/list-header/buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..a608c44a22d --- /dev/null +++ b/static/usage/v7/list-header/buttons/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonItem, IonLabel, IonList, IonListHeader], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/list-header/buttons/index.md b/static/usage/v7/list-header/buttons/index.md index 5c724b1a8f5..c4668f07f00 100644 --- a/static/usage/v7/list-header/buttons/index.md +++ b/static/usage/v7/list-header/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/list-header/lines/angular.md b/static/usage/v7/list-header/lines/angular/example_component_html.md similarity index 100% rename from static/usage/v7/list-header/lines/angular.md rename to static/usage/v7/list-header/lines/angular/example_component_html.md diff --git a/static/usage/v7/list-header/lines/angular/example_component_ts.md b/static/usage/v7/list-header/lines/angular/example_component_ts.md new file mode 100644 index 00000000000..dd5f0b5005b --- /dev/null +++ b/static/usage/v7/list-header/lines/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonListHeader], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/list-header/lines/index.md b/static/usage/v7/list-header/lines/index.md index a8e84eddf7f..1ec366f7345 100644 --- a/static/usage/v7/list-header/lines/index.md +++ b/static/usage/v7/list-header/lines/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/list-header/theming/colors/angular.md b/static/usage/v7/list-header/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v7/list-header/theming/colors/angular.md rename to static/usage/v7/list-header/theming/colors/angular/example_component_html.md diff --git a/static/usage/v7/list-header/theming/colors/angular/example_component_ts.md b/static/usage/v7/list-header/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..3a455a0c901 --- /dev/null +++ b/static/usage/v7/list-header/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel, IonListHeader } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel, IonListHeader], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/list-header/theming/colors/index.md b/static/usage/v7/list-header/theming/colors/index.md index 13af9007f88..2a04d1f6ae8 100644 --- a/static/usage/v7/list-header/theming/colors/index.md +++ b/static/usage/v7/list-header/theming/colors/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/list-header/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/list-header/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..3a455a0c901 --- /dev/null +++ b/static/usage/v7/list-header/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel, IonListHeader } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel, IonListHeader], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/list-header/theming/css-properties/index.md b/static/usage/v7/list-header/theming/css-properties/index.md index e273cdb2b91..e5ec0bbf4c2 100644 --- a/static/usage/v7/list-header/theming/css-properties/index.md +++ b/static/usage/v7/list-header/theming/css-properties/index.md @@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md'; import vue from './vue.md'; -import angular_example_component_css from './angular/example_component_css.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 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/list/inset/angular.md b/static/usage/v7/list/inset/angular/example_component_html.md similarity index 100% rename from static/usage/v7/list/inset/angular.md rename to static/usage/v7/list/inset/angular/example_component_html.md diff --git a/static/usage/v7/list/inset/angular/example_component_ts.md b/static/usage/v7/list/inset/angular/example_component_ts.md new file mode 100644 index 00000000000..0ebeec81ff2 --- /dev/null +++ b/static/usage/v7/list/inset/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonItem, IonLabel, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonItem, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/list/inset/index.md b/static/usage/v7/list/inset/index.md index db7339d24eb..5ecc37224d0 100644 --- a/static/usage/v7/list/inset/index.md +++ b/static/usage/v7/list/inset/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'; +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/loading/controller/angular/example_component_ts.md b/static/usage/v7/loading/controller/angular/example_component_ts.md index bd4b86eef29..cec468c627c 100644 --- a/static/usage/v7/loading/controller/angular/example_component_ts.md +++ b/static/usage/v7/loading/controller/angular/example_component_ts.md @@ -1,11 +1,12 @@ ```ts import { Component } from '@angular/core'; - -import { LoadingController } from '@ionic/angular'; +import { IonButton, LoadingController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], }) export class ExampleComponent { constructor(private loadingCtrl: LoadingController) {} diff --git a/static/usage/v7/loading/inline/angular.md b/static/usage/v7/loading/inline/angular/example_component_html.md similarity index 100% rename from static/usage/v7/loading/inline/angular.md rename to static/usage/v7/loading/inline/angular/example_component_html.md diff --git a/static/usage/v7/loading/inline/angular/example_component_ts.md b/static/usage/v7/loading/inline/angular/example_component_ts.md new file mode 100644 index 00000000000..1807657477f --- /dev/null +++ b/static/usage/v7/loading/inline/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonLoading } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonLoading], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/loading/inline/index.md b/static/usage/v7/loading/inline/index.md index e4038ad027d..25ef6e64639 100644 --- a/static/usage/v7/loading/inline/index.md +++ b/static/usage/v7/loading/inline/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/loading/spinners/angular.md b/static/usage/v7/loading/spinners/angular/example_component_html.md similarity index 100% rename from static/usage/v7/loading/spinners/angular.md rename to static/usage/v7/loading/spinners/angular/example_component_html.md diff --git a/static/usage/v7/loading/spinners/angular/example_component_ts.md b/static/usage/v7/loading/spinners/angular/example_component_ts.md new file mode 100644 index 00000000000..1807657477f --- /dev/null +++ b/static/usage/v7/loading/spinners/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonLoading } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonLoading], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/loading/spinners/index.md b/static/usage/v7/loading/spinners/index.md index c9aa963a5f1..99b1adcad28 100644 --- a/static/usage/v7/loading/spinners/index.md +++ b/static/usage/v7/loading/spinners/index.md @@ -1,7 +1,9 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.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'; import react from './react.md'; import vue from './vue.md'; @@ -11,7 +13,12 @@ import vue from './vue.md'; javascript, react, vue, - angular, + angular: { + files: { + 'src/app/example.component.html': angular_example_component_html, + 'src/app/example.component.ts': angular_example_component_ts, + }, + }, }} src="usage/v7/loading/spinners/demo.html" /> diff --git a/static/usage/v7/loading/theming/angular/example_component_ts.md b/static/usage/v7/loading/theming/angular/example_component_ts.md new file mode 100644 index 00000000000..1807657477f --- /dev/null +++ b/static/usage/v7/loading/theming/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonLoading } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonLoading], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/loading/theming/index.md b/static/usage/v7/loading/theming/index.md index f0a5a379593..0a36d4cd6e5 100644 --- a/static/usage/v7/loading/theming/index.md +++ b/static/usage/v7/loading/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'; (); - checkboxChanged(event: any) { - const ev = event as CheckboxCustomEvent; - const checked = ev.detail.checked; + checkboxChanged(event: CheckboxCustomEvent) { + const checked = event.detail.checked; this.dismissChange.emit(checked); } diff --git a/static/usage/v7/modal/can-dismiss/child-state/angular/example_component_ts.md b/static/usage/v7/modal/can-dismiss/child-state/angular/example_component_ts.md index 19544ec574a..1f1f3fd5e57 100644 --- a/static/usage/v7/modal/can-dismiss/child-state/angular/example_component_ts.md +++ b/static/usage/v7/modal/can-dismiss/child-state/angular/example_component_ts.md @@ -1,14 +1,26 @@ ```ts import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { + ActionSheetController, + IonButton, + IonContent, + IonHeader, + IonModal, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; -import { ActionSheetController } from '@ionic/angular'; +import { ChildComponent } from './child.component'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ChildComponent, FormsModule, IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar], }) export class ExampleComponent { - presentingElement = undefined; + presentingElement!: HTMLElement | null; private canDismissOverride = false; diff --git a/static/usage/v7/modal/can-dismiss/child-state/index.md b/static/usage/v7/modal/can-dismiss/child-state/index.md index d213d283663..d77ccf90326 100644 --- a/static/usage/v7/modal/can-dismiss/child-state/index.md +++ b/static/usage/v7/modal/can-dismiss/child-state/index.md @@ -10,7 +10,6 @@ import angular_example_component_html from './angular/example_component_html.md' import angular_example_component_ts from './angular/example_component_ts.md'; import angular_child_component_html from './angular/child_component_html.md'; import angular_child_component_ts from './angular/child_component_ts.md'; -import angular_app_module_ts from './angular/app_module_ts.md'; Go to Page Two `, + imports: [IonButton, IonContent], }) export class PageOneComponent { constructor(private nav: IonNav) {} diff --git a/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md index 5b1b70c3474..03f298b15ae 100644 --- a/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md +++ b/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md @@ -1,6 +1,6 @@ ```ts import { Component } from '@angular/core'; -import { IonNav } from '@ionic/angular'; +import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone'; @Component({ selector: 'app-page-one', @@ -11,6 +11,7 @@ import { IonNav } from '@ionic/angular'; Go to Root `, + imports: [IonButton, IonContent], }) export class PageThreeComponent { constructor(private nav: IonNav) {} diff --git a/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md index 0cd5713c062..769b0bc9bda 100644 --- a/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md +++ b/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md @@ -1,6 +1,6 @@ ```ts import { Component } from '@angular/core'; -import { IonNav } from '@ionic/angular'; +import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone'; import { PageThreeComponent } from './page-three.component'; @@ -12,6 +12,7 @@ import { PageThreeComponent } from './page-three.component'; Go to Page Three `, + imports: [IonButton, IonContent], }) export class PageTwoComponent { component = PageThreeComponent; diff --git a/static/usage/v7/nav/modal-navigation/index.md b/static/usage/v7/nav/modal-navigation/index.md index 73ce3215f66..7e443a6d98e 100644 --- a/static/usage/v7/nav/modal-navigation/index.md +++ b/static/usage/v7/nav/modal-navigation/index.md @@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; -import angular_app_module_ts from './angular/app_module_ts.md'; import angular_example_component_ts from './angular/example_component_ts.md'; import angular_example_component_html from './angular/example_component_html.md'; import angular_page_one_component_ts from './angular/page_one_component_ts.md'; @@ -30,7 +29,6 @@ import vue_page_three from './vue/page_three_vue.md'; 'src/app/page-one.component.ts': angular_page_one_component_ts, 'src/app/page-two.component.ts': angular_page_two_component_ts, 'src/app/page-three.component.ts': angular_page_three_component_ts, - 'src/app/app.module.ts': angular_app_module_ts, }, }, react: { diff --git a/static/usage/v7/nav/nav-link/angular/app_module_ts.md b/static/usage/v7/nav/nav-link/angular/app_module_ts.md deleted file mode 100644 index d3b8b44f6ce..00000000000 --- a/static/usage/v7/nav/nav-link/angular/app_module_ts.md +++ /dev/null @@ -1,21 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - -import { IonicModule } from '@ionic/angular'; - -import { AppComponent } from './app.component'; -import { ExampleComponent } from './example.component'; - -import { PageOneComponent } from './page-one.component'; -import { PageTwoComponent } from './page-two.component'; -import { PageThreeComponent } from './page-three.component'; - -@NgModule({ - imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})], - declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` diff --git a/static/usage/v7/nav/nav-link/angular/example_component_ts.md b/static/usage/v7/nav/nav-link/angular/example_component_ts.md index b123a4858ce..4c364e72340 100644 --- a/static/usage/v7/nav/nav-link/angular/example_component_ts.md +++ b/static/usage/v7/nav/nav-link/angular/example_component_ts.md @@ -1,11 +1,14 @@ ```ts import { Component } from '@angular/core'; +import { IonNav } from '@ionic/angular/standalone'; import { PageOneComponent } from './page-one.component'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonNav], }) export class ExampleComponent { component = PageOneComponent; diff --git a/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md b/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md index 06c42b342cf..b6a83169e18 100644 --- a/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md +++ b/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar } from '@ionic/angular/standalone'; import { PageTwoComponent } from './page-two.component'; @@ -18,6 +19,7 @@ import { PageTwoComponent } from './page-two.component'; `, + imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar], }) export class PageOneComponent { component = PageTwoComponent; diff --git a/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md b/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md index d9e95ed7218..4cc4fc01be1 100644 --- a/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md +++ b/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; @Component({ selector: 'app-page-one', @@ -16,6 +17,7 @@ import { Component } from '@angular/core';

Page Three

`, + imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar], }) export class PageThreeComponent {} ``` diff --git a/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md b/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md index d6edd90a593..d1986f19a96 100644 --- a/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md +++ b/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md @@ -1,5 +1,15 @@ ```ts import { Component } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonNavLink, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; import { PageThreeComponent } from './page-three.component'; @@ -23,6 +33,7 @@ import { PageThreeComponent } from './page-three.component';
`, + imports: [IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar], }) export class PageTwoComponent { component = PageThreeComponent; diff --git a/static/usage/v7/nav/nav-link/index.md b/static/usage/v7/nav/nav-link/index.md index de4e4e01562..0456c3ca67e 100644 --- a/static/usage/v7/nav/nav-link/index.md +++ b/static/usage/v7/nav/nav-link/index.md @@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; -import angular_app_module_ts from './angular/app_module_ts.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_page_one_component_ts from './angular/page_one_component_ts.md'; @@ -30,7 +29,6 @@ import vue_page_three from './vue/page_three_vue.md'; 'src/app/page-one.component.ts': angular_page_one_component_ts, 'src/app/page-two.component.ts': angular_page_two_component_ts, 'src/app/page-three.component.ts': angular_page_three_component_ts, - 'src/app/app.module.ts': angular_app_module_ts, }, }, react: { diff --git a/static/usage/v7/note/basic/angular.md b/static/usage/v7/note/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/note/basic/angular.md rename to static/usage/v7/note/basic/angular/example_component_html.md diff --git a/static/usage/v7/note/basic/angular/example_component_ts.md b/static/usage/v7/note/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..38db87894b7 --- /dev/null +++ b/static/usage/v7/note/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonNote } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonNote], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/note/basic/index.md b/static/usage/v7/note/basic/index.md index c1ff54b6c74..d319a0ad697 100644 --- a/static/usage/v7/note/basic/index.md +++ b/static/usage/v7/note/basic/index.md @@ -3,6 +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/note/item/angular.md b/static/usage/v7/note/item/angular/example_component_html.md similarity index 100% rename from static/usage/v7/note/item/angular.md rename to static/usage/v7/note/item/angular/example_component_html.md diff --git a/static/usage/v7/note/item/angular/example_component_ts.md b/static/usage/v7/note/item/angular/example_component_ts.md new file mode 100644 index 00000000000..56ed0d01872 --- /dev/null +++ b/static/usage/v7/note/item/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonNote } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonNote], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/note/item/index.md b/static/usage/v7/note/item/index.md index 5c32457e008..6090fc71c40 100644 --- a/static/usage/v7/note/item/index.md +++ b/static/usage/v7/note/item/index.md @@ -3,6 +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/note/theming/colors/angular.md b/static/usage/v7/note/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v7/note/theming/colors/angular.md rename to static/usage/v7/note/theming/colors/angular/example_component_html.md diff --git a/static/usage/v7/note/theming/colors/angular/example_component_ts.md b/static/usage/v7/note/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..38db87894b7 --- /dev/null +++ b/static/usage/v7/note/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonNote } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonNote], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/note/theming/colors/index.md b/static/usage/v7/note/theming/colors/index.md index daadf060f1e..f1e9be4095d 100644 --- a/static/usage/v7/note/theming/colors/index.md +++ b/static/usage/v7/note/theming/colors/index.md @@ -3,6 +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/note/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/note/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..38db87894b7 --- /dev/null +++ b/static/usage/v7/note/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonNote } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonNote], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/note/theming/css-properties/index.md b/static/usage/v7/note/theming/css-properties/index.md index 07c1802c04b..d7374e0c949 100644 --- a/static/usage/v7/note/theming/css-properties/index.md +++ b/static/usage/v7/note/theming/css-properties/index.md @@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md'; import vue from './vue.md'; -import angular_example_component_css from './angular/example_component_css.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'; { + handler: (value: PickerValue) => { console.log(`You selected: ${value.languages.value}`); }, }, diff --git a/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md b/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md index 7a638c60964..3af371232cf 100644 --- a/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md +++ b/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md @@ -1,9 +1,19 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonPicker } from '@ionic/angular/standalone'; + +interface PickerValue { + languages: { + text: string; + value: string; + }; +} @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonPicker], }) export class ExampleComponent { public pickerColumns = [ @@ -37,7 +47,7 @@ export class ExampleComponent { }, { text: 'Confirm', - handler: (value) => { + handler: (value: PickerValue) => { console.log(`You selected: ${value.languages.value}`); }, }, diff --git a/static/usage/v7/picker/multiple-column/angular/example_component_ts.md b/static/usage/v7/picker/multiple-column/angular/example_component_ts.md index 6f252e19dc9..f2e223cceff 100644 --- a/static/usage/v7/picker/multiple-column/angular/example_component_ts.md +++ b/static/usage/v7/picker/multiple-column/angular/example_component_ts.md @@ -1,9 +1,27 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonPicker } from '@ionic/angular/standalone'; + +interface PickerValue { + meat: { + text: string; + value: string; + }; + veggies: { + text: string; + value: string; + }; + crust: { + text: string; + value: string; + }; +} @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonPicker], }) export class ExampleComponent { public pickerColumns = [ @@ -67,7 +85,7 @@ export class ExampleComponent { }, { text: 'Confirm', - handler: (value) => { + handler: (value: PickerValue) => { console.log(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); }, }, diff --git a/static/usage/v7/popover/customization/positioning/angular/example_component_ts.md b/static/usage/v7/popover/customization/positioning/angular/example_component_ts.md index 4db53a836a9..3d0ceecf836 100644 --- a/static/usage/v7/popover/customization/positioning/angular/example_component_ts.md +++ b/static/usage/v7/popover/customization/positioning/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonPopover], }) export class ExampleComponent {} ``` diff --git a/static/usage/v7/popover/customization/sizing/angular.md b/static/usage/v7/popover/customization/sizing/angular/example_component_html.md similarity index 100% rename from static/usage/v7/popover/customization/sizing/angular.md rename to static/usage/v7/popover/customization/sizing/angular/example_component_html.md diff --git a/static/usage/v7/popover/customization/sizing/angular/example_component_ts.md b/static/usage/v7/popover/customization/sizing/angular/example_component_ts.md new file mode 100644 index 00000000000..3d0ceecf836 --- /dev/null +++ b/static/usage/v7/popover/customization/sizing/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonPopover], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/popover/customization/sizing/index.md b/static/usage/v7/popover/customization/sizing/index.md index 3eb127648dc..dd1f84ade48 100644 --- a/static/usage/v7/popover/customization/sizing/index.md +++ b/static/usage/v7/popover/customization/sizing/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/popover/customization/styling/angular/example_component_ts.md b/static/usage/v7/popover/customization/styling/angular/example_component_ts.md new file mode 100644 index 00000000000..3d0ceecf836 --- /dev/null +++ b/static/usage/v7/popover/customization/styling/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonPopover], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/popover/customization/styling/index.md b/static/usage/v7/popover/customization/styling/index.md index 658ef72d45a..4bf193fb781 100644 --- a/static/usage/v7/popover/customization/styling/index.md +++ b/static/usage/v7/popover/customization/styling/index.md @@ -7,6 +7,7 @@ import react_main_tsx from './react/main_tsx.md'; import react_main_css from './react/main_css.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/popover/performance/mount/angular.md b/static/usage/v7/popover/performance/mount/angular/example_component_html.md similarity index 100% rename from static/usage/v7/popover/performance/mount/angular.md rename to static/usage/v7/popover/performance/mount/angular/example_component_html.md diff --git a/static/usage/v7/popover/performance/mount/angular/example_component_ts.md b/static/usage/v7/popover/performance/mount/angular/example_component_ts.md new file mode 100644 index 00000000000..3d0ceecf836 --- /dev/null +++ b/static/usage/v7/popover/performance/mount/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonPopover], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/popover/performance/mount/index.md b/static/usage/v7/popover/performance/mount/index.md index 9c846cc784b..4e995fa3754 100644 --- a/static/usage/v7/popover/performance/mount/index.md +++ b/static/usage/v7/popover/performance/mount/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/progress-bar/buffer/angular/example_component_ts.md b/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md index a876a376204..fbf879f8d36 100644 --- a/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md +++ b/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonProgressBar } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonProgressBar], }) export class ExampleComponent { public buffer = 0.06; diff --git a/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md b/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md index 971d3d92ed0..383264f58d4 100644 --- a/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md +++ b/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonProgressBar } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonProgressBar], }) export class ExampleComponent { public progress = 0; diff --git a/static/usage/v7/progress-bar/indeterminate/angular.md b/static/usage/v7/progress-bar/indeterminate/angular/example_component_html.md similarity index 100% rename from static/usage/v7/progress-bar/indeterminate/angular.md rename to static/usage/v7/progress-bar/indeterminate/angular/example_component_html.md diff --git a/static/usage/v7/progress-bar/indeterminate/angular/example_component_ts.md b/static/usage/v7/progress-bar/indeterminate/angular/example_component_ts.md new file mode 100644 index 00000000000..5d74447eded --- /dev/null +++ b/static/usage/v7/progress-bar/indeterminate/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonProgressBar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonProgressBar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/progress-bar/indeterminate/index.md b/static/usage/v7/progress-bar/indeterminate/index.md index db428ba5871..ab84f691c37 100644 --- a/static/usage/v7/progress-bar/indeterminate/index.md +++ b/static/usage/v7/progress-bar/indeterminate/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/progress-bar/theming/colors/angular.md b/static/usage/v7/progress-bar/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v7/progress-bar/theming/colors/angular.md rename to static/usage/v7/progress-bar/theming/colors/angular/example_component_html.md diff --git a/static/usage/v7/progress-bar/theming/colors/angular/example_component_ts.md b/static/usage/v7/progress-bar/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..5d74447eded --- /dev/null +++ b/static/usage/v7/progress-bar/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonProgressBar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonProgressBar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/progress-bar/theming/colors/index.md b/static/usage/v7/progress-bar/theming/colors/index.md index 7e6638a7e74..597a47e552b 100644 --- a/static/usage/v7/progress-bar/theming/colors/index.md +++ b/static/usage/v7/progress-bar/theming/colors/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/progress-bar/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..5d74447eded --- /dev/null +++ b/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonProgressBar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonProgressBar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/progress-bar/theming/css-properties/index.md b/static/usage/v7/progress-bar/theming/css-properties/index.md index 5d6c694d104..d775905c2db 100644 --- a/static/usage/v7/progress-bar/theming/css-properties/index.md +++ b/static/usage/v7/progress-bar/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; diff --git a/static/usage/v7/radio/basic/angular.md b/static/usage/v7/radio/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/radio/basic/angular.md rename to static/usage/v7/radio/basic/angular/example_component_html.md diff --git a/static/usage/v7/radio/basic/angular/example_component_ts.md b/static/usage/v7/radio/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v7/radio/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/radio/basic/index.md b/static/usage/v7/radio/basic/index.md index 25f829a31fe..b1b5522da81 100644 --- a/static/usage/v7/radio/basic/index.md +++ b/static/usage/v7/radio/basic/index.md @@ -3,6 +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/radio/empty-selection/angular.md b/static/usage/v7/radio/empty-selection/angular/example_component_html.md similarity index 100% rename from static/usage/v7/radio/empty-selection/angular.md rename to static/usage/v7/radio/empty-selection/angular/example_component_html.md diff --git a/static/usage/v7/radio/empty-selection/angular/example_component_ts.md b/static/usage/v7/radio/empty-selection/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v7/radio/empty-selection/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/radio/empty-selection/index.md b/static/usage/v7/radio/empty-selection/index.md index 2223f07657d..31b149c9f34 100644 --- a/static/usage/v7/radio/empty-selection/index.md +++ b/static/usage/v7/radio/empty-selection/index.md @@ -3,6 +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/radio/justify/angular.md b/static/usage/v7/radio/justify/angular/example_component_html.md similarity index 100% rename from static/usage/v7/radio/justify/angular.md rename to static/usage/v7/radio/justify/angular/example_component_html.md diff --git a/static/usage/v7/radio/justify/angular/example_component_ts.md b/static/usage/v7/radio/justify/angular/example_component_ts.md new file mode 100644 index 00000000000..151a9f44f80 --- /dev/null +++ b/static/usage/v7/radio/justify/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/radio/justify/index.md b/static/usage/v7/radio/justify/index.md index 3105943de6f..62930c29a8d 100644 --- a/static/usage/v7/radio/justify/index.md +++ b/static/usage/v7/radio/justify/index.md @@ -3,6 +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/radio/label-placement/angular.md b/static/usage/v7/radio/label-placement/angular/example_component_html.md similarity index 100% rename from static/usage/v7/radio/label-placement/angular.md rename to static/usage/v7/radio/label-placement/angular/example_component_html.md diff --git a/static/usage/v7/radio/label-placement/angular/example_component_ts.md b/static/usage/v7/radio/label-placement/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v7/radio/label-placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/radio/label-placement/index.md b/static/usage/v7/radio/label-placement/index.md index 24df0d8ca22..5098f50aa87 100644 --- a/static/usage/v7/radio/label-placement/index.md +++ b/static/usage/v7/radio/label-placement/index.md @@ -3,6 +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/radio/theming/colors/angular.md b/static/usage/v7/radio/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v7/radio/theming/colors/angular.md rename to static/usage/v7/radio/theming/colors/angular/example_component_html.md diff --git a/static/usage/v7/radio/theming/colors/angular/example_component_ts.md b/static/usage/v7/radio/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v7/radio/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/radio/theming/colors/index.md b/static/usage/v7/radio/theming/colors/index.md index 3cd9a87cdb8..b8dbd616314 100644 --- a/static/usage/v7/radio/theming/colors/index.md +++ b/static/usage/v7/radio/theming/colors/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/radio/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/radio/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v7/radio/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/radio/theming/css-properties/index.md b/static/usage/v7/radio/theming/css-properties/index.md index 032b2ee66c9..8669ba8cd0e 100644 --- a/static/usage/v7/radio/theming/css-properties/index.md +++ b/static/usage/v7/radio/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; - + @for (food of foods; track food.id) { + {{ food.name }} + } ``` diff --git a/static/usage/v7/radio/using-comparewith/angular/example_component_ts.md b/static/usage/v7/radio/using-comparewith/angular/example_component_ts.md index d7f803aea0b..1158167fc16 100644 --- a/static/usage/v7/radio/using-comparewith/angular/example_component_ts.md +++ b/static/usage/v7/radio/using-comparewith/angular/example_component_ts.md @@ -1,12 +1,21 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +interface Food { + id: number; + name: string; + type: string; +} @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonRadio, IonRadioGroup], }) export class ExampleComponent { - foods = [ + foods: Food[] = [ { id: 1, name: 'Apples', @@ -24,16 +33,13 @@ export class ExampleComponent { }, ]; - compareWith(o1, o2) { + compareWith(o1: Food, o2: Food): boolean { return o1.id === o2.id; } - handleChange(ev) { - console.log('Current value:', JSON.stringify(ev.target.value)); - } - - trackItems(index: number, item: any) { - return item.id; + handleChange(ev: Event): void { + const target = ev.target as HTMLInputElement; + console.log('Current value:', JSON.stringify(target.value)); } } ``` diff --git a/static/usage/v7/range/basic/angular.md b/static/usage/v7/range/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/range/basic/angular.md rename to static/usage/v7/range/basic/angular/example_component_html.md diff --git a/static/usage/v7/range/basic/angular/example_component_ts.md b/static/usage/v7/range/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..24ea50045aa --- /dev/null +++ b/static/usage/v7/range/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/range/basic/index.md b/static/usage/v7/range/basic/index.md index 49aed4c5b42..c8dfeaf0338 100644 --- a/static/usage/v7/range/basic/index.md +++ b/static/usage/v7/range/basic/index.md @@ -5,6 +5,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/range/dual-knobs/angular.md b/static/usage/v7/range/dual-knobs/angular/example_component_html.md similarity index 100% rename from static/usage/v7/range/dual-knobs/angular.md rename to static/usage/v7/range/dual-knobs/angular/example_component_html.md diff --git a/static/usage/v7/range/dual-knobs/angular/example_component_ts.md b/static/usage/v7/range/dual-knobs/angular/example_component_ts.md new file mode 100644 index 00000000000..24ea50045aa --- /dev/null +++ b/static/usage/v7/range/dual-knobs/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/range/dual-knobs/index.md b/static/usage/v7/range/dual-knobs/index.md index ead42b93ad6..66d3a06fe22 100644 --- a/static/usage/v7/range/dual-knobs/index.md +++ b/static/usage/v7/range/dual-knobs/index.md @@ -3,6 +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/range/ion-change-event/angular/example_component_ts.md b/static/usage/v7/range/ion-change-event/angular/example_component_ts.md index 377ccd2dc28..e1502344095 100644 --- a/static/usage/v7/range/ion-change-event/angular/example_component_ts.md +++ b/static/usage/v7/range/ion-change-event/angular/example_component_ts.md @@ -1,11 +1,12 @@ ```ts import { Component } from '@angular/core'; - -import { RangeCustomEvent } from '@ionic/angular'; +import { IonRange, RangeCustomEvent } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], }) export class ExampleComponent { onIonChange(ev: Event) { diff --git a/static/usage/v7/range/ion-knob-move-event/angular/example_component_ts.md b/static/usage/v7/range/ion-knob-move-event/angular/example_component_ts.md index e1b920f66da..b13b84b308d 100644 --- a/static/usage/v7/range/ion-knob-move-event/angular/example_component_ts.md +++ b/static/usage/v7/range/ion-knob-move-event/angular/example_component_ts.md @@ -1,11 +1,12 @@ ```ts import { Component } from '@angular/core'; - -import { RangeCustomEvent } from '@ionic/angular'; +import { IonRange, RangeCustomEvent } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], }) export class ExampleComponent { onIonKnobMoveStart(ev: Event) { diff --git a/static/usage/v7/range/label-slot/angular.md b/static/usage/v7/range/label-slot/angular/example_component_html.md similarity index 100% rename from static/usage/v7/range/label-slot/angular.md rename to static/usage/v7/range/label-slot/angular/example_component_html.md diff --git a/static/usage/v7/range/label-slot/angular/example_component_ts.md b/static/usage/v7/range/label-slot/angular/example_component_ts.md new file mode 100644 index 00000000000..2c58b35ac63 --- /dev/null +++ b/static/usage/v7/range/label-slot/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange, IonText } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange, IonText], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/range/label-slot/index.md b/static/usage/v7/range/label-slot/index.md index f885a98ce72..f778ab0d518 100644 --- a/static/usage/v7/range/label-slot/index.md +++ b/static/usage/v7/range/label-slot/index.md @@ -3,6 +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/range/labels/angular.md b/static/usage/v7/range/labels/angular/example_component_html.md similarity index 100% rename from static/usage/v7/range/labels/angular.md rename to static/usage/v7/range/labels/angular/example_component_html.md diff --git a/static/usage/v7/range/labels/angular/example_component_ts.md b/static/usage/v7/range/labels/angular/example_component_ts.md new file mode 100644 index 00000000000..24ea50045aa --- /dev/null +++ b/static/usage/v7/range/labels/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/range/labels/index.md b/static/usage/v7/range/labels/index.md index 0a450c0c603..6980824fbe2 100644 --- a/static/usage/v7/range/labels/index.md +++ b/static/usage/v7/range/labels/index.md @@ -3,6 +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/range/no-visible-label/angular.md b/static/usage/v7/range/no-visible-label/angular/example_component_html.md similarity index 100% rename from static/usage/v7/range/no-visible-label/angular.md rename to static/usage/v7/range/no-visible-label/angular/example_component_html.md diff --git a/static/usage/v7/range/no-visible-label/angular/example_component_ts.md b/static/usage/v7/range/no-visible-label/angular/example_component_ts.md new file mode 100644 index 00000000000..24ea50045aa --- /dev/null +++ b/static/usage/v7/range/no-visible-label/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/range/no-visible-label/index.md b/static/usage/v7/range/no-visible-label/index.md index f23fc3fd998..38c3f06b37e 100644 --- a/static/usage/v7/range/no-visible-label/index.md +++ b/static/usage/v7/range/no-visible-label/index.md @@ -3,6 +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/range/pins/angular/example_component_ts.md b/static/usage/v7/range/pins/angular/example_component_ts.md index 8dc875e1bda..fdae87ebf9e 100644 --- a/static/usage/v7/range/pins/angular/example_component_ts.md +++ b/static/usage/v7/range/pins/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], }) export class ExampleComponent { pinFormatter(value: number) { diff --git a/static/usage/v7/range/slots/angular/example_component_ts.md b/static/usage/v7/range/slots/angular/example_component_ts.md index f61ba54a333..3ada922624c 100644 --- a/static/usage/v7/range/slots/angular/example_component_ts.md +++ b/static/usage/v7/range/slots/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonIcon, IonRange } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { snowOutline, sunnyOutline } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { snowOutline, sunnyOutline } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonIcon, IonRange], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/range/snapping-ticks/angular.md b/static/usage/v7/range/snapping-ticks/angular/example_component_html.md similarity index 100% rename from static/usage/v7/range/snapping-ticks/angular.md rename to static/usage/v7/range/snapping-ticks/angular/example_component_html.md diff --git a/static/usage/v7/range/snapping-ticks/angular/example_component_ts.md b/static/usage/v7/range/snapping-ticks/angular/example_component_ts.md new file mode 100644 index 00000000000..24ea50045aa --- /dev/null +++ b/static/usage/v7/range/snapping-ticks/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/range/snapping-ticks/index.md b/static/usage/v7/range/snapping-ticks/index.md index 0fc7d22e2ec..f7f4bb1e518 100644 --- a/static/usage/v7/range/snapping-ticks/index.md +++ b/static/usage/v7/range/snapping-ticks/index.md @@ -3,6 +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/range/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/range/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..24ea50045aa --- /dev/null +++ b/static/usage/v7/range/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/range/theming/css-properties/index.md b/static/usage/v7/range/theming/css-properties/index.md index 380bd5204d7..5dd2a606e5b 100644 --- a/static/usage/v7/range/theming/css-properties/index.md +++ b/static/usage/v7/range/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; - + @for (item of items; track item) { +

{{ item.name }}

New message from {{ item.name }}

 + } ``` diff --git a/static/usage/v7/refresher/advanced/angular/example_component_ts.md b/static/usage/v7/refresher/advanced/angular/example_component_ts.md index 9d1f3a5f199..db6bd8d6099 100644 --- a/static/usage/v7/refresher/advanced/angular/example_component_ts.md +++ b/static/usage/v7/refresher/advanced/angular/example_component_ts.md @@ -1,13 +1,42 @@ ```ts import { Component } from '@angular/core'; +import { + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { ellipse } from 'ionicons/icons'; +interface Item { + name: string; + unread: boolean; +} + @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['./example.component.css'], + imports: [ + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + ], }) export class ExampleComponent { public names = [ @@ -25,7 +54,7 @@ export class ExampleComponent { 'Rachel Rabbit', 'Ted Turtle', ]; - public items = []; + public items: Item[] = []; constructor() { /** @@ -44,7 +73,7 @@ export class ExampleComponent { return this.names[Math.floor(Math.random() * this.names.length)]; } - addItems(count, unread = false) { + addItems(count: number, unread = false) { for (let i = 0; i < count; i++) { this.items.unshift({ name: this.chooseRandomName(), @@ -53,10 +82,10 @@ export class ExampleComponent { } } - handleRefresh(event) { + handleRefresh(event: CustomEvent) { setTimeout(() => { this.addItems(3, true); - event.target.complete(); + (event.target as HTMLIonRefresherElement).complete(); }, 2000); } } diff --git a/static/usage/v7/refresher/basic/angular/example_component_ts.md b/static/usage/v7/refresher/basic/angular/example_component_ts.md index 74304953d4e..8edb4e4dc1f 100644 --- a/static/usage/v7/refresher/basic/angular/example_component_ts.md +++ b/static/usage/v7/refresher/basic/angular/example_component_ts.md @@ -1,15 +1,25 @@ ```ts import { Component } from '@angular/core'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar], }) export class ExampleComponent { - handleRefresh(event) { + handleRefresh(event: CustomEvent) { setTimeout(() => { // Any calls to load data go here - event.target.complete(); + (event.target as HTMLIonRefresherElement).complete(); }, 2000); } } diff --git a/static/usage/v7/refresher/custom-content/angular/example_component_ts.md b/static/usage/v7/refresher/custom-content/angular/example_component_ts.md index 74304953d4e..8edb4e4dc1f 100644 --- a/static/usage/v7/refresher/custom-content/angular/example_component_ts.md +++ b/static/usage/v7/refresher/custom-content/angular/example_component_ts.md @@ -1,15 +1,25 @@ ```ts import { Component } from '@angular/core'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar], }) export class ExampleComponent { - handleRefresh(event) { + handleRefresh(event: CustomEvent) { setTimeout(() => { // Any calls to load data go here - event.target.complete(); + (event.target as HTMLIonRefresherElement).complete(); }, 2000); } } diff --git a/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md index a5ac7eaaa9a..8edb4e4dc1f 100644 --- a/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md +++ b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md @@ -1,16 +1,25 @@ ```ts import { Component } from '@angular/core'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar], }) export class ExampleComponent { - handleRefresh(event) { + handleRefresh(event: CustomEvent) { setTimeout(() => { // Any calls to load data go here - event.target.complete(); + (event.target as HTMLIonRefresherElement).complete(); }, 2000); } } diff --git a/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md index 74304953d4e..8edb4e4dc1f 100644 --- a/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md +++ b/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md @@ -1,15 +1,25 @@ ```ts import { Component } from '@angular/core'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar], }) export class ExampleComponent { - handleRefresh(event) { + handleRefresh(event: CustomEvent) { setTimeout(() => { // Any calls to load data go here - event.target.complete(); + (event.target as HTMLIonRefresherElement).complete(); }, 2000); } } diff --git a/static/usage/v7/reorder/basic/angular/example_component_ts.md b/static/usage/v7/reorder/basic/angular/example_component_ts.md index 7a5c867f791..a0e47f6b8b6 100644 --- a/static/usage/v7/reorder/basic/angular/example_component_ts.md +++ b/static/usage/v7/reorder/basic/angular/example_component_ts.md @@ -1,11 +1,19 @@ ```ts import { Component } from '@angular/core'; - -import { ItemReorderEventDetail } from '@ionic/angular'; +import { + ItemReorderEventDetail, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], }) export class ExampleComponent { handleReorder(ev: CustomEvent) { diff --git a/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md index 17e7d981c87..d4f3cc02ac9 100644 --- a/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md +++ b/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md @@ -1,7 +1,14 @@ ```ts import { Component } from '@angular/core'; - -import { ItemReorderEventDetail } from '@ionic/angular'; +import { + ItemReorderEventDetail, + IonIcon, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { pizza } from 'ionicons/icons'; @@ -9,6 +16,8 @@ import { pizza } from 'ionicons/icons'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md index 2cd3dd66740..4ebfef05c5a 100644 --- a/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md +++ b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md @@ -1,12 +1,20 @@ ```ts import { Component } from '@angular/core'; - -import { ItemReorderEventDetail } from '@ionic/angular'; +import { + ItemReorderEventDetail, + IonContent, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['./example.component.css'], + imports: [IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], }) export class ExampleComponent { handleReorder(ev: CustomEvent) { diff --git a/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md index af0ff643b26..0914b726e0e 100644 --- a/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md +++ b/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md @@ -1,11 +1,20 @@ ```ts import { Component } from '@angular/core'; - -import { ItemReorderEventDetail } from '@ionic/angular'; +import { + ItemReorderEventDetail, + IonButton, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], }) export class ExampleComponent { public isDisabled = true; diff --git a/static/usage/v7/reorder/updating-data/angular/example_component_html.md b/static/usage/v7/reorder/updating-data/angular/example_component_html.md index 2485a558246..873daed0e90 100644 --- a/static/usage/v7/reorder/updating-data/angular/example_component_html.md +++ b/static/usage/v7/reorder/updating-data/angular/example_component_html.md @@ -3,10 +3,12 @@ - + @for (item of items; track item) { + Item {{ item }} + } ``` diff --git a/static/usage/v7/reorder/updating-data/angular/example_component_ts.md b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md index 920f5f81e36..bab1ace34d0 100644 --- a/static/usage/v7/reorder/updating-data/angular/example_component_ts.md +++ b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md @@ -1,11 +1,19 @@ ```ts import { Component } from '@angular/core'; - -import { ItemReorderEventDetail } from '@ionic/angular'; +import { + ItemReorderEventDetail, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], }) export class ExampleComponent { items = [1, 2, 3, 4, 5]; @@ -23,9 +31,5 @@ export class ExampleComponent { // After complete is called the items will be in the new order console.log('After complete', this.items); } - - trackItems(index: number, itemNumber: number) { - return itemNumber; - } } ``` diff --git a/static/usage/v7/reorder/wrapper/angular/example_component_ts.md b/static/usage/v7/reorder/wrapper/angular/example_component_ts.md index 7a5c867f791..a0e47f6b8b6 100644 --- a/static/usage/v7/reorder/wrapper/angular/example_component_ts.md +++ b/static/usage/v7/reorder/wrapper/angular/example_component_ts.md @@ -1,11 +1,19 @@ ```ts import { Component } from '@angular/core'; - -import { ItemReorderEventDetail } from '@ionic/angular'; +import { + ItemReorderEventDetail, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], }) export class ExampleComponent { handleReorder(ev: CustomEvent) { diff --git a/static/usage/v7/ripple-effect/basic/angular/example_component_ts.md b/static/usage/v7/ripple-effect/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..55c14aafc07 --- /dev/null +++ b/static/usage/v7/ripple-effect/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRippleEffect } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRippleEffect], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/ripple-effect/basic/index.md b/static/usage/v7/ripple-effect/basic/index.md index 56050b2e4d0..2a95bb09012 100644 --- a/static/usage/v7/ripple-effect/basic/index.md +++ b/static/usage/v7/ripple-effect/basic/index.md @@ -9,6 +9,7 @@ import vue from './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'; diff --git a/static/usage/v7/searchbar/cancel-button/angular.md b/static/usage/v7/searchbar/cancel-button/angular/example_component_html.md similarity index 100% rename from static/usage/v7/searchbar/cancel-button/angular.md rename to static/usage/v7/searchbar/cancel-button/angular/example_component_html.md diff --git a/static/usage/v7/searchbar/cancel-button/angular/example_component_ts.md b/static/usage/v7/searchbar/cancel-button/angular/example_component_ts.md new file mode 100644 index 00000000000..4069269cd0c --- /dev/null +++ b/static/usage/v7/searchbar/cancel-button/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonSearchbar } from '@ionic/angular/standalone'; + +import { addIcons } from 'ionicons'; +import { trash } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSearchbar], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ trash }); + } +} +``` diff --git a/static/usage/v7/searchbar/cancel-button/index.md b/static/usage/v7/searchbar/cancel-button/index.md index c1f4e1977cc..898cb36579e 100644 --- a/static/usage/v7/searchbar/cancel-button/index.md +++ b/static/usage/v7/searchbar/cancel-button/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/searchbar/clear-button/angular.md b/static/usage/v7/searchbar/clear-button/angular/example_component_html.md similarity index 100% rename from static/usage/v7/searchbar/clear-button/angular.md rename to static/usage/v7/searchbar/clear-button/angular/example_component_html.md diff --git a/static/usage/v7/searchbar/clear-button/angular/example_component_ts.md b/static/usage/v7/searchbar/clear-button/angular/example_component_ts.md new file mode 100644 index 00000000000..b93e2ab3905 --- /dev/null +++ b/static/usage/v7/searchbar/clear-button/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonSearchbar } from '@ionic/angular/standalone'; + +import { addIcons } from 'ionicons'; +import { trashBin } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSearchbar], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ trashBin }); + } +} +``` diff --git a/static/usage/v7/searchbar/clear-button/index.md b/static/usage/v7/searchbar/clear-button/index.md index 1d5212a124c..b5c5a844777 100644 --- a/static/usage/v7/searchbar/clear-button/index.md +++ b/static/usage/v7/searchbar/clear-button/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/searchbar/debounce/angular/example_component_html.md b/static/usage/v7/searchbar/debounce/angular/example_component_html.md index 4e69a179142..f0ee9b81eb7 100644 --- a/static/usage/v7/searchbar/debounce/angular/example_component_html.md +++ b/static/usage/v7/searchbar/debounce/angular/example_component_html.md @@ -2,8 +2,10 @@ - + @for (result of results; track result) { + {{ result }} + } ``` diff --git a/static/usage/v7/searchbar/debounce/angular/example_component_ts.md b/static/usage/v7/searchbar/debounce/angular/example_component_ts.md index 9a88f1c135b..6a97ecbba54 100644 --- a/static/usage/v7/searchbar/debounce/angular/example_component_ts.md +++ b/static/usage/v7/searchbar/debounce/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonList, IonSearchbar } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonSearchbar], }) export class ExampleComponent { public data = [ @@ -20,9 +23,10 @@ export class ExampleComponent { ]; public results = [...this.data]; - handleInput(event) { - const query = event.target.value.toLowerCase(); - this.results = this.data.filter((d) => d.toLowerCase().indexOf(query) > -1); + handleInput(event: Event) { + const target = event.target as HTMLIonSearchbarElement; + const query = target.value?.toLowerCase() || ''; + this.results = this.data.filter((d) => d.toLowerCase().includes(query)); } } ``` diff --git a/static/usage/v7/searchbar/search-icon/angular.md b/static/usage/v7/searchbar/search-icon/angular/example_component_html.md similarity index 100% rename from static/usage/v7/searchbar/search-icon/angular.md rename to static/usage/v7/searchbar/search-icon/angular/example_component_html.md diff --git a/static/usage/v7/searchbar/search-icon/angular/example_component_ts.md b/static/usage/v7/searchbar/search-icon/angular/example_component_ts.md new file mode 100644 index 00000000000..1339bfebf88 --- /dev/null +++ b/static/usage/v7/searchbar/search-icon/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonSearchbar } from '@ionic/angular/standalone'; + +import { addIcons } from 'ionicons'; +import { searchCircle } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSearchbar], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ searchCircle }); + } +} +``` diff --git a/static/usage/v7/searchbar/search-icon/index.md b/static/usage/v7/searchbar/search-icon/index.md index 951485a0809..90f4e93ced2 100644 --- a/static/usage/v7/searchbar/search-icon/index.md +++ b/static/usage/v7/searchbar/search-icon/index.md @@ -3,6 +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/searchbar/theming/colors/angular.md b/static/usage/v7/searchbar/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v7/searchbar/theming/colors/angular.md rename to static/usage/v7/searchbar/theming/colors/angular/example_component_html.md diff --git a/static/usage/v7/searchbar/theming/colors/angular/example_component_ts.md b/static/usage/v7/searchbar/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..2ea2b2e4cf3 --- /dev/null +++ b/static/usage/v7/searchbar/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSearchbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSearchbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/searchbar/theming/colors/index.md b/static/usage/v7/searchbar/theming/colors/index.md index 670a3db2034..20cecd3ae2a 100644 --- a/static/usage/v7/searchbar/theming/colors/index.md +++ b/static/usage/v7/searchbar/theming/colors/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/searchbar/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/searchbar/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..2ea2b2e4cf3 --- /dev/null +++ b/static/usage/v7/searchbar/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSearchbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSearchbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/searchbar/theming/css-properties/index.md b/static/usage/v7/searchbar/theming/css-properties/index.md index 65e3fca5306..ad19f954884 100644 --- a/static/usage/v7/searchbar/theming/css-properties/index.md +++ b/static/usage/v7/searchbar/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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 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/segment-button/layout/angular/example_component_ts.md b/static/usage/v7/segment-button/layout/angular/example_component_ts.md index 8540f8ec1b3..d974333e9ac 100644 --- a/static/usage/v7/segment-button/layout/angular/example_component_ts.md +++ b/static/usage/v7/segment-button/layout/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { call, heart, pin } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { call, heart, pin } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonIcon, IonLabel, IonSegment, IonSegmentButton], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/segment-button/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/segment-button/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..d51cbc123a9 --- /dev/null +++ b/static/usage/v7/segment-button/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel, IonSegment, IonSegmentButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/segment-button/theming/css-properties/index.md b/static/usage/v7/segment-button/theming/css-properties/index.md index 66e2e50f583..2895629cf08 100644 --- a/static/usage/v7/segment-button/theming/css-properties/index.md +++ b/static/usage/v7/segment-button/theming/css-properties/index.md @@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md'; import vue from './vue.md'; -import angular_example_component_css from './angular/example_component_css.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 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/segment/scrollable/angular/example_component_ts.md b/static/usage/v7/segment/scrollable/angular/example_component_ts.md index 807b3ff6125..fb95a4ea914 100644 --- a/static/usage/v7/segment/scrollable/angular/example_component_ts.md +++ b/static/usage/v7/segment/scrollable/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonIcon, IonSegment, IonSegmentButton } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { barbell, basket, call, globe, heart, home, person, pin, star, trash } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { barbell, basket, call, globe, heart, home, person, pin, star, trash } f selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonIcon, IonSegment, IonSegmentButton], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/segment/theming/colors/angular.md b/static/usage/v7/segment/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v7/segment/theming/colors/angular.md rename to static/usage/v7/segment/theming/colors/angular/example_component_html.md diff --git a/static/usage/v7/segment/theming/colors/angular/example_component_ts.md b/static/usage/v7/segment/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..d51cbc123a9 --- /dev/null +++ b/static/usage/v7/segment/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel, IonSegment, IonSegmentButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/segment/theming/colors/index.md b/static/usage/v7/segment/theming/colors/index.md index bdcf06a9deb..69423805864 100644 --- a/static/usage/v7/segment/theming/colors/index.md +++ b/static/usage/v7/segment/theming/colors/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/segment/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/segment/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..d51cbc123a9 --- /dev/null +++ b/static/usage/v7/segment/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel, IonSegment, IonSegmentButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/segment/theming/css-properties/index.md b/static/usage/v7/segment/theming/css-properties/index.md index da21c55735d..ecc038e1c3d 100644 --- a/static/usage/v7/segment/theming/css-properties/index.md +++ b/static/usage/v7/segment/theming/css-properties/index.md @@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md'; import vue from './vue.md'; -import angular_example_component_css from './angular/example_component_css.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'; diff --git a/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md index fb51c040a2f..fb988662d59 100644 --- a/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md +++ b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md @@ -1,13 +1,16 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { - handleChange(e) { - console.log('ionChange fired with value: ' + e.detail.value); + handleChange(event: CustomEvent) { + console.log('ionChange fired with value: ' + event.detail.value); } handleCancel() { diff --git a/static/usage/v7/select/basic/single-selection/angular.md b/static/usage/v7/select/basic/single-selection/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/basic/single-selection/angular.md rename to static/usage/v7/select/basic/single-selection/angular/example_component_html.md diff --git a/static/usage/v7/select/basic/single-selection/angular/example_component_ts.md b/static/usage/v7/select/basic/single-selection/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v7/select/basic/single-selection/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/select/basic/single-selection/index.md b/static/usage/v7/select/basic/single-selection/index.md index 1fc60d79fe6..22f6b1f7708 100644 --- a/static/usage/v7/select/basic/single-selection/index.md +++ b/static/usage/v7/select/basic/single-selection/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/select/customization/button-text/angular.md b/static/usage/v7/select/customization/button-text/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/customization/button-text/angular.md rename to static/usage/v7/select/customization/button-text/angular/example_component_html.md diff --git a/static/usage/v7/select/customization/button-text/angular/example_component_ts.md b/static/usage/v7/select/customization/button-text/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v7/select/customization/button-text/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/select/customization/button-text/index.md b/static/usage/v7/select/customization/button-text/index.md index 9e1a07063f8..c5a6fc0923c 100644 --- a/static/usage/v7/select/customization/button-text/index.md +++ b/static/usage/v7/select/customization/button-text/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/select/customization/custom-toggle-icons/angular.md b/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/customization/custom-toggle-icons/angular.md rename to static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_html.md diff --git a/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md b/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md new file mode 100644 index 00000000000..61e221a24b6 --- /dev/null +++ b/static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +import { addIcons } from 'ionicons'; +import { add, remove } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ add, remove }); + } +} +``` diff --git a/static/usage/v7/select/customization/custom-toggle-icons/index.md b/static/usage/v7/select/customization/custom-toggle-icons/index.md index 0617a54da77..86f22e705ff 100644 --- a/static/usage/v7/select/customization/custom-toggle-icons/index.md +++ b/static/usage/v7/select/customization/custom-toggle-icons/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/select/customization/icon-flip-behavior/angular/example_component_ts.md b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md index 4db53a836a9..d85d4166365 100644 --- a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md +++ b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md @@ -1,10 +1,24 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +import { addIcons } from 'ionicons'; +import { caretDownSharp } from 'ionicons/icons'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) -export class ExampleComponent {} +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ caretDownSharp }); + } +} ``` diff --git a/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md index c3f34d0adaf..2ab0bd1d62a 100644 --- a/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md +++ b/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { customAlertOptions = { diff --git a/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md b/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md index 4db53a836a9..1b377b77218 100644 --- a/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md +++ b/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonSelect, IonSelectOption } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonSelect, IonSelectOption], }) export class ExampleComponent {} ``` diff --git a/static/usage/v7/select/fill/angular.md b/static/usage/v7/select/fill/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/fill/angular.md rename to static/usage/v7/select/fill/angular/example_component_html.md diff --git a/static/usage/v7/select/fill/angular/example_component_ts.md b/static/usage/v7/select/fill/angular/example_component_ts.md new file mode 100644 index 00000000000..1b377b77218 --- /dev/null +++ b/static/usage/v7/select/fill/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/select/fill/index.md b/static/usage/v7/select/fill/index.md index 393a8af448a..16a28199741 100644 --- a/static/usage/v7/select/fill/index.md +++ b/static/usage/v7/select/fill/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/select/interfaces/popover/angular.md b/static/usage/v7/select/interfaces/popover/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/interfaces/popover/angular.md rename to static/usage/v7/select/interfaces/popover/angular/example_component_html.md diff --git a/static/usage/v7/select/interfaces/popover/angular/example_component_ts.md b/static/usage/v7/select/interfaces/popover/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v7/select/interfaces/popover/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/select/interfaces/popover/index.md b/static/usage/v7/select/interfaces/popover/index.md index ae4fa7b7521..4519e559ec0 100644 --- a/static/usage/v7/select/interfaces/popover/index.md +++ b/static/usage/v7/select/interfaces/popover/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/select/justify/angular.md b/static/usage/v7/select/justify/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/justify/angular.md rename to static/usage/v7/select/justify/angular/example_component_html.md diff --git a/static/usage/v7/select/justify/angular/example_component_ts.md b/static/usage/v7/select/justify/angular/example_component_ts.md new file mode 100644 index 00000000000..edeb5fb2170 --- /dev/null +++ b/static/usage/v7/select/justify/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/select/justify/index.md b/static/usage/v7/select/justify/index.md index 17356a84665..1142c6f8dc0 100644 --- a/static/usage/v7/select/justify/index.md +++ b/static/usage/v7/select/justify/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/select/label-placement/angular.md b/static/usage/v7/select/label-placement/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/label-placement/angular.md rename to static/usage/v7/select/label-placement/angular/example_component_html.md diff --git a/static/usage/v7/select/label-placement/angular/example_component_ts.md b/static/usage/v7/select/label-placement/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v7/select/label-placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/select/label-placement/index.md b/static/usage/v7/select/label-placement/index.md index b0464726fb4..ceeb3cf6653 100644 --- a/static/usage/v7/select/label-placement/index.md +++ b/static/usage/v7/select/label-placement/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/select/label-slot/angular.md b/static/usage/v7/select/label-slot/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/label-slot/angular.md rename to static/usage/v7/select/label-slot/angular/example_component_html.md diff --git a/static/usage/v7/select/label-slot/angular/example_component_ts.md b/static/usage/v7/select/label-slot/angular/example_component_ts.md new file mode 100644 index 00000000000..a8cb5c497c5 --- /dev/null +++ b/static/usage/v7/select/label-slot/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption, IonText], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/select/label-slot/index.md b/static/usage/v7/select/label-slot/index.md index 1b25e6b83f6..cefb2b96fdc 100644 --- a/static/usage/v7/select/label-slot/index.md +++ b/static/usage/v7/select/label-slot/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/select/no-visible-label/angular.md b/static/usage/v7/select/no-visible-label/angular/example_component_html.md similarity index 100% rename from static/usage/v7/select/no-visible-label/angular.md rename to static/usage/v7/select/no-visible-label/angular/example_component_html.md diff --git a/static/usage/v7/select/no-visible-label/angular/example_component_ts.md b/static/usage/v7/select/no-visible-label/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v7/select/no-visible-label/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/select/no-visible-label/index.md b/static/usage/v7/select/no-visible-label/index.md index 214708de577..2fc29ce2679 100644 --- a/static/usage/v7/select/no-visible-label/index.md +++ b/static/usage/v7/select/no-visible-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/select/objects-as-values/multiple-selection/angular/example_component_html.md b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md index af00be1957e..361cfbad1b8 100644 --- a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md +++ b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md @@ -8,7 +8,9 @@ (ionChange)="handleChange($event)" [multiple]="true" > - {{ food.name }} + @for (food of foods; track food) { + {{ food.name }} + } diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md index c33570deec9..976de91ea50 100644 --- a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md +++ b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md @@ -1,12 +1,21 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +interface Food { + id: number; + name: string; + type: string; +} @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { - foods = [ + foods: Food[] = [ { id: 1, name: 'Apples', @@ -24,7 +33,7 @@ export class ExampleComponent { }, ]; - compareWith(o1, o2) { + compareWith(o1: Food | null, o2: Food | Food[] | null): boolean { if (!o1 || !o2) { return o1 === o2; } @@ -36,8 +45,9 @@ export class ExampleComponent { return o1.id === o2.id; } - handleChange(ev) { - console.log('Current value:', JSON.stringify(ev.target.value)); + handleChange(ev: Event) { + const target = ev.target as HTMLIonSelectElement; + console.log('Current value:', JSON.stringify(target.value)); } } ``` diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md index 7354647f224..808a9743cc2 100644 --- a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md +++ b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md @@ -7,7 +7,9 @@ placeholder="Select food" (ionChange)="handleChange($event)" > - {{ food.name }} + @for (food of foods; track food) { + {{ food.name }} + } diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md index 20d05fa847f..e984a6f6544 100644 --- a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md +++ b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md @@ -1,12 +1,21 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +interface Food { + id: number; + name: string; + type: string; +} @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { - foods = [ + foods: Food[] = [ { id: 1, name: 'Apples', @@ -24,12 +33,13 @@ export class ExampleComponent { }, ]; - compareWith(o1, o2) { + compareWith(o1: Food | null, o2: Food | null): boolean { return o1 && o2 ? o1.id === o2.id : o1 === o2; } - handleChange(ev) { - console.log('Current value:', JSON.stringify(ev.target.value)); + handleChange(ev: Event) { + const target = ev.target as HTMLIonSelectElement; + console.log('Current value:', JSON.stringify(target.value)); } } ``` diff --git a/static/usage/v7/select/start-end-slots/angular/example_component_ts.md b/static/usage/v7/select/start-end-slots/angular/example_component_ts.md index f7717b55dc1..4cdf6bc2b32 100644 --- a/static/usage/v7/select/start-end-slots/angular/example_component_ts.md +++ b/static/usage/v7/select/start-end-slots/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { eye, leaf } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { eye, leaf } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/select/typeahead/angular/app_module_ts.md b/static/usage/v7/select/typeahead/angular/app_module_ts.md deleted file mode 100644 index 0fa58037717..00000000000 --- a/static/usage/v7/select/typeahead/angular/app_module_ts.md +++ /dev/null @@ -1,19 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; - -import { IonicModule } from '@ionic/angular'; - -import { AppComponent } from './app.component'; -import { ExampleComponent } from './example.component'; - -import { TypeaheadComponent } from './typeahead.component'; - -@NgModule({ - imports: [BrowserModule, FormsModule, IonicModule.forRoot({})], - declarations: [AppComponent, ExampleComponent, TypeaheadComponent], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` diff --git a/static/usage/v7/select/typeahead/angular/example_component_ts.md b/static/usage/v7/select/typeahead/angular/example_component_ts.md index ded6fa60b0f..9276b8b13e5 100644 --- a/static/usage/v7/select/typeahead/angular/example_component_ts.md +++ b/static/usage/v7/select/typeahead/angular/example_component_ts.md @@ -1,11 +1,15 @@ ```ts import { Component, ViewChild } from '@angular/core'; -import { IonModal } from '@ionic/angular'; +import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/angular/standalone'; import { Item } from './types'; +import { TypeaheadComponent } from './typeahead.component'; + @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonItem, IonLabel, IonList, IonModal, TypeaheadComponent], }) export class ExampleComponent { @ViewChild('modal', { static: true }) modal!: IonModal; @@ -41,15 +45,23 @@ export class ExampleComponent { { text: 'Strawberry', value: 'strawberry' }, ]; - private formatData(data: string[]) { + /** + * Formats the display text based on the selected fruits. + * @param data - Array of selected fruit values + * @returns A formatted string for display + */ + private formatData(data: string[]): string { if (data.length === 1) { const fruit = this.fruits.find((fruit) => fruit.value === data[0]); - return fruit.text; + return fruit ? fruit.text : ''; } - return `${data.length} items`; } + /** + * Handles fruit selection changes and updates the selected fruits and text. + * @param fruits - Array of selected fruit values + */ fruitSelectionChanged(fruits: string[]) { this.selectedFruits = fruits; this.selectedFruitsText = this.formatData(this.selectedFruits); diff --git a/static/usage/v8/select/typeahead/angular/modal-example_component_html.md b/static/usage/v7/select/typeahead/angular/typeahead_component_html.md similarity index 90% rename from static/usage/v8/select/typeahead/angular/modal-example_component_html.md rename to static/usage/v7/select/typeahead/angular/typeahead_component_html.md index 64da05a7a9d..ed147c64254 100644 --- a/static/usage/v8/select/typeahead/angular/modal-example_component_html.md +++ b/static/usage/v7/select/typeahead/angular/typeahead_component_html.md @@ -16,11 +16,13 @@ - + @for (item of filteredItems; track item.value) { + {{ item.text }} + } ``` diff --git a/static/usage/v8/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v7/select/typeahead/angular/typeahead_component_ts.md similarity index 67% rename from static/usage/v8/select/typeahead/angular/modal-example_component_ts.md rename to static/usage/v7/select/typeahead/angular/typeahead_component_ts.md index 9bd21f1b404..f9de32444d0 100644 --- a/static/usage/v8/select/typeahead/angular/modal-example_component_ts.md +++ b/static/usage/v7/select/typeahead/angular/typeahead_component_ts.md @@ -1,11 +1,37 @@ ```ts import { Component, Input, Output, EventEmitter } from '@angular/core'; import type { OnInit } from '@angular/core'; + +import { + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonList, + IonSearchbar, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; + import { Item } from './types'; @Component({ selector: 'app-typeahead', templateUrl: 'typeahead.component.html', + imports: [ + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonList, + IonSearchbar, + IonTitle, + IonToolbar, + ], }) export class TypeaheadComponent implements OnInit { @Input() items: Item[] = []; @@ -23,10 +49,6 @@ export class TypeaheadComponent implements OnInit { this.workingSelectedValues = [...this.selectedItems]; } - trackItems(index: number, item: Item) { - return item.value; - } - cancelChanges() { this.selectionCancel.emit(); } @@ -35,8 +57,9 @@ export class TypeaheadComponent implements OnInit { this.selectionChange.emit(this.workingSelectedValues); } - searchbarInput(ev) { - this.filterList(ev.target.value); + searchbarInput(ev: Event) { + const inputElement = ev.target as HTMLInputElement; + this.filterList(inputElement.value); } /** @@ -50,7 +73,7 @@ export class TypeaheadComponent implements OnInit { * If no search query is defined, * return all options. */ - if (searchQuery === undefined) { + if (searchQuery === undefined || searchQuery.trim() === '') { this.filteredItems = [...this.items]; } else { /** @@ -59,17 +82,15 @@ export class TypeaheadComponent implements OnInit { * contain the search query as a substring. */ const normalizedQuery = searchQuery.toLowerCase(); - this.filteredItems = this.items.filter((item) => { - return item.text.toLowerCase().includes(normalizedQuery); - }); + this.filteredItems = this.items.filter((item) => item.text.toLowerCase().includes(normalizedQuery)); } } - isChecked(value: string) { - return this.workingSelectedValues.find((item) => item === value); + isChecked(value: string): boolean { + return this.workingSelectedValues.includes(value); } - checkboxChange(ev) { + checkboxChange(ev: CustomEvent<{ checked: boolean; value: string }>) { const { checked, value } = ev.detail; if (checked) { diff --git a/static/usage/v7/select/typeahead/index.md b/static/usage/v7/select/typeahead/index.md index e81d8b0aa56..86565f33705 100644 --- a/static/usage/v7/select/typeahead/index.md +++ b/static/usage/v7/select/typeahead/index.md @@ -10,11 +10,10 @@ import vue_example from './vue/example_vue.md'; import vue_types_ts from './vue/vue_types_ts.md'; import vue_typeahead_component from './vue/typeahead_component_vue.md'; -import angular_app_module_ts from './angular/app_module_ts.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_modal_example_component_ts from './angular/modal-example_component_ts.md'; -import angular_modal_example_component_html from './angular/modal-example_component_html.md'; +import angular_typeahead_component_ts from './angular/typeahead_component_ts.md'; +import angular_typeahead_component_html from './angular/typeahead_component_html.md'; import angular_types_ts from './angular/angular_types_ts.md'; +@if (loaded) { + Albums @@ -12,8 +13,8 @@ - - +} @else { + @@ -34,6 +35,7 @@ +} Toggle ``` diff --git a/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md index c74fbd4855d..1a2f83bccc9 100644 --- a/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md +++ b/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md @@ -1,5 +1,15 @@ ```ts import { Component } from '@angular/core'; +import { + IonButton, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonSkeletonText, + IonThumbnail, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { musicalNotes } from 'ionicons/icons'; @@ -8,6 +18,7 @@ import { musicalNotes } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail], }) export class ExampleComponent { public loaded = false; diff --git a/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..d4e5d48be69 --- /dev/null +++ b/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/skeleton-text/theming/css-properties/index.md b/static/usage/v7/skeleton-text/theming/css-properties/index.md index c131f6dbe19..a0c8f88ff56 100644 --- a/static/usage/v7/skeleton-text/theming/css-properties/index.md +++ b/static/usage/v7/skeleton-text/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; diff --git a/static/usage/v7/spinner/theming/colors/angular.md b/static/usage/v7/spinner/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v7/spinner/theming/colors/angular.md rename to static/usage/v7/spinner/theming/colors/angular/example_component_html.md diff --git a/static/usage/v7/spinner/theming/colors/angular/example_component_ts.md b/static/usage/v7/spinner/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..776380a6638 --- /dev/null +++ b/static/usage/v7/spinner/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSpinner } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSpinner], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/spinner/theming/colors/index.md b/static/usage/v7/spinner/theming/colors/index.md index ee82596cc0f..07a90f122d8 100644 --- a/static/usage/v7/spinner/theming/colors/index.md +++ b/static/usage/v7/spinner/theming/colors/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/spinner/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/spinner/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..776380a6638 --- /dev/null +++ b/static/usage/v7/spinner/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSpinner } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSpinner], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/spinner/theming/css-properties/index.md b/static/usage/v7/spinner/theming/css-properties/index.md index 22b93f802b0..1a2f60f7b85 100644 --- a/static/usage/v7/spinner/theming/css-properties/index.md +++ b/static/usage/v7/spinner/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; diff --git a/static/usage/v7/split-pane/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/split-pane/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..1e20f96fbf7 --- /dev/null +++ b/static/usage/v7/split-pane/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/split-pane/theming/css-properties/index.md b/static/usage/v7/split-pane/theming/css-properties/index.md index 336074baaaf..a89d6e83050 100644 --- a/static/usage/v7/split-pane/theming/css-properties/index.md +++ b/static/usage/v7/split-pane/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; + + + ``` diff --git a/static/usage/v7/tabs/router/angular/app_component_ts.md b/static/usage/v7/tabs/router/angular/app_component_ts.md new file mode 100644 index 00000000000..69438d5bb07 --- /dev/null +++ b/static/usage/v7/tabs/router/angular/app_component_ts.md @@ -0,0 +1,14 @@ +```ts +import { Component } from '@angular/core'; +import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'], + imports: [IonApp, IonRouterOutlet], +}) +export class AppComponent { + constructor() {} +} +``` diff --git a/static/usage/v7/tabs/router/angular/app_module_ts.md b/static/usage/v7/tabs/router/angular/app_module_ts.md deleted file mode 100644 index e36b8c6316e..00000000000 --- a/static/usage/v7/tabs/router/angular/app_module_ts.md +++ /dev/null @@ -1,19 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; - -import { IonicModule } from '@ionic/angular'; - -import { AppComponent } from './app.component'; -import { ExampleComponent } from './example.component'; - -import { AppRoutingModule } from './app-routing.module'; - -@NgModule({ - imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot({})], - declarations: [AppComponent, ExampleComponent], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` diff --git a/static/usage/v7/tabs/router/angular/app_routes_ts.md b/static/usage/v7/tabs/router/angular/app_routes_ts.md new file mode 100644 index 00000000000..fd959555b28 --- /dev/null +++ b/static/usage/v7/tabs/router/angular/app_routes_ts.md @@ -0,0 +1,39 @@ +```ts +import { Routes } from '@angular/router'; +import { ExampleComponent } from './example.component'; + +export const routes: Routes = [ + { + path: 'example', + component: ExampleComponent, + children: [ + { + path: 'home', + loadComponent: () => import('./home/home-page.component').then((m) => m.HomePageComponent), + }, + { + path: 'library', + loadComponent: () => import('./library/library-page.component').then((m) => m.LibraryPageComponent), + }, + { + path: 'radio', + loadComponent: () => import('./radio/radio-page.component').then((m) => m.RadioPageComponent), + }, + { + path: 'search', + loadComponent: () => import('./search/search-page.component').then((m) => m.SearchPageComponent), + }, + { + path: '', + redirectTo: '/example/home', + pathMatch: 'full', + }, + ], + }, + { + path: '', + redirectTo: '/example/home', + pathMatch: 'full', + }, +]; +``` diff --git a/static/usage/v7/tabs/router/angular/app_routing_module_ts.md b/static/usage/v7/tabs/router/angular/app_routing_module_ts.md deleted file mode 100644 index 7ff1067030f..00000000000 --- a/static/usage/v7/tabs/router/angular/app_routing_module_ts.md +++ /dev/null @@ -1,42 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { ExampleComponent } from './example.component'; - -@NgModule({ - imports: [ - RouterModule.forRoot([ - { - path: '', - component: ExampleComponent, - children: [ - { - path: '', - pathMatch: 'full', - redirectTo: 'home', - }, - { - path: 'home', - loadChildren: () => import('./home/home-page.module').then((m) => m.HomePageModule), - }, - { - path: 'radio', - loadChildren: () => import('./radio/radio-page.module').then((m) => m.RadioPageModule), - }, - { - path: 'library', - loadChildren: () => import('./library/library-page.module').then((m) => m.LibraryPageModule), - }, - { - path: 'search', - loadChildren: () => import('./search/search-page.module').then((m) => m.SearchPageModule), - }, - ], - }, - ]), - ], - exports: [RouterModule], -}) -export class AppRoutingModule {} -``` diff --git a/static/usage/v7/tabs/router/angular/example_component_ts.md b/static/usage/v7/tabs/router/angular/example_component_ts.md index 7762322ce9d..84c7d490b48 100644 --- a/static/usage/v7/tabs/router/angular/example_component_ts.md +++ b/static/usage/v7/tabs/router/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonIcon, IonTabBar, IonTabButton, IonTabs } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { library, playCircle, radio, search } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { library, playCircle, radio, search } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonIcon, IonTabBar, IonTabButton, IonTabs], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/tabs/router/angular/home_page_component_ts.md b/static/usage/v7/tabs/router/angular/home_page_component_ts.md index 9e2ef0a3e8c..7d3d3446815 100644 --- a/static/usage/v7/tabs/router/angular/home_page_component_ts.md +++ b/static/usage/v7/tabs/router/angular/home_page_component_ts.md @@ -1,9 +1,11 @@ ```ts import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; @Component({ selector: 'app-home-page', templateUrl: './home-page.component.html', + imports: [IonContent, IonHeader, IonTitle, IonToolbar], }) export class HomePageComponent {} ``` diff --git a/static/usage/v7/tabs/router/angular/home_page_module_ts.md b/static/usage/v7/tabs/router/angular/home_page_module_ts.md deleted file mode 100644 index 2a1fb15b460..00000000000 --- a/static/usage/v7/tabs/router/angular/home_page_module_ts.md +++ /dev/null @@ -1,14 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { HomePageComponent } from './home-page.component'; - -import { IonicModule } from '@ionic/angular'; - -@NgModule({ - imports: [IonicModule, RouterModule.forChild([{ path: '', component: HomePageComponent }])], - declarations: [HomePageComponent], - exports: [HomePageComponent], -}) -export class HomePageModule {} -``` diff --git a/static/usage/v7/tabs/router/angular/library_page_component_ts.md b/static/usage/v7/tabs/router/angular/library_page_component_ts.md index f5a92a4868a..072cd0a779f 100644 --- a/static/usage/v7/tabs/router/angular/library_page_component_ts.md +++ b/static/usage/v7/tabs/router/angular/library_page_component_ts.md @@ -1,9 +1,11 @@ ```ts import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; @Component({ selector: 'app-library-page', templateUrl: './library-page.component.html', + imports: [IonContent, IonHeader, IonTitle, IonToolbar], }) export class LibraryPageComponent {} ``` diff --git a/static/usage/v7/tabs/router/angular/library_page_module_ts.md b/static/usage/v7/tabs/router/angular/library_page_module_ts.md deleted file mode 100644 index 8e2ab48cf39..00000000000 --- a/static/usage/v7/tabs/router/angular/library_page_module_ts.md +++ /dev/null @@ -1,14 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { IonicModule } from '@ionic/angular'; - -import { LibraryPageComponent } from './library-page.component'; - -@NgModule({ - imports: [IonicModule, RouterModule.forChild([{ path: '', component: LibraryPageComponent }])], - declarations: [LibraryPageComponent], - exports: [LibraryPageComponent], -}) -export class LibraryPageModule {} -``` diff --git a/static/usage/v7/tabs/router/angular/radio_page_component_ts.md b/static/usage/v7/tabs/router/angular/radio_page_component_ts.md index d29209c00dd..63273c02807 100644 --- a/static/usage/v7/tabs/router/angular/radio_page_component_ts.md +++ b/static/usage/v7/tabs/router/angular/radio_page_component_ts.md @@ -1,9 +1,11 @@ ```ts import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; @Component({ selector: 'app-radio-page', templateUrl: './radio-page.component.html', + imports: [IonContent, IonHeader, IonTitle, IonToolbar], }) export class RadioPageComponent {} ``` diff --git a/static/usage/v7/tabs/router/angular/radio_page_module_ts.md b/static/usage/v7/tabs/router/angular/radio_page_module_ts.md deleted file mode 100644 index f50a0088632..00000000000 --- a/static/usage/v7/tabs/router/angular/radio_page_module_ts.md +++ /dev/null @@ -1,14 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { RadioPageComponent } from './radio-page.component'; - -import { IonicModule } from '@ionic/angular'; - -@NgModule({ - imports: [IonicModule, RouterModule.forChild([{ path: '', component: RadioPageComponent }])], - declarations: [RadioPageComponent], - exports: [RadioPageComponent], -}) -export class RadioPageModule {} -``` diff --git a/static/usage/v7/tabs/router/angular/search_page_component_ts.md b/static/usage/v7/tabs/router/angular/search_page_component_ts.md index bd6e723d332..00eb12be824 100644 --- a/static/usage/v7/tabs/router/angular/search_page_component_ts.md +++ b/static/usage/v7/tabs/router/angular/search_page_component_ts.md @@ -1,9 +1,11 @@ ```ts import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; @Component({ selector: 'app-search-page', templateUrl: './search-page.component.html', + imports: [IonContent, IonHeader, IonTitle, IonToolbar], }) export class SearchPageComponent {} ``` diff --git a/static/usage/v7/tabs/router/angular/search_page_module_ts.md b/static/usage/v7/tabs/router/angular/search_page_module_ts.md deleted file mode 100644 index a1d599c5d9b..00000000000 --- a/static/usage/v7/tabs/router/angular/search_page_module_ts.md +++ /dev/null @@ -1,14 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { SearchPageComponent } from './search-page.component'; - -import { IonicModule } from '@ionic/angular'; - -@NgModule({ - imports: [IonicModule, RouterModule.forChild([{ path: '', component: SearchPageComponent }])], - declarations: [SearchPageComponent], - exports: [SearchPageComponent], -}) -export class SearchPageModule {} -``` diff --git a/static/usage/v7/tabs/router/index.md b/static/usage/v7/tabs/router/index.md index 072832ae972..c11fd499691 100644 --- a/static/usage/v7/tabs/router/index.md +++ b/static/usage/v7/tabs/router/index.md @@ -3,26 +3,22 @@ import Playground from '@site/src/components/global/Playground'; import javascript_index_html from './javascript/index_html.md'; import javascript_index_ts from './javascript/index_ts.md'; +import angular_app_routes_ts from './angular/app_routes_ts.md'; import angular_app_component_html from './angular/app_component_html.md'; -import angular_app_module_ts from './angular/app_module_ts.md'; -import angular_app_routing_module_ts from './angular/app_routing_module_ts.md'; +import angular_app_component_ts from './angular/app_component_ts.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_home_page_module_ts from './angular/home_page_module_ts.md'; import angular_home_page_component_ts from './angular/home_page_component_ts.md'; import angular_home_page_component_html from './angular/home_page_component_html.md'; -import angular_library_page_module_ts from './angular/library_page_module_ts.md'; import angular_library_page_component_ts from './angular/library_page_component_ts.md'; import angular_library_page_component_html from './angular/library_page_component_html.md'; -import angular_radio_page_module_ts from './angular/radio_page_module_ts.md'; import angular_radio_page_component_ts from './angular/radio_page_component_ts.md'; import angular_radio_page_component_html from './angular/radio_page_component_html.md'; -import angular_search_page_module_ts from './angular/search_page_module_ts.md'; import angular_search_page_component_ts from './angular/search_page_component_ts.md'; import angular_search_page_component_html from './angular/search_page_component_html.md'; @@ -54,24 +50,20 @@ import react_search_page_tsx from './react/search_page_tsx.md'; }, angular: { files: { + 'src/global.css': angular_global_css, + 'src/app/app.routes.ts': angular_app_routes_ts, + 'src/app/app.component.html': angular_app_component_html, + 'src/app/app.component.ts': angular_app_component_ts, 'src/app/example.component.html': angular_example_component_html, 'src/app/example.component.ts': angular_example_component_ts, 'src/app/home/home-page.component.ts': angular_home_page_component_ts, 'src/app/home/home-page.component.html': angular_home_page_component_html, - 'src/global.css': angular_global_css, - 'src/app/home/home-page.module.ts': angular_home_page_module_ts, 'src/app/library/library-page.component.ts': angular_library_page_component_ts, 'src/app/library/library-page.component.html': angular_library_page_component_html, - 'src/app/library/library-page.module.ts': angular_library_page_module_ts, 'src/app/radio/radio-page.component.ts': angular_radio_page_component_ts, 'src/app/radio/radio-page.component.html': angular_radio_page_component_html, - 'src/app/radio/radio-page.module.ts': angular_radio_page_module_ts, 'src/app/search/search-page.component.ts': angular_search_page_component_ts, 'src/app/search/search-page.component.html': angular_search_page_component_html, - 'src/app/search/search-page.module.ts': angular_search_page_module_ts, - 'src/app/app.module.ts': angular_app_module_ts, - 'src/app/app.component.html': angular_app_component_html, - 'src/app/app-routing.module.ts': angular_app_routing_module_ts, }, }, vue: { diff --git a/static/usage/v7/text/basic/angular/example_component_ts.md b/static/usage/v7/text/basic/angular/example_component_ts.md index 122ee98dfbe..b49066098d3 100644 --- a/static/usage/v7/text/basic/angular/example_component_ts.md +++ b/static/usage/v7/text/basic/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonIcon, IonText } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { warning } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { warning } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonIcon, IonText], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/textarea/autogrow/angular.md b/static/usage/v7/textarea/autogrow/angular/example_component_html.md similarity index 100% rename from static/usage/v7/textarea/autogrow/angular.md rename to static/usage/v7/textarea/autogrow/angular/example_component_html.md diff --git a/static/usage/v7/textarea/autogrow/angular/example_component_ts.md b/static/usage/v7/textarea/autogrow/angular/example_component_ts.md new file mode 100644 index 00000000000..a407eaef3ba --- /dev/null +++ b/static/usage/v7/textarea/autogrow/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonTextarea } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/textarea/autogrow/index.md b/static/usage/v7/textarea/autogrow/index.md index 9dd79cbd7cd..043d89b9f45 100644 --- a/static/usage/v7/textarea/autogrow/index.md +++ b/static/usage/v7/textarea/autogrow/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/textarea/basic/angular.md b/static/usage/v7/textarea/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/textarea/basic/angular.md rename to static/usage/v7/textarea/basic/angular/example_component_html.md diff --git a/static/usage/v7/textarea/basic/angular/example_component_ts.md b/static/usage/v7/textarea/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..5e8570222df --- /dev/null +++ b/static/usage/v7/textarea/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/textarea/basic/index.md b/static/usage/v7/textarea/basic/index.md index 3070fbea859..181f202fdc9 100644 --- a/static/usage/v7/textarea/basic/index.md +++ b/static/usage/v7/textarea/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/textarea/clear-on-edit/angular.md b/static/usage/v7/textarea/clear-on-edit/angular/example_component_html.md similarity index 100% rename from static/usage/v7/textarea/clear-on-edit/angular.md rename to static/usage/v7/textarea/clear-on-edit/angular/example_component_html.md diff --git a/static/usage/v7/textarea/clear-on-edit/angular/example_component_ts.md b/static/usage/v7/textarea/clear-on-edit/angular/example_component_ts.md new file mode 100644 index 00000000000..ddae482aec7 --- /dev/null +++ b/static/usage/v7/textarea/clear-on-edit/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonTextarea } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/textarea/clear-on-edit/index.md b/static/usage/v7/textarea/clear-on-edit/index.md index cc1e09366e2..d69f619b8b7 100644 --- a/static/usage/v7/textarea/clear-on-edit/index.md +++ b/static/usage/v7/textarea/clear-on-edit/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/textarea/counter/angular/example_component_ts.md b/static/usage/v7/textarea/counter/angular/example_component_ts.md index 2c08dc06fc2..2b46bbe6dad 100644 --- a/static/usage/v7/textarea/counter/angular/example_component_ts.md +++ b/static/usage/v7/textarea/counter/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonTextarea } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonTextarea], }) export class ExampleComponent { customCounterFormatter(inputLength: number, maxLength: number) { diff --git a/static/usage/v7/textarea/fill/angular.md b/static/usage/v7/textarea/fill/angular/example_component_html.md similarity index 100% rename from static/usage/v7/textarea/fill/angular.md rename to static/usage/v7/textarea/fill/angular/example_component_html.md diff --git a/static/usage/v7/textarea/fill/angular/example_component_ts.md b/static/usage/v7/textarea/fill/angular/example_component_ts.md new file mode 100644 index 00000000000..ddae482aec7 --- /dev/null +++ b/static/usage/v7/textarea/fill/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonTextarea } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/textarea/fill/index.md b/static/usage/v7/textarea/fill/index.md index bfc5b54da5d..50cb3a62279 100644 --- a/static/usage/v7/textarea/fill/index.md +++ b/static/usage/v7/textarea/fill/index.md @@ -3,12 +3,24 @@ 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/textarea/helper-error/angular.md b/static/usage/v7/textarea/helper-error/angular/example_component_html.md similarity index 100% rename from static/usage/v7/textarea/helper-error/angular.md rename to static/usage/v7/textarea/helper-error/angular/example_component_html.md diff --git a/static/usage/v7/textarea/helper-error/angular/example_component_ts.md b/static/usage/v7/textarea/helper-error/angular/example_component_ts.md new file mode 100644 index 00000000000..ddae482aec7 --- /dev/null +++ b/static/usage/v7/textarea/helper-error/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonTextarea } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/textarea/helper-error/index.md b/static/usage/v7/textarea/helper-error/index.md index 5d4ca92e487..c8b578ce9c7 100644 --- a/static/usage/v7/textarea/helper-error/index.md +++ b/static/usage/v7/textarea/helper-error/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/textarea/label-slot/angular.md b/static/usage/v7/textarea/label-slot/angular/example_component_html.md similarity index 100% rename from static/usage/v7/textarea/label-slot/angular.md rename to static/usage/v7/textarea/label-slot/angular/example_component_html.md diff --git a/static/usage/v7/textarea/label-slot/angular/example_component_ts.md b/static/usage/v7/textarea/label-slot/angular/example_component_ts.md new file mode 100644 index 00000000000..874d21ed018 --- /dev/null +++ b/static/usage/v7/textarea/label-slot/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonText, IonTextarea } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonText, IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/textarea/label-slot/index.md b/static/usage/v7/textarea/label-slot/index.md index a9f9136612b..824120c8388 100644 --- a/static/usage/v7/textarea/label-slot/index.md +++ b/static/usage/v7/textarea/label-slot/index.md @@ -3,6 +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/textarea/no-visible-label/angular.md b/static/usage/v7/textarea/no-visible-label/angular/example_component_html.md similarity index 100% rename from static/usage/v7/textarea/no-visible-label/angular.md rename to static/usage/v7/textarea/no-visible-label/angular/example_component_html.md diff --git a/static/usage/v7/textarea/no-visible-label/angular/example_component_ts.md b/static/usage/v7/textarea/no-visible-label/angular/example_component_ts.md new file mode 100644 index 00000000000..5e8570222df --- /dev/null +++ b/static/usage/v7/textarea/no-visible-label/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/textarea/no-visible-label/index.md b/static/usage/v7/textarea/no-visible-label/index.md index 411fc52d502..0928d01334b 100644 --- a/static/usage/v7/textarea/no-visible-label/index.md +++ b/static/usage/v7/textarea/no-visible-label/index.md @@ -3,6 +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/textarea/start-end-slots/angular/example_component_ts.md b/static/usage/v7/textarea/start-end-slots/angular/example_component_ts.md index 899f7a826a3..c110f8c1596 100644 --- a/static/usage/v7/textarea/start-end-slots/angular/example_component_ts.md +++ b/static/usage/v7/textarea/start-end-slots/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonIcon, IonItem, IonList, IonTextarea } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { eye, lockClosed } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { eye, lockClosed } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon, IonItem, IonList, IonTextarea], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v7/textarea/theming/angular/example_component_ts.md b/static/usage/v7/textarea/theming/angular/example_component_ts.md new file mode 100644 index 00000000000..ddae482aec7 --- /dev/null +++ b/static/usage/v7/textarea/theming/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonTextarea } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/textarea/theming/index.md b/static/usage/v7/textarea/theming/index.md index 3a50362dcee..f128fc8e772 100644 --- a/static/usage/v7/textarea/theming/index.md +++ b/static/usage/v7/textarea/theming/index.md @@ -9,6 +9,7 @@ import vue from './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 angular_global_css from './angular/global_css.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/thumbnail/item/angular.md b/static/usage/v7/thumbnail/item/angular/example_component_html.md similarity index 100% rename from static/usage/v7/thumbnail/item/angular.md rename to static/usage/v7/thumbnail/item/angular/example_component_html.md diff --git a/static/usage/v7/thumbnail/item/angular/example_component_ts.md b/static/usage/v7/thumbnail/item/angular/example_component_ts.md new file mode 100644 index 00000000000..fd6269b877c --- /dev/null +++ b/static/usage/v7/thumbnail/item/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonThumbnail } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonThumbnail], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/thumbnail/item/index.md b/static/usage/v7/thumbnail/item/index.md index 89a2a19fb8c..87dd7e8cac7 100644 --- a/static/usage/v7/thumbnail/item/index.md +++ b/static/usage/v7/thumbnail/item/index.md @@ -3,6 +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/thumbnail/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..a82583c287d --- /dev/null +++ b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonThumbnail } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonThumbnail], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/thumbnail/theming/css-properties/index.md b/static/usage/v7/thumbnail/theming/css-properties/index.md index 36674cc72c0..905f7a2555d 100644 --- a/static/usage/v7/thumbnail/theming/css-properties/index.md +++ b/static/usage/v7/thumbnail/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; diff --git a/static/usage/v7/toast/inline/basic/angular.md b/static/usage/v7/toast/inline/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/toast/inline/basic/angular.md rename to static/usage/v7/toast/inline/basic/angular/example_component_html.md diff --git a/static/usage/v7/toast/inline/basic/angular/example_component_ts.md b/static/usage/v7/toast/inline/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..4e602aa6713 --- /dev/null +++ b/static/usage/v7/toast/inline/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/toast/inline/basic/index.md b/static/usage/v7/toast/inline/basic/index.md index aa61cab896b..73f11ad2105 100644 --- a/static/usage/v7/toast/inline/basic/index.md +++ b/static/usage/v7/toast/inline/basic/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/toggle/basic/angular.md b/static/usage/v7/toggle/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v7/toggle/basic/angular.md rename to static/usage/v7/toggle/basic/angular/example_component_html.md diff --git a/static/usage/v7/toggle/basic/angular/example_component_ts.md b/static/usage/v7/toggle/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..7bcffbfd88f --- /dev/null +++ b/static/usage/v7/toggle/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonToggle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/toggle/basic/index.md b/static/usage/v7/toggle/basic/index.md index 565b56f5591..a161ca47460 100644 --- a/static/usage/v7/toggle/basic/index.md +++ b/static/usage/v7/toggle/basic/index.md @@ -3,6 +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/toggle/justify/angular.md b/static/usage/v7/toggle/justify/angular/example_component_html.md similarity index 100% rename from static/usage/v7/toggle/justify/angular.md rename to static/usage/v7/toggle/justify/angular/example_component_html.md diff --git a/static/usage/v7/toggle/justify/angular/example_component_ts.md b/static/usage/v7/toggle/justify/angular/example_component_ts.md new file mode 100644 index 00000000000..80a17959d02 --- /dev/null +++ b/static/usage/v7/toggle/justify/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonToggle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/toggle/justify/index.md b/static/usage/v7/toggle/justify/index.md index 63ae27756f0..d8ed39bb741 100644 --- a/static/usage/v7/toggle/justify/index.md +++ b/static/usage/v7/toggle/justify/index.md @@ -3,6 +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/toggle/label-placement/angular.md b/static/usage/v7/toggle/label-placement/angular/example_component_html.md similarity index 100% rename from static/usage/v7/toggle/label-placement/angular.md rename to static/usage/v7/toggle/label-placement/angular/example_component_html.md diff --git a/static/usage/v7/toggle/label-placement/angular/example_component_ts.md b/static/usage/v7/toggle/label-placement/angular/example_component_ts.md new file mode 100644 index 00000000000..7bcffbfd88f --- /dev/null +++ b/static/usage/v7/toggle/label-placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonToggle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/toggle/label-placement/index.md b/static/usage/v7/toggle/label-placement/index.md index 160f05db920..61da4858098 100644 --- a/static/usage/v7/toggle/label-placement/index.md +++ b/static/usage/v7/toggle/label-placement/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/toggle/list/angular.md b/static/usage/v7/toggle/list/angular/example_component_html.md similarity index 100% rename from static/usage/v7/toggle/list/angular.md rename to static/usage/v7/toggle/list/angular/example_component_html.md diff --git a/static/usage/v7/toggle/list/angular/example_component_ts.md b/static/usage/v7/toggle/list/angular/example_component_ts.md new file mode 100644 index 00000000000..80a17959d02 --- /dev/null +++ b/static/usage/v7/toggle/list/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonToggle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/toggle/list/index.md b/static/usage/v7/toggle/list/index.md index ad3aef2e129..91f18ff10df 100644 --- a/static/usage/v7/toggle/list/index.md +++ b/static/usage/v7/toggle/list/index.md @@ -3,6 +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/toggle/on-off/angular.md b/static/usage/v7/toggle/on-off/angular/example_component_html.md similarity index 100% rename from static/usage/v7/toggle/on-off/angular.md rename to static/usage/v7/toggle/on-off/angular/example_component_html.md diff --git a/static/usage/v7/toggle/on-off/angular/example_component_ts.md b/static/usage/v7/toggle/on-off/angular/example_component_ts.md new file mode 100644 index 00000000000..7bcffbfd88f --- /dev/null +++ b/static/usage/v7/toggle/on-off/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonToggle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/toggle/on-off/index.md b/static/usage/v7/toggle/on-off/index.md index 00a4e4800ad..f7660455a4c 100644 --- a/static/usage/v7/toggle/on-off/index.md +++ b/static/usage/v7/toggle/on-off/index.md @@ -3,6 +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/toggle/theming/colors/angular.md b/static/usage/v7/toggle/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v7/toggle/theming/colors/angular.md rename to static/usage/v7/toggle/theming/colors/angular/example_component_html.md diff --git a/static/usage/v7/toggle/theming/colors/angular/example_component_ts.md b/static/usage/v7/toggle/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..7bcffbfd88f --- /dev/null +++ b/static/usage/v7/toggle/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonToggle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/toggle/theming/colors/index.md b/static/usage/v7/toggle/theming/colors/index.md index e67d2cf0693..af9aa6700ff 100644 --- a/static/usage/v7/toggle/theming/colors/index.md +++ b/static/usage/v7/toggle/theming/colors/index.md @@ -3,6 +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/toggle/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/toggle/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..7bcffbfd88f --- /dev/null +++ b/static/usage/v7/toggle/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonToggle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/toggle/theming/css-properties/index.md b/static/usage/v7/toggle/theming/css-properties/index.md index b7f767691f7..fceacaf0007 100644 --- a/static/usage/v7/toggle/theming/css-properties/index.md +++ b/static/usage/v7/toggle/theming/css-properties/index.md @@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md'; import vue from './vue.md'; -import angular_example_component_css from './angular/example_component_css.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'; diff --git a/static/usage/v7/toolbar/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/toolbar/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..680c14e0481 --- /dev/null +++ b/static/usage/v7/toolbar/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/toolbar/theming/css-properties/index.md b/static/usage/v7/toolbar/theming/css-properties/index.md index 9ca22f52d07..1e7377339cd 100644 --- a/static/usage/v7/toolbar/theming/css-properties/index.md +++ b/static/usage/v7/toolbar/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; diff --git a/static/usage/v8/accordion/basic/angular.md b/static/usage/v8/accordion/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/accordion/basic/angular.md rename to static/usage/v8/accordion/basic/angular/example_component_html.md diff --git a/static/usage/v8/accordion/basic/angular/example_component_ts.md b/static/usage/v8/accordion/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..b1a1813cc13 --- /dev/null +++ b/static/usage/v8/accordion/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/accordion/basic/index.md b/static/usage/v8/accordion/basic/index.md index 2f685438837..8e59be87244 100644 --- a/static/usage/v8/accordion/basic/index.md +++ b/static/usage/v8/accordion/basic/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'; - - - First Accordion - -
First Content
- - - - Second Accordion - -
Second Content
- - - - Third Accordion - -
Third Content
- - -``` diff --git a/static/usage/v8/accordion/disable-group/demo.html b/static/usage/v8/accordion/disable-group/demo.html deleted file mode 100644 index 2b9dd566264..00000000000 --- a/static/usage/v8/accordion/disable-group/demo.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - Button - - - - - - - - - -
- - - - First Accordion - -
First Content
- - - - Second Accordion - -
Second Content
- - - - Third Accordion - -
Third Content
- - -
- - - - diff --git a/static/usage/v8/accordion/disable-group/index.md b/static/usage/v8/accordion/disable-group/index.md deleted file mode 100644 index 8b7c022593e..00000000000 --- a/static/usage/v8/accordion/disable-group/index.md +++ /dev/null @@ -1,17 +0,0 @@ -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'; - - diff --git a/static/usage/v8/accordion/disable-group/javascript.md b/static/usage/v8/accordion/disable-group/javascript.md deleted file mode 100644 index 163641a544c..00000000000 --- a/static/usage/v8/accordion/disable-group/javascript.md +++ /dev/null @@ -1,22 +0,0 @@ -```html - - - - First Accordion - -
First Content
- - - - Second Accordion - -
Second Content
- - - - Third Accordion - -
Third Content
- - -``` diff --git a/static/usage/v8/accordion/disable-group/react.md b/static/usage/v8/accordion/disable-group/react.md deleted file mode 100644 index b2ff09b5fe4..00000000000 --- a/static/usage/v8/accordion/disable-group/react.md +++ /dev/null @@ -1,35 +0,0 @@ -```tsx -import React from 'react'; -import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; -function Example() { - return ( - - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - - ); -} -export default Example; -``` diff --git a/static/usage/v8/accordion/disable-group/vue.md b/static/usage/v8/accordion/disable-group/vue.md deleted file mode 100644 index 6c9e3567845..00000000000 --- a/static/usage/v8/accordion/disable-group/vue.md +++ /dev/null @@ -1,37 +0,0 @@ -```html - - - -``` diff --git a/static/usage/v8/accordion/disable/group/angular.md b/static/usage/v8/accordion/disable/group/angular.md deleted file mode 100644 index 5c4cf3b51b3..00000000000 --- a/static/usage/v8/accordion/disable/group/angular.md +++ /dev/null @@ -1,22 +0,0 @@ -```html - - - - First Accordion - -
First Content
- - - - Second Accordion - -
Second Content
- - - - Third Accordion - -
Third Content
- - -``` diff --git a/static/usage/v7/accordion/disable/group/angular.md b/static/usage/v8/accordion/disable/group/angular/example_component_html.md similarity index 100% rename from static/usage/v7/accordion/disable/group/angular.md rename to static/usage/v8/accordion/disable/group/angular/example_component_html.md diff --git a/static/usage/v8/accordion/disable/group/angular/example_component_ts.md b/static/usage/v8/accordion/disable/group/angular/example_component_ts.md new file mode 100644 index 00000000000..b1a1813cc13 --- /dev/null +++ b/static/usage/v8/accordion/disable/group/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/accordion/disable/group/index.md b/static/usage/v8/accordion/disable/group/index.md index df2ebb1afc5..a19686a17f6 100644 --- a/static/usage/v8/accordion/disable/group/index.md +++ b/static/usage/v8/accordion/disable/group/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/accordion/disable/individual/angular.md b/static/usage/v8/accordion/disable/individual/angular/example_component_html.md similarity index 100% rename from static/usage/v8/accordion/disable/individual/angular.md rename to static/usage/v8/accordion/disable/individual/angular/example_component_html.md diff --git a/static/usage/v8/accordion/disable/individual/angular/example_component_ts.md b/static/usage/v8/accordion/disable/individual/angular/example_component_ts.md new file mode 100644 index 00000000000..b1a1813cc13 --- /dev/null +++ b/static/usage/v8/accordion/disable/individual/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/accordion/disable/individual/index.md b/static/usage/v8/accordion/disable/individual/index.md index 34e31108057..710beaa836d 100644 --- a/static/usage/v8/accordion/disable/individual/index.md +++ b/static/usage/v8/accordion/disable/individual/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'; { + accordionGroupChange = (ev: CustomEvent) => { const collapsedItems = this.values.filter((value) => value !== ev.detail.value); const selectedValue = ev.detail.value; diff --git a/static/usage/v8/accordion/multiple/angular.md b/static/usage/v8/accordion/multiple/angular/example_component_html.md similarity index 100% rename from static/usage/v8/accordion/multiple/angular.md rename to static/usage/v8/accordion/multiple/angular/example_component_html.md diff --git a/static/usage/v8/accordion/multiple/angular/example_component_ts.md b/static/usage/v8/accordion/multiple/angular/example_component_ts.md new file mode 100644 index 00000000000..b1a1813cc13 --- /dev/null +++ b/static/usage/v8/accordion/multiple/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/accordion/multiple/index.md b/static/usage/v8/accordion/multiple/index.md index 0e1104ea9a6..444b3bab7cc 100644 --- a/static/usage/v8/accordion/multiple/index.md +++ b/static/usage/v8/accordion/multiple/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/accordion/toggle/angular/example_component_ts.md b/static/usage/v8/accordion/toggle/angular/example_component_ts.md index bdcac1d862f..3afda996a1d 100644 --- a/static/usage/v8/accordion/toggle/angular/example_component_ts.md +++ b/static/usage/v8/accordion/toggle/angular/example_component_ts.md @@ -1,13 +1,15 @@ ```ts import { Component, ViewChild } from '@angular/core'; -import { IonAccordionGroup } from '@ionic/angular'; +import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel], }) export class ExampleComponent { - @ViewChild('accordionGroup', { static: true }) accordionGroup: IonAccordionGroup; + @ViewChild('accordionGroup', { static: true }) accordionGroup!: IonAccordionGroup; toggleAccordion = () => { const nativeEl = this.accordionGroup; diff --git a/static/usage/v8/action-sheet/controller/angular/example_component_ts.md b/static/usage/v8/action-sheet/controller/angular/example_component_ts.md index c7ecc272663..7257bcb45e6 100644 --- a/static/usage/v8/action-sheet/controller/angular/example_component_ts.md +++ b/static/usage/v8/action-sheet/controller/angular/example_component_ts.md @@ -1,11 +1,12 @@ ```ts import { Component } from '@angular/core'; - -import { ActionSheetController } from '@ionic/angular'; +import { ActionSheetController, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], }) export class ExampleComponent { constructor(private actionSheetCtrl: ActionSheetController) {} diff --git a/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_ts.md b/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_ts.md index 78d9ddf05c8..df6c89aabe0 100644 --- a/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_ts.md +++ b/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonActionSheet, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonActionSheet, IonButton], }) export class ExampleComponent { isActionSheetOpen = false; diff --git a/static/usage/v8/action-sheet/inline/trigger/angular/example_component_ts.md b/static/usage/v8/action-sheet/inline/trigger/angular/example_component_ts.md index f991151c4a1..082f779fe19 100644 --- a/static/usage/v8/action-sheet/inline/trigger/angular/example_component_ts.md +++ b/static/usage/v8/action-sheet/inline/trigger/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonActionSheet, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonActionSheet, IonButton], }) export class ExampleComponent { public actionSheetButtons = [ diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_ts.md b/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_ts.md index a38c0b92307..f0f7fcc8d50 100644 --- a/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_ts.md +++ b/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_ts.md @@ -1,10 +1,13 @@ ```ts import { Component } from '@angular/core'; +import { IonActionSheet, IonButton } from '@ionic/angular/standalone'; +import type { OverlayEventDetail } from '@ionic/core'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['./example.component.css'], + imports: [IonActionSheet, IonButton], }) export class ExampleComponent { public actionSheetButtons = [ @@ -32,8 +35,8 @@ export class ExampleComponent { constructor() {} - logResult(ev) { - console.log(JSON.stringify(ev.detail, null, 2)); + logResult(event: CustomEvent>) { + console.log(JSON.stringify(event.detail, null, 2)); } } ``` diff --git a/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_ts.md index d9714abb668..709135c1c1f 100644 --- a/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_ts.md +++ b/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonActionSheet, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['./example.component.css'], + imports: [IonActionSheet, IonButton], }) export class ExampleComponent { public actionSheetButtons = [ diff --git a/static/usage/v8/action-sheet/theming/styling/angular/example_component_ts.md b/static/usage/v8/action-sheet/theming/styling/angular/example_component_ts.md index d9714abb668..709135c1c1f 100644 --- a/static/usage/v8/action-sheet/theming/styling/angular/example_component_ts.md +++ b/static/usage/v8/action-sheet/theming/styling/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonActionSheet, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['./example.component.css'], + imports: [IonActionSheet, IonButton], }) export class ExampleComponent { public actionSheetButtons = [ diff --git a/static/usage/v8/alert/buttons/angular/example_component_ts.md b/static/usage/v8/alert/buttons/angular/example_component_ts.md index 20858d60e46..55be132d670 100644 --- a/static/usage/v8/alert/buttons/angular/example_component_ts.md +++ b/static/usage/v8/alert/buttons/angular/example_component_ts.md @@ -1,9 +1,13 @@ ```ts import { Component } from '@angular/core'; +import { IonAlert, IonButton } from '@ionic/angular/standalone'; +import type { OverlayEventDetail } from '@ionic/core'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAlert, IonButton], }) export class ExampleComponent { public alertButtons = [ @@ -23,7 +27,8 @@ export class ExampleComponent { }, ]; - setResult(ev) { + setResult(event: Event) { + const ev = event as CustomEvent>; console.log(`Dismissed with role: ${ev.detail.role}`); } } diff --git a/static/usage/v8/alert/customization/angular/example_component_ts.md b/static/usage/v8/alert/customization/angular/example_component_ts.md index 51552ff9852..ebfd969430e 100644 --- a/static/usage/v8/alert/customization/angular/example_component_ts.md +++ b/static/usage/v8/alert/customization/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonAlert, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAlert, IonButton], }) export class ExampleComponent { public alertButtons = [ diff --git a/static/usage/v8/alert/inputs/radios/angular/example_component_ts.md b/static/usage/v8/alert/inputs/radios/angular/example_component_ts.md index 34f44b288da..56ca5fedeb4 100644 --- a/static/usage/v8/alert/inputs/radios/angular/example_component_ts.md +++ b/static/usage/v8/alert/inputs/radios/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonAlert, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAlert, IonButton], }) export class ExampleComponent { public alertButtons = ['OK']; diff --git a/static/usage/v8/alert/inputs/text-inputs/angular/example_component_ts.md b/static/usage/v8/alert/inputs/text-inputs/angular/example_component_ts.md index 713dc9067fa..ae2c39e6164 100644 --- a/static/usage/v8/alert/inputs/text-inputs/angular/example_component_ts.md +++ b/static/usage/v8/alert/inputs/text-inputs/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonAlert, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAlert, IonButton], }) export class ExampleComponent { public alertButtons = ['OK']; diff --git a/static/usage/v8/alert/presenting/controller/angular/example_component_ts.md b/static/usage/v8/alert/presenting/controller/angular/example_component_ts.md index 6fdd69c7f69..baf0999fd30 100644 --- a/static/usage/v8/alert/presenting/controller/angular/example_component_ts.md +++ b/static/usage/v8/alert/presenting/controller/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; -import { AlertController } from '@ionic/angular'; +import { AlertController, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], }) export class ExampleComponent { constructor(private alertController: AlertController) {} diff --git a/static/usage/v8/alert/presenting/isOpen/angular/example_component_ts.md b/static/usage/v8/alert/presenting/isOpen/angular/example_component_ts.md index 82d1f17e457..e2f5ccac609 100644 --- a/static/usage/v8/alert/presenting/isOpen/angular/example_component_ts.md +++ b/static/usage/v8/alert/presenting/isOpen/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonAlert, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAlert, IonButton], }) export class ExampleComponent { isAlertOpen = false; diff --git a/static/usage/v8/alert/presenting/trigger/angular/example_component_ts.md b/static/usage/v8/alert/presenting/trigger/angular/example_component_ts.md index 9526ebdde8f..7d7adf11d25 100644 --- a/static/usage/v8/alert/presenting/trigger/angular/example_component_ts.md +++ b/static/usage/v8/alert/presenting/trigger/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonAlert, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAlert, IonButton], }) export class ExampleComponent { alertButtons = ['Action']; diff --git a/static/usage/v8/animations/basic/angular/example_component_ts.md b/static/usage/v8/animations/basic/angular/example_component_ts.md index e8a1dae1af8..eef9ba4482c 100644 --- a/static/usage/v8/animations/basic/angular/example_component_ts.md +++ b/static/usage/v8/animations/basic/angular/example_component_ts.md @@ -1,17 +1,19 @@ ```ts -import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; -import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation } from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} diff --git a/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md index 36a7e22081a..84ca1f2a479 100644 --- a/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md +++ b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md @@ -1,40 +1,49 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} ngAfterViewInit() { - const card = this.animationCtrl - .create() - .addElement(this.cardElements.get(0).nativeElement) - .duration(2000) - .beforeStyles({ - filter: 'invert(75%)', - }) - .beforeClearStyles(['box-shadow']) - .afterStyles({ - 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px', - }) - .afterClearStyles(['filter']) - .keyframes([ - { offset: 0, transform: 'scale(1)' }, - { offset: 0.5, transform: 'scale(1.5)' }, - { offset: 1, transform: 'scale(1)' }, - ]); - - this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]); + const cardEl = this.cardElements.get(0); + + const card = cardEl + ? this.animationCtrl + .create() + .addElement(cardEl.nativeElement) + .duration(2000) + .beforeStyles({ + filter: 'invert(75%)', + }) + .beforeClearStyles(['box-shadow']) + .afterStyles({ + 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px', + }) + .afterClearStyles(['filter']) + .keyframes([ + { offset: 0, transform: 'scale(1)' }, + { offset: 0.5, transform: 'scale(1.5)' }, + { offset: 1, transform: 'scale(1)' }, + ]) + : null; + + if (card) { + this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]); + } } play() { diff --git a/static/usage/v8/animations/chain/angular/example_component_ts.md b/static/usage/v8/animations/chain/angular/example_component_ts.md index 6c6acbef993..ac8959f5fa4 100644 --- a/static/usage/v8/animations/chain/angular/example_component_ts.md +++ b/static/usage/v8/animations/chain/angular/example_component_ts.md @@ -1,73 +1,86 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; - private cardA: Animation; - private cardB: Animation; - private cardC: Animation; + private cardA!: Animation | null; + private cardB!: Animation | null; + private cardC!: Animation | null; constructor(private animationCtrl: AnimationController) {} ngAfterViewInit() { - this.cardA = this.animationCtrl - .create() - .addElement(this.cardElements.get(0).nativeElement) - .fill('none') - .duration(1000) - .keyframes([ - { offset: 0, transform: 'scale(1) rotate(0)' }, - { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' }, - { offset: 1, transform: 'scale(1) rotate(0)' }, - ]); + const cardElA = this.cardElements.get(0); + const cardElB = this.cardElements.get(1); + const cardElC = this.cardElements.get(2); - this.cardB = this.animationCtrl - .create() - .addElement(this.cardElements.get(1).nativeElement) - .fill('none') - .duration(1000) - .keyframes([ - { offset: 0, transform: 'scale(1)', opacity: '1' }, - { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' }, - { offset: 1, transform: 'scale(1)', opacity: '1' }, - ]); + this.cardA = cardElA + ? this.animationCtrl + .create() + .addElement(cardElA.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1) rotate(0)' }, + { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' }, + { offset: 1, transform: 'scale(1) rotate(0)' }, + ]) + : null; - this.cardC = this.animationCtrl - .create() - .addElement(this.cardElements.get(2).nativeElement) - .fill('none') - .duration(1000) - .keyframes([ - { offset: 0, transform: 'scale(1)', opacity: '0.5' }, - { offset: 0.5, transform: 'scale(0.8)', opacity: '1' }, - { offset: 1, transform: 'scale(1)', opacity: '0.5' }, - ]); + this.cardB = cardElB + ? this.animationCtrl + .create() + .addElement(cardElB.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '1' }, + { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' }, + { offset: 1, transform: 'scale(1)', opacity: '1' }, + ]) + : null; + + this.cardC = cardElC + ? this.animationCtrl + .create() + .addElement(cardElC.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '0.5' }, + { offset: 0.5, transform: 'scale(0.8)', opacity: '1' }, + { offset: 1, transform: 'scale(1)', opacity: '0.5' }, + ]) + : null; } async play() { - await this.cardA.play(); - await this.cardB.play(); - await this.cardC.play(); + await this.cardA?.play(); + await this.cardB?.play(); + await this.cardC?.play(); } pause() { - this.cardA.pause(); - this.cardB.pause(); - this.cardC.pause(); + this.cardA?.pause(); + this.cardB?.pause(); + this.cardC?.pause(); } - stop() { - this.cardA.stop(); - this.cardB.stop(); - this.cardC.stop(); + async stop() { + await this.cardA?.stop(); + await this.cardB?.stop(); + await this.cardC?.stop(); } } ``` diff --git a/static/usage/v8/animations/gesture/angular/example_component_ts.md b/static/usage/v8/animations/gesture/angular/example_component_ts.md index 7b9aadccf5e..49bb9e92f64 100644 --- a/static/usage/v8/animations/gesture/angular/example_component_ts.md +++ b/static/usage/v8/animations/gesture/angular/example_component_ts.md @@ -1,18 +1,19 @@ ```ts -import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; -import { AnimationController, GestureController, IonCard } from '@ionic/angular'; -import type { Animation, Gesture, GestureDetail } from '@ionic/angular'; +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { AnimationController, GestureController, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation, Gesture, GestureDetail } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; - private gesture: Gesture; + private animation!: Animation; + private gesture!: Gesture; private started = false; private initialStep = 0; diff --git a/static/usage/v8/animations/group/angular/example_component_ts.md b/static/usage/v8/animations/group/angular/example_component_ts.md index 63f7a7b2f7a..a75e3041da0 100644 --- a/static/usage/v8/animations/group/angular/example_component_ts.md +++ b/static/usage/v8/animations/group/angular/example_component_ts.md @@ -1,33 +1,36 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} ngAfterViewInit() { const cardA = this.animationCtrl .create() - .addElement(this.cardElements.get(0).nativeElement) + .addElement(this.cardElements.get(0)!.nativeElement) .keyframes([ { offset: 0, transform: 'scale(1) rotate(0)' }, { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' }, - { offset: 1, transform: 'scale(1) rotate(0) ' }, + { offset: 1, transform: 'scale(1) rotate(0)' }, ]); const cardB = this.animationCtrl .create() - .addElement(this.cardElements.get(1).nativeElement) + .addElement(this.cardElements.get(1)!.nativeElement) .keyframes([ { offset: 0, transform: 'scale(1)', opacity: '1' }, { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' }, @@ -36,7 +39,7 @@ export class ExampleComponent { const cardC = this.animationCtrl .create() - .addElement(this.cardElements.get(2).nativeElement) + .addElement(this.cardElements.get(2)!.nativeElement) .duration(5000) .keyframes([ { offset: 0, transform: 'scale(1)', opacity: '0.5' }, @@ -48,7 +51,7 @@ export class ExampleComponent { .create() .duration(2000) .iterations(Infinity) - .addAnimation([cardA, cardB, cardC]); + .addAnimation([cardA, cardB, cardC].filter(Boolean) as Animation[]); } play() { diff --git a/static/usage/v8/animations/keyframes/angular/example_component_ts.md b/static/usage/v8/animations/keyframes/angular/example_component_ts.md index 4ee04bea423..d6739439d97 100644 --- a/static/usage/v8/animations/keyframes/angular/example_component_ts.md +++ b/static/usage/v8/animations/keyframes/angular/example_component_ts.md @@ -1,16 +1,19 @@ ```ts import { Component, ElementRef, ViewChild } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard, IonCardContent } from '@ionic/angular'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation } from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} diff --git a/static/usage/v8/animations/modal-override/angular/example_component_ts.md b/static/usage/v8/animations/modal-override/angular/example_component_ts.md index b1fe997c1d4..21dd0d187c5 100644 --- a/static/usage/v8/animations/modal-override/angular/example_component_ts.md +++ b/static/usage/v8/animations/modal-override/angular/example_component_ts.md @@ -1,14 +1,24 @@ ```ts import { Component, ViewChild } from '@angular/core'; -import type { IonModal } from '@ionic/angular'; -import { AnimationController } from '@ionic/angular'; +import { + IonButton, + IonButtons, + IonContent, + IonHeader, + IonModal, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar], }) export class ExampleComponent { - @ViewChild('modal', { static: true }) modal: IonModal; + @ViewChild('modal', { static: true }) modal!: IonModal; constructor(private animationCtrl: AnimationController) {} @@ -16,18 +26,22 @@ export class ExampleComponent { const enterAnimation = (baseEl: HTMLElement) => { const root = baseEl.shadowRoot; + const backdropElement = root?.querySelector('ion-backdrop'); + const wrapperElement = root?.querySelector('.modal-wrapper'); + const backdropAnimation = this.animationCtrl .create() - .addElement(root.querySelector('ion-backdrop')) + .addElement(backdropElement || baseEl) .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); - const wrapperAnimation = this.animationCtrl - .create() - .addElement(root.querySelector('.modal-wrapper')) - .keyframes([ + const wrapperAnimation = this.animationCtrl.create(); + + if (wrapperElement) { + wrapperAnimation.addElement(wrapperElement).keyframes([ { offset: 0, opacity: '0', transform: 'scale(0)' }, { offset: 1, opacity: '0.99', transform: 'scale(1)' }, ]); + } return this.animationCtrl .create() diff --git a/static/usage/v8/animations/preference-based/angular/example_component_ts.md b/static/usage/v8/animations/preference-based/angular/example_component_ts.md index c0e383d5ec0..40e672d5850 100644 --- a/static/usage/v8/animations/preference-based/angular/example_component_ts.md +++ b/static/usage/v8/animations/preference-based/angular/example_component_ts.md @@ -1,18 +1,19 @@ ```ts -import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; -import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation } from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['./example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} diff --git a/static/usage/v8/app/set-focus/angular/example_component_ts.md b/static/usage/v8/app/set-focus/angular/example_component_ts.md index 9970bf3e4dd..9c836bc8425 100644 --- a/static/usage/v8/app/set-focus/angular/example_component_ts.md +++ b/static/usage/v8/app/set-focus/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonButton, IonRadio, IonRadioGroup], }) export class ExampleComponent { focusElement(id: string) { diff --git a/static/usage/v8/avatar/basic/angular.md b/static/usage/v8/avatar/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/avatar/basic/angular.md rename to static/usage/v8/avatar/basic/angular/example_component_html.md diff --git a/static/usage/v8/avatar/basic/angular/example_component_ts.md b/static/usage/v8/avatar/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..effe5580243 --- /dev/null +++ b/static/usage/v8/avatar/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAvatar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/avatar/basic/index.md b/static/usage/v8/avatar/basic/index.md index 6655efc6562..c3a0a190158 100644 --- a/static/usage/v8/avatar/basic/index.md +++ b/static/usage/v8/avatar/basic/index.md @@ -3,6 +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/avatar/chip/angular.md b/static/usage/v8/avatar/chip/angular/example_component_html.md similarity index 100% rename from static/usage/v8/avatar/chip/angular.md rename to static/usage/v8/avatar/chip/angular/example_component_html.md diff --git a/static/usage/v8/avatar/chip/angular/example_component_ts.md b/static/usage/v8/avatar/chip/angular/example_component_ts.md new file mode 100644 index 00000000000..244bc7b789d --- /dev/null +++ b/static/usage/v8/avatar/chip/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAvatar, IonChip, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonChip, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/avatar/chip/index.md b/static/usage/v8/avatar/chip/index.md index 21c571e6c28..b46cf0896e1 100644 --- a/static/usage/v8/avatar/chip/index.md +++ b/static/usage/v8/avatar/chip/index.md @@ -3,6 +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/avatar/item/angular.md b/static/usage/v8/avatar/item/angular/example_component_html.md similarity index 100% rename from static/usage/v8/avatar/item/angular.md rename to static/usage/v8/avatar/item/angular/example_component_html.md diff --git a/static/usage/v8/avatar/item/angular/example_component_ts.md b/static/usage/v8/avatar/item/angular/example_component_ts.md new file mode 100644 index 00000000000..80785adaf8a --- /dev/null +++ b/static/usage/v8/avatar/item/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAvatar, IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/avatar/item/index.md b/static/usage/v8/avatar/item/index.md index ef0b525815d..801c0ba268c 100644 --- a/static/usage/v8/avatar/item/index.md +++ b/static/usage/v8/avatar/item/index.md @@ -3,6 +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/avatar/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/avatar/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..effe5580243 --- /dev/null +++ b/static/usage/v8/avatar/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAvatar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/avatar/theming/css-properties/index.md b/static/usage/v8/avatar/theming/css-properties/index.md index 3e4dfeb4f13..bad5605bc41 100644 --- a/static/usage/v8/avatar/theming/css-properties/index.md +++ b/static/usage/v8/avatar/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; `, + imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar], }) export class PageOneComponent { component = PageTwoComponent; diff --git a/static/usage/v8/back-button/basic/angular/page_two_component_ts.md b/static/usage/v8/back-button/basic/angular/page_two_component_ts.md index b2cda11d2a8..55048bd7b27 100644 --- a/static/usage/v8/back-button/basic/angular/page_two_component_ts.md +++ b/static/usage/v8/back-button/basic/angular/page_two_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; @Component({ selector: 'app-page-two', @@ -17,6 +18,7 @@ import { Component } from '@angular/core';

Use the back button to navigate to the previous page.

`, + imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar], }) export class PageTwoComponent {} ``` diff --git a/static/usage/v8/back-button/basic/index.md b/static/usage/v8/back-button/basic/index.md index f3d4197adcc..0031b6eadd8 100644 --- a/static/usage/v8/back-button/basic/index.md +++ b/static/usage/v8/back-button/basic/index.md @@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; -import angular_app_module_ts from './angular/app_module_ts.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_page_one_component_ts from './angular/page_one_component_ts.md'; @@ -26,7 +25,6 @@ import vue_page_two from './vue/page_two_vue.md'; 'src/app/example.component.ts': angular_example_component_ts, 'src/app/page-one.component.ts': angular_page_one_component_ts, 'src/app/page-two.component.ts': angular_page_two_component_ts, - 'src/app/app.module.ts': angular_app_module_ts, }, }, react: { diff --git a/static/usage/v8/back-button/custom/angular/app_module_ts.md b/static/usage/v8/back-button/custom/angular/app_module_ts.md deleted file mode 100644 index 3c20b511446..00000000000 --- a/static/usage/v8/back-button/custom/angular/app_module_ts.md +++ /dev/null @@ -1,20 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - -import { IonicModule } from '@ionic/angular'; - -import { AppComponent } from './app.component'; -import { ExampleComponent } from './example.component'; - -import { PageOneComponent } from './page-one.component'; -import { PageTwoComponent } from './page-two.component'; - -@NgModule({ - imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})], - declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` diff --git a/static/usage/v8/back-button/custom/angular/example_component_ts.md b/static/usage/v8/back-button/custom/angular/example_component_ts.md index b123a4858ce..4c364e72340 100644 --- a/static/usage/v8/back-button/custom/angular/example_component_ts.md +++ b/static/usage/v8/back-button/custom/angular/example_component_ts.md @@ -1,11 +1,14 @@ ```ts import { Component } from '@angular/core'; +import { IonNav } from '@ionic/angular/standalone'; import { PageOneComponent } from './page-one.component'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonNav], }) export class ExampleComponent { component = PageOneComponent; diff --git a/static/usage/v8/back-button/custom/angular/page_one_component_ts.md b/static/usage/v8/back-button/custom/angular/page_one_component_ts.md index d181c5a5268..2f9b78ab164 100644 --- a/static/usage/v8/back-button/custom/angular/page_one_component_ts.md +++ b/static/usage/v8/back-button/custom/angular/page_one_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar } from '@ionic/angular/standalone'; import { PageTwoComponent } from './page-two.component'; @@ -19,6 +20,7 @@ import { PageTwoComponent } from './page-two.component'; `, + imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar], }) export class PageOneComponent { component = PageTwoComponent; diff --git a/static/usage/v8/back-button/custom/angular/page_two_component_ts.md b/static/usage/v8/back-button/custom/angular/page_two_component_ts.md index 05a1bd64d79..b0fb5a01ece 100644 --- a/static/usage/v8/back-button/custom/angular/page_two_component_ts.md +++ b/static/usage/v8/back-button/custom/angular/page_two_component_ts.md @@ -1,5 +1,9 @@ ```ts import { Component } from '@angular/core'; +import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +import { addIcons } from 'ionicons'; +import { caretBack } from 'ionicons/icons'; @Component({ selector: 'app-page-two', @@ -17,6 +21,16 @@ import { Component } from '@angular/core';

Use the back button to navigate to the previous page.

`, + imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar], }) -export class PageTwoComponent {} +export class PageTwoComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ caretBack }); + } +} ``` diff --git a/static/usage/v8/back-button/custom/index.md b/static/usage/v8/back-button/custom/index.md index 43614d4b44d..80141c28caa 100644 --- a/static/usage/v8/back-button/custom/index.md +++ b/static/usage/v8/back-button/custom/index.md @@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; -import angular_app_module_ts from './angular/app_module_ts.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_page_one_component_ts from './angular/page_one_component_ts.md'; @@ -26,7 +25,6 @@ import vue_page_two from './vue/page_two_vue.md'; 'src/app/example.component.ts': angular_example_component_ts, 'src/app/page-one.component.ts': angular_page_one_component_ts, 'src/app/page-two.component.ts': angular_page_two_component_ts, - 'src/app/app.module.ts': angular_app_module_ts, }, }, react: { diff --git a/static/usage/v8/backdrop/basic/angular/example_component_ts.md b/static/usage/v8/backdrop/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..c4809eb9652 --- /dev/null +++ b/static/usage/v8/backdrop/basic/angular/example_component_ts.md @@ -0,0 +1,21 @@ +```ts +import { Component } from '@angular/core'; +import { + IonBackdrop, + IonButton, + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBackdrop, IonButton, IonCheckbox, IonContent, IonHeader, IonItem, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/backdrop/basic/index.md b/static/usage/v8/backdrop/basic/index.md index fd85d2b4119..553124f6461 100644 --- a/static/usage/v8/backdrop/basic/index.md +++ b/static/usage/v8/backdrop/basic/index.md @@ -7,8 +7,9 @@ import react_main_css from './react/main_css.md'; import vue from './vue.md'; -import angular_example_component_css from './angular/example_component_css.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 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/badge/theming/colors/angular.md b/static/usage/v8/badge/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v8/badge/theming/colors/angular.md rename to static/usage/v8/badge/theming/colors/angular/example_component_html.md diff --git a/static/usage/v8/badge/theming/colors/angular/example_component_ts.md b/static/usage/v8/badge/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..73c490c2240 --- /dev/null +++ b/static/usage/v8/badge/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBadge, IonItem, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/badge/theming/colors/index.md b/static/usage/v8/badge/theming/colors/index.md index dedf7570d7f..ebb93bc7a14 100644 --- a/static/usage/v8/badge/theming/colors/index.md +++ b/static/usage/v8/badge/theming/colors/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/badge/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/badge/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..73c490c2240 --- /dev/null +++ b/static/usage/v8/badge/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBadge, IonItem, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/badge/theming/css-properties/index.md b/static/usage/v8/badge/theming/css-properties/index.md index f52a73262c7..73f088f4aa6 100644 --- a/static/usage/v8/badge/theming/css-properties/index.md +++ b/static/usage/v8/badge/theming/css-properties/index.md @@ -8,6 +8,7 @@ import react_main_css from './react/main_css.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 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/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md index 8ae69af72a5..269836b83db 100644 --- a/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md +++ b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md @@ -1,12 +1,15 @@ ```ts -import { Component, ViewChild } from '@angular/core'; +import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs], }) export class ExampleComponent { - maxBreadcrumbs = 4; + maxBreadcrumbs? = 4; expandBreadcrumbs() { this.maxBreadcrumbs = undefined; diff --git a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular.md b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular/example_component_html.md similarity index 100% rename from static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular.md rename to static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular/example_component_html.md diff --git a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular/example_component_ts.md new file mode 100644 index 00000000000..6b8add86109 --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/index.md b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/index.md index cdceec0621a..0661fe7a680 100644 --- a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/index.md +++ b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/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/breadcrumbs/collapsing-items/max-items/angular.md b/static/usage/v8/breadcrumbs/collapsing-items/max-items/angular/example_component_html.md similarity index 100% rename from static/usage/v8/breadcrumbs/collapsing-items/max-items/angular.md rename to static/usage/v8/breadcrumbs/collapsing-items/max-items/angular/example_component_html.md diff --git a/static/usage/v8/breadcrumbs/collapsing-items/max-items/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/collapsing-items/max-items/angular/example_component_ts.md new file mode 100644 index 00000000000..6b8add86109 --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/max-items/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/max-items/index.md b/static/usage/v8/breadcrumbs/collapsing-items/max-items/index.md index 1b8e19f586e..cbdd3270f56 100644 --- a/static/usage/v8/breadcrumbs/collapsing-items/max-items/index.md +++ b/static/usage/v8/breadcrumbs/collapsing-items/max-items/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/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md index e3c0462a148..abd91bba073 100644 --- a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md +++ b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md @@ -11,13 +11,11 @@ - + @for (breadcrumb of collapsedBreadcrumbs; track breadcrumb; let last = $last) { + {{ breadcrumb.textContent }} + } diff --git a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md index aabfb29a821..17d100420d3 100644 --- a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md +++ b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md @@ -1,12 +1,23 @@ ```ts import { Component, ViewChild } from '@angular/core'; +import { + IonBreadcrumb, + IonBreadcrumbs, + IonContent, + IonItem, + IonLabel, + IonList, + IonPopover, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover], }) export class ExampleComponent { - @ViewChild('popover') popover; + @ViewChild('popover') popover!: HTMLIonPopoverElement; isOpen = false; collapsedBreadcrumbs: HTMLIonBreadcrumbElement[] = []; diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/icons/custom-separators/angular/example_component_ts.md index 072f2c1090f..2634a7a252f 100644 --- a/static/usage/v8/breadcrumbs/icons/custom-separators/angular/example_component_ts.md +++ b/static/usage/v8/breadcrumbs/icons/custom-separators/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { arrowForwardCircle } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { arrowForwardCircle } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs, IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md index ccc9439a382..474da49689d 100644 --- a/static/usage/v8/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md +++ b/static/usage/v8/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { camera, film, flash, home } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { camera, film, flash, home } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/breadcrumbs/theming/colors/angular.md b/static/usage/v8/breadcrumbs/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v8/breadcrumbs/theming/colors/angular.md rename to static/usage/v8/breadcrumbs/theming/colors/angular/example_component_html.md diff --git a/static/usage/v8/breadcrumbs/theming/colors/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..6b8add86109 --- /dev/null +++ b/static/usage/v8/breadcrumbs/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/breadcrumbs/theming/colors/index.md b/static/usage/v8/breadcrumbs/theming/colors/index.md index df68242f938..0974c00303e 100644 --- a/static/usage/v8/breadcrumbs/theming/colors/index.md +++ b/static/usage/v8/breadcrumbs/theming/colors/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/breadcrumbs/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..6b8add86109 --- /dev/null +++ b/static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/breadcrumbs/theming/css-properties/index.md b/static/usage/v8/breadcrumbs/theming/css-properties/index.md index 45726c2da95..a9e9deb3119 100644 --- a/static/usage/v8/breadcrumbs/theming/css-properties/index.md +++ b/static/usage/v8/breadcrumbs/theming/css-properties/index.md @@ -8,6 +8,7 @@ import react_main_css from './react/main_css.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 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/button/expand/angular.md b/static/usage/v8/button/expand/angular/example_component_html.md similarity index 100% rename from static/usage/v8/button/expand/angular.md rename to static/usage/v8/button/expand/angular/example_component_html.md diff --git a/static/usage/v8/button/expand/angular/example_component_ts.md b/static/usage/v8/button/expand/angular/example_component_ts.md new file mode 100644 index 00000000000..403e44caaec --- /dev/null +++ b/static/usage/v8/button/expand/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/button/expand/index.md b/static/usage/v8/button/expand/index.md index 3bf460ada3e..8fa9447fd2f 100644 --- a/static/usage/v8/button/expand/index.md +++ b/static/usage/v8/button/expand/index.md @@ -3,6 +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/button/fill/angular.md b/static/usage/v8/button/fill/angular/example_component_html.md similarity index 100% rename from static/usage/v8/button/fill/angular.md rename to static/usage/v8/button/fill/angular/example_component_html.md diff --git a/static/usage/v8/button/fill/angular/example_component_ts.md b/static/usage/v8/button/fill/angular/example_component_ts.md new file mode 100644 index 00000000000..403e44caaec --- /dev/null +++ b/static/usage/v8/button/fill/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/button/fill/index.md b/static/usage/v8/button/fill/index.md index b34226a0d15..8418e46d1ac 100644 --- a/static/usage/v8/button/fill/index.md +++ b/static/usage/v8/button/fill/index.md @@ -3,6 +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/button/icons/angular/example_component_ts.md b/static/usage/v8/button/icons/angular/example_component_ts.md index ecbdde79de7..3987b3b09a1 100644 --- a/static/usage/v8/button/icons/angular/example_component_ts.md +++ b/static/usage/v8/button/icons/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { heart, logoApple, settingsSharp, star } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { heart, logoApple, settingsSharp, star } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/button/shape/angular/example_component_ts.md b/static/usage/v8/button/shape/angular/example_component_ts.md index 6e815b2531f..74c70c218ac 100644 --- a/static/usage/v8/button/shape/angular/example_component_ts.md +++ b/static/usage/v8/button/shape/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { heart } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { heart } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/button/size/angular.md b/static/usage/v8/button/size/angular/example_component_html.md similarity index 100% rename from static/usage/v8/button/size/angular.md rename to static/usage/v8/button/size/angular/example_component_html.md diff --git a/static/usage/v8/button/size/angular/example_component_ts.md b/static/usage/v8/button/size/angular/example_component_ts.md new file mode 100644 index 00000000000..403e44caaec --- /dev/null +++ b/static/usage/v8/button/size/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/button/size/index.md b/static/usage/v8/button/size/index.md index 8f25ec44644..2c0b97b223a 100644 --- a/static/usage/v8/button/size/index.md +++ b/static/usage/v8/button/size/index.md @@ -3,6 +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/button/text-wrapping/angular.md b/static/usage/v8/button/text-wrapping/angular/example_component_html.md similarity index 100% rename from static/usage/v8/button/text-wrapping/angular.md rename to static/usage/v8/button/text-wrapping/angular/example_component_html.md diff --git a/static/usage/v8/button/text-wrapping/angular/example_component_ts.md b/static/usage/v8/button/text-wrapping/angular/example_component_ts.md new file mode 100644 index 00000000000..403e44caaec --- /dev/null +++ b/static/usage/v8/button/text-wrapping/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/button/text-wrapping/index.md b/static/usage/v8/button/text-wrapping/index.md index 5ca882379b6..9afe2817241 100644 --- a/static/usage/v8/button/text-wrapping/index.md +++ b/static/usage/v8/button/text-wrapping/index.md @@ -3,6 +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/button/theming/colors/angular.md b/static/usage/v8/button/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v8/button/theming/colors/angular.md rename to static/usage/v8/button/theming/colors/angular/example_component_html.md diff --git a/static/usage/v8/button/theming/colors/angular/example_component_ts.md b/static/usage/v8/button/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..403e44caaec --- /dev/null +++ b/static/usage/v8/button/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/button/theming/colors/index.md b/static/usage/v8/button/theming/colors/index.md index 21ab85f8ebc..f5cb7f11580 100644 --- a/static/usage/v8/button/theming/colors/index.md +++ b/static/usage/v8/button/theming/colors/index.md @@ -3,6 +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/button/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/button/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..403e44caaec --- /dev/null +++ b/static/usage/v8/button/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/button/theming/css-properties/index.md b/static/usage/v8/button/theming/css-properties/index.md index 0cc6adf46c8..7a03fb574bd 100644 --- a/static/usage/v8/button/theming/css-properties/index.md +++ b/static/usage/v8/button/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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 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/buttons/placement/angular.md b/static/usage/v8/buttons/placement/angular/example_component_html.md similarity index 100% rename from static/usage/v8/buttons/placement/angular.md rename to static/usage/v8/buttons/placement/angular/example_component_html.md diff --git a/static/usage/v8/buttons/placement/angular/example_component_ts.md b/static/usage/v8/buttons/placement/angular/example_component_ts.md new file mode 100644 index 00000000000..dd7b99299de --- /dev/null +++ b/static/usage/v8/buttons/placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/buttons/placement/index.md b/static/usage/v8/buttons/placement/index.md index 3420c564089..bdb882d7bfe 100644 --- a/static/usage/v8/buttons/placement/index.md +++ b/static/usage/v8/buttons/placement/index.md @@ -3,6 +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/buttons/types/angular/example_component_ts.md b/static/usage/v8/buttons/types/angular/example_component_ts.md index 7af150bd169..94e3d6ef6fa 100644 --- a/static/usage/v8/buttons/types/angular/example_component_ts.md +++ b/static/usage/v8/buttons/types/angular/example_component_ts.md @@ -1,5 +1,14 @@ ```ts import { Component } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonIcon, + IonMenuButton, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons'; @@ -8,6 +17,7 @@ import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/card/basic/angular.md b/static/usage/v8/card/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/card/basic/angular.md rename to static/usage/v8/card/basic/angular/example_component_html.md diff --git a/static/usage/v8/card/basic/angular/example_component_ts.md b/static/usage/v8/card/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..d35351dd783 --- /dev/null +++ b/static/usage/v8/card/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/card/basic/index.md b/static/usage/v8/card/basic/index.md index 1f6c20f2705..dbd09a796c2 100644 --- a/static/usage/v8/card/basic/index.md +++ b/static/usage/v8/card/basic/index.md @@ -3,6 +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/card/buttons/angular.md b/static/usage/v8/card/buttons/angular/example_component_html.md similarity index 100% rename from static/usage/v8/card/buttons/angular.md rename to static/usage/v8/card/buttons/angular/example_component_html.md diff --git a/static/usage/v8/card/buttons/angular/example_component_ts.md b/static/usage/v8/card/buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..74ee512cb4f --- /dev/null +++ b/static/usage/v8/card/buttons/angular/example_component_ts.md @@ -0,0 +1,19 @@ +```ts +import { Component } from '@angular/core'; +import { + IonButton, + IonCard, + IonCardContent, + IonCardHeader, + IonCardSubtitle, + IonCardTitle, +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/card/buttons/index.md b/static/usage/v8/card/buttons/index.md index 46e17cf4b1d..32789fcccbd 100644 --- a/static/usage/v8/card/buttons/index.md +++ b/static/usage/v8/card/buttons/index.md @@ -3,6 +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/card/list/angular/example_component_ts.md b/static/usage/v8/card/list/angular/example_component_ts.md new file mode 100644 index 00000000000..204d500d316 --- /dev/null +++ b/static/usage/v8/card/list/angular/example_component_ts.md @@ -0,0 +1,32 @@ +```ts +import { Component } from '@angular/core'; +import { + IonCard, + IonCardContent, + IonCardHeader, + IonCardSubtitle, + IonCardTitle, + IonItem, + IonLabel, + IonList, + IonThumbnail, +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonCard, + IonCardContent, + IonCardHeader, + IonCardSubtitle, + IonCardTitle, + IonItem, + IonLabel, + IonList, + IonThumbnail, + ], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/card/list/index.md b/static/usage/v8/card/list/index.md index b20109f53bb..76ad0a14e5a 100644 --- a/static/usage/v8/card/list/index.md +++ b/static/usage/v8/card/list/index.md @@ -9,6 +9,7 @@ import vue from './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 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/card/theming/colors/angular.md b/static/usage/v8/card/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v8/card/theming/colors/angular.md rename to static/usage/v8/card/theming/colors/angular/example_component_html.md diff --git a/static/usage/v8/card/theming/colors/angular/example_component_ts.md b/static/usage/v8/card/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..d35351dd783 --- /dev/null +++ b/static/usage/v8/card/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/card/theming/colors/index.md b/static/usage/v8/card/theming/colors/index.md index 385e21c7c69..5afcf9e560a 100644 --- a/static/usage/v8/card/theming/colors/index.md +++ b/static/usage/v8/card/theming/colors/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/card/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/card/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..d35351dd783 --- /dev/null +++ b/static/usage/v8/card/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/card/theming/css-properties/index.md b/static/usage/v8/card/theming/css-properties/index.md index 1181a8e4f6c..009a7bcddff 100644 --- a/static/usage/v8/card/theming/css-properties/index.md +++ b/static/usage/v8/card/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; diff --git a/static/usage/v8/checkbox/basic/angular.md b/static/usage/v8/checkbox/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/checkbox/basic/angular.md rename to static/usage/v8/checkbox/basic/angular/example_component_html.md diff --git a/static/usage/v8/checkbox/basic/angular/example_component_ts.md b/static/usage/v8/checkbox/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..0d67119a86b --- /dev/null +++ b/static/usage/v8/checkbox/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/checkbox/basic/index.md b/static/usage/v8/checkbox/basic/index.md index 7eac2e6b127..686e0827984 100644 --- a/static/usage/v8/checkbox/basic/index.md +++ b/static/usage/v8/checkbox/basic/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/checkbox/indeterminate/angular.md b/static/usage/v8/checkbox/indeterminate/angular/example_component_html.md similarity index 100% rename from static/usage/v8/checkbox/indeterminate/angular.md rename to static/usage/v8/checkbox/indeterminate/angular/example_component_html.md diff --git a/static/usage/v8/checkbox/indeterminate/angular/example_component_ts.md b/static/usage/v8/checkbox/indeterminate/angular/example_component_ts.md new file mode 100644 index 00000000000..0d67119a86b --- /dev/null +++ b/static/usage/v8/checkbox/indeterminate/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/checkbox/indeterminate/index.md b/static/usage/v8/checkbox/indeterminate/index.md index 5ab8784522c..43514e0b2df 100644 --- a/static/usage/v8/checkbox/indeterminate/index.md +++ b/static/usage/v8/checkbox/indeterminate/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/checkbox/justify/angular.md b/static/usage/v8/checkbox/justify/angular/example_component_html.md similarity index 100% rename from static/usage/v8/checkbox/justify/angular.md rename to static/usage/v8/checkbox/justify/angular/example_component_html.md diff --git a/static/usage/v8/checkbox/justify/angular/example_component_ts.md b/static/usage/v8/checkbox/justify/angular/example_component_ts.md new file mode 100644 index 00000000000..b6b56f82f51 --- /dev/null +++ b/static/usage/v8/checkbox/justify/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox, IonItem, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/checkbox/justify/index.md b/static/usage/v8/checkbox/justify/index.md index 2e08aaf0b79..1df7c12e5d2 100644 --- a/static/usage/v8/checkbox/justify/index.md +++ b/static/usage/v8/checkbox/justify/index.md @@ -3,6 +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/checkbox/label-link/angular.md b/static/usage/v8/checkbox/label-link/angular/example_component_html.md similarity index 100% rename from static/usage/v8/checkbox/label-link/angular.md rename to static/usage/v8/checkbox/label-link/angular/example_component_html.md diff --git a/static/usage/v8/checkbox/label-link/angular/example_component_ts.md b/static/usage/v8/checkbox/label-link/angular/example_component_ts.md new file mode 100644 index 00000000000..0d67119a86b --- /dev/null +++ b/static/usage/v8/checkbox/label-link/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/checkbox/label-link/index.md b/static/usage/v8/checkbox/label-link/index.md index c368f3c3747..c6b6e82a833 100644 --- a/static/usage/v8/checkbox/label-link/index.md +++ b/static/usage/v8/checkbox/label-link/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/checkbox/label-placement/angular.md b/static/usage/v8/checkbox/label-placement/angular/example_component_html.md similarity index 100% rename from static/usage/v8/checkbox/label-placement/angular.md rename to static/usage/v8/checkbox/label-placement/angular/example_component_html.md diff --git a/static/usage/v8/checkbox/label-placement/angular/example_component_ts.md b/static/usage/v8/checkbox/label-placement/angular/example_component_ts.md new file mode 100644 index 00000000000..0d67119a86b --- /dev/null +++ b/static/usage/v8/checkbox/label-placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/checkbox/label-placement/index.md b/static/usage/v8/checkbox/label-placement/index.md index 90a28f06693..70e3ed29e3e 100644 --- a/static/usage/v8/checkbox/label-placement/index.md +++ b/static/usage/v8/checkbox/label-placement/index.md @@ -3,6 +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/checkbox/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/checkbox/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..0d67119a86b --- /dev/null +++ b/static/usage/v8/checkbox/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/checkbox/theming/css-properties/index.md b/static/usage/v8/checkbox/theming/css-properties/index.md index b4a4e04917b..b64b47485a4 100644 --- a/static/usage/v8/checkbox/theming/css-properties/index.md +++ b/static/usage/v8/checkbox/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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 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/chip/slots/angular/example_component_ts.md b/static/usage/v8/chip/slots/angular/example_component_ts.md index 6b388ef38d9..5edb3cd8867 100644 --- a/static/usage/v8/chip/slots/angular/example_component_ts.md +++ b/static/usage/v8/chip/slots/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonAvatar, IonChip, IonIcon, IonLabel } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { close, closeCircle, pin } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { close, closeCircle, pin } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonAvatar, IonChip, IonIcon, IonLabel], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/chip/theming/colors/angular.md b/static/usage/v8/chip/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v8/chip/theming/colors/angular.md rename to static/usage/v8/chip/theming/colors/angular/example_component_html.md diff --git a/static/usage/v8/chip/theming/colors/angular/example_component_ts.md b/static/usage/v8/chip/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..0cfbf3e1a78 --- /dev/null +++ b/static/usage/v8/chip/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonChip } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonChip], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/chip/theming/colors/index.md b/static/usage/v8/chip/theming/colors/index.md index e0e5188b2f5..0be46b82fcf 100644 --- a/static/usage/v8/chip/theming/colors/index.md +++ b/static/usage/v8/chip/theming/colors/index.md @@ -3,6 +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/chip/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/chip/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..0cfbf3e1a78 --- /dev/null +++ b/static/usage/v8/chip/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonChip } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonChip], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/chip/theming/css-properties/index.md b/static/usage/v8/chip/theming/css-properties/index.md index 5ddfdd87f3c..26a973eb23d 100644 --- a/static/usage/v8/chip/theming/css-properties/index.md +++ b/static/usage/v8/chip/theming/css-properties/index.md @@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md'; import vue from './vue.md'; -import angular_example_component_css from './angular/example_component_css.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'; -

Scroll the content and notice that the fixed button does not scroll.

- - Normal Button - Fixed Button - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in - risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, - sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. - Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit - ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec - placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus - placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et - neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut - nulla sit amet erat malesuada euismod vel a nulla. -

-

- Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean - venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, - sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed - lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit - faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique - maximus. -

-

- Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo - tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et - elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus - justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, - ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. - Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae - turpis. -

-

- Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales - fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam - facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue - sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae - lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris - condimentum fermentum rutrum. -

-

- Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis - eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, - venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, - ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. - Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, - semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis - sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. -

- -``` diff --git a/static/usage/v8/content/fixed/angular/example_component_ts.md b/static/usage/v8/content/fixed/angular/example_component_ts.md new file mode 100644 index 00000000000..38a7b14090e --- /dev/null +++ b/static/usage/v8/content/fixed/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/content/fixed/index.md b/static/usage/v8/content/fixed/index.md index 700fc713ecc..053c95f17f9 100644 --- a/static/usage/v8/content/fixed/index.md +++ b/static/usage/v8/content/fixed/index.md @@ -9,6 +9,7 @@ import vue from './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'; -

Scroll the content and notice that the fixed button does not scroll.

- - Normal Button - Fixed Button - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum - in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, - sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed - neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula - blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula - justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. - Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque - mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl - dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. -

-

- Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean - venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, - sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula - sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc - et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis - tristique maximus. -

-

- Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo - tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum - et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue - faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis - venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean - sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id - molestie sed, pretium vitae turpis. -

-

- Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et - sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit - amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. - Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum - vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus - at. Mauris condimentum fermentum rutrum. -

-

- Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce - mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim - enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo - orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero - cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed - vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, - egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. -

- - ); -} -export default Example; -``` diff --git a/static/usage/v8/content/fullscreen/angular/example_component_ts.md b/static/usage/v8/content/fullscreen/angular/example_component_ts.md new file mode 100644 index 00000000000..5180063af58 --- /dev/null +++ b/static/usage/v8/content/fullscreen/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonFooter, IonHeader, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/content/fullscreen/index.md b/static/usage/v8/content/fullscreen/index.md index 82db6d82b09..db5a804ac7e 100644 --- a/static/usage/v8/content/fullscreen/index.md +++ b/static/usage/v8/content/fullscreen/index.md @@ -9,6 +9,7 @@ import vue from './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'; diff --git a/static/usage/v8/datetime-button/format-options/angular.md b/static/usage/v8/datetime-button/format-options/angular/example_component_html.md similarity index 100% rename from static/usage/v8/datetime-button/format-options/angular.md rename to static/usage/v8/datetime-button/format-options/angular/example_component_html.md diff --git a/static/usage/v8/datetime-button/format-options/angular/example_component_ts.md b/static/usage/v8/datetime-button/format-options/angular/example_component_ts.md new file mode 100644 index 00000000000..9a422284c2e --- /dev/null +++ b/static/usage/v8/datetime-button/format-options/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime, IonDatetimeButton, IonModal], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime-button/format-options/index.md b/static/usage/v8/datetime-button/format-options/index.md index ff54ee72608..681f4491237 100644 --- a/static/usage/v8/datetime-button/format-options/index.md +++ b/static/usage/v8/datetime-button/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/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'; diff --git a/static/usage/v8/fab/basic/angular/example_component_ts.md b/static/usage/v8/fab/basic/angular/example_component_ts.md index f881c10c61c..29c5aeb3007 100644 --- a/static/usage/v8/fab/basic/angular/example_component_ts.md +++ b/static/usage/v8/fab/basic/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { add } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { add } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/fab/before-content/angular/example_component_html.md b/static/usage/v8/fab/before-content/angular/example_component_html.md index 494d73158e6..ea987ff7905 100644 --- a/static/usage/v8/fab/before-content/angular/example_component_html.md +++ b/static/usage/v8/fab/before-content/angular/example_component_html.md @@ -6,12 +6,14 @@ - + @for (item of items; track item; let index = $index) { + avatar {{ item }} + } diff --git a/static/usage/v8/fab/before-content/angular/example_component_ts.md b/static/usage/v8/fab/before-content/angular/example_component_ts.md index b5b93c657db..f77b2189490 100644 --- a/static/usage/v8/fab/before-content/angular/example_component_ts.md +++ b/static/usage/v8/fab/before-content/angular/example_component_ts.md @@ -1,7 +1,18 @@ ```tsx import { Component, OnInit } from '@angular/core'; - -import { InfiniteScrollCustomEvent } from '@ionic/angular'; +import { + InfiniteScrollCustomEvent, + IonAvatar, + IonContent, + IonFab, + IonFabButton, + IonIcon, + IonInfiniteScroll, + IonInfiniteScrollContent, + IonItem, + IonLabel, + IonList, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { add } from 'ionicons/icons'; @@ -9,9 +20,22 @@ import { add } from 'ionicons/icons'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonAvatar, + IonContent, + IonFab, + IonFabButton, + IonIcon, + IonInfiniteScroll, + IonInfiniteScrollContent, + IonItem, + IonLabel, + IonList, + ], }) export class ExampleComponent implements OnInit { - items = []; + items: string[] = []; constructor() { /** @@ -33,10 +57,10 @@ export class ExampleComponent implements OnInit { } } - onIonInfinite(ev) { + onIonInfinite(ev: InfiniteScrollCustomEvent) { this.generateItems(); setTimeout(() => { - (ev as InfiniteScrollCustomEvent).target.complete(); + ev.target.complete(); }, 500); } } diff --git a/static/usage/v8/fab/button-sizing/angular/example_component_ts.md b/static/usage/v8/fab/button-sizing/angular/example_component_ts.md index 403209255c4..d852445f1db 100644 --- a/static/usage/v8/fab/button-sizing/angular/example_component_ts.md +++ b/static/usage/v8/fab/button-sizing/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { add, colorPalette, document, globe } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { add, colorPalette, document, globe } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonFabList, IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/fab/list-side/angular/example_component_ts.md b/static/usage/v8/fab/list-side/angular/example_component_ts.md index bc62ad83c78..7a2109d0c2c 100644 --- a/static/usage/v8/fab/list-side/angular/example_component_ts.md +++ b/static/usage/v8/fab/list-side/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionico selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonFabList, IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/fab/positioning/angular/example_component_ts.md b/static/usage/v8/fab/positioning/angular/example_component_ts.md index 4fed5b64b8a..11dac9f8e38 100644 --- a/static/usage/v8/fab/positioning/angular/example_component_ts.md +++ b/static/usage/v8/fab/positioning/angular/example_component_ts.md @@ -1,5 +1,15 @@ ```ts import { Component } from '@angular/core'; +import { + IonContent, + IonFab, + IonFabButton, + IonFabList, + IonHeader, + IonIcon, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { @@ -15,6 +25,7 @@ import { selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonContent, IonFab, IonFabButton, IonFabList, IonHeader, IonIcon, IonTitle, IonToolbar], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/fab/safe-area/angular/example_component_ts.md b/static/usage/v8/fab/safe-area/angular/example_component_ts.md index f881c10c61c..29c5aeb3007 100644 --- a/static/usage/v8/fab/safe-area/angular/example_component_ts.md +++ b/static/usage/v8/fab/safe-area/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { add } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { add } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/fab/theming/colors/angular/example_component_ts.md b/static/usage/v8/fab/theming/colors/angular/example_component_ts.md index bc62ad83c78..7a2109d0c2c 100644 --- a/static/usage/v8/fab/theming/colors/angular/example_component_ts.md +++ b/static/usage/v8/fab/theming/colors/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionico selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonFabList, IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_ts.md b/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_ts.md index 403209255c4..d852445f1db 100644 --- a/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_ts.md +++ b/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { add, colorPalette, document, globe } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { add, colorPalette, document, globe } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonFabList, IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_ts.md index 403209255c4..d852445f1db 100644 --- a/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_ts.md +++ b/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { add, colorPalette, document, globe } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { add, colorPalette, document, globe } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonFabList, IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/footer/basic/angular.md b/static/usage/v8/footer/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/footer/basic/angular.md rename to static/usage/v8/footer/basic/angular/example_component_html.md diff --git a/static/usage/v8/footer/basic/angular/example_component_ts.md b/static/usage/v8/footer/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..bcdf570e97b --- /dev/null +++ b/static/usage/v8/footer/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonFooter, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/footer/basic/index.md b/static/usage/v8/footer/basic/index.md index 618e0377617..af3b571296f 100644 --- a/static/usage/v8/footer/basic/index.md +++ b/static/usage/v8/footer/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'; ; - @ViewChild('debug', { read: ElementRef }) debug: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; + @ViewChild('debug', { read: ElementRef }) debug!: ElementRef; isCardActive = false; diff --git a/static/usage/v8/gestures/double-click/angular/example_component_ts.md b/static/usage/v8/gestures/double-click/angular/example_component_ts.md index 08159621553..8c963786c16 100644 --- a/static/usage/v8/gestures/double-click/angular/example_component_ts.md +++ b/static/usage/v8/gestures/double-click/angular/example_component_ts.md @@ -1,14 +1,15 @@ ```ts import { Component, ElementRef, ViewChild } from '@angular/core'; -import { GestureController, IonCard } from '@ionic/angular'; +import { GestureController, IonCard, IonCardContent } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['./example.component.css'], + imports: [IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild('card', { read: ElementRef }) card: ElementRef; + @ViewChild('card', { read: ElementRef }) card!: ElementRef; private currentOffset: number = 0; private lastOnStart: number = 0; diff --git a/static/usage/v8/grid/basic/angular/example_component_ts.md b/static/usage/v8/grid/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..993d724b887 --- /dev/null +++ b/static/usage/v8/grid/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCol, IonGrid, IonRow } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCol, IonGrid, IonRow], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/grid/basic/index.md b/static/usage/v8/grid/basic/index.md index d438994ef44..ddc0d2f680e 100644 --- a/static/usage/v8/grid/basic/index.md +++ b/static/usage/v8/grid/basic/index.md @@ -9,6 +9,7 @@ import vue from './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'; - - - -``` diff --git a/static/usage/v8/icon/basic/angular/example_component_ts.md b/static/usage/v8/icon/basic/angular/example_component_ts.md index 48b43c838c1..b666e579111 100644 --- a/static/usage/v8/icon/basic/angular/example_component_ts.md +++ b/static/usage/v8/icon/basic/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { logoIonic } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { logoIonic } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonIcon], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/img/basic/angular.md b/static/usage/v8/img/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/img/basic/angular.md rename to static/usage/v8/img/basic/angular/example_component_html.md diff --git a/static/usage/v8/img/basic/angular/example_component_ts.md b/static/usage/v8/img/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..bec3c992a7c --- /dev/null +++ b/static/usage/v8/img/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonImg } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonImg], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/img/basic/index.md b/static/usage/v8/img/basic/index.md index 3e14666bad2..ca4bb366ba3 100644 --- a/static/usage/v8/img/basic/index.md +++ b/static/usage/v8/img/basic/index.md @@ -3,6 +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/infinite-scroll/basic/angular/example_component_html.md b/static/usage/v8/infinite-scroll/basic/angular/example_component_html.md index 55469ab3c5a..962be4924aa 100644 --- a/static/usage/v8/infinite-scroll/basic/angular/example_component_html.md +++ b/static/usage/v8/infinite-scroll/basic/angular/example_component_html.md @@ -1,12 +1,14 @@ ```html - + @for (item of items; track item; let index = $index) { + avatar {{ item }} + } diff --git a/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md index 390ba6b75f1..7c35aba2138 100644 --- a/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md +++ b/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md @@ -1,15 +1,24 @@ ```tsx import { Component, OnInit } from '@angular/core'; - -import { InfiniteScrollCustomEvent } from '@ionic/angular'; +import { + InfiniteScrollCustomEvent, + IonAvatar, + IonContent, + IonInfiniteScroll, + IonInfiniteScrollContent, + IonItem, + IonLabel, + IonList, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - styleUrls: ['example.component.scss'], + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList], }) export class ExampleComponent implements OnInit { - items = []; + items: string[] = []; ngOnInit() { this.generateItems(); @@ -22,10 +31,10 @@ export class ExampleComponent implements OnInit { } } - onIonInfinite(ev) { + onIonInfinite(ev: InfiniteScrollCustomEvent) { this.generateItems(); setTimeout(() => { - (ev as InfiniteScrollCustomEvent).target.complete(); + ev.target.complete(); }, 500); } } diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md index 60c02b86ea0..fb41f8761c7 100644 --- a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md +++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md @@ -1,12 +1,14 @@ ```html - + @for (item of items; track item; let index = $index) { + avatar {{ item }} + }
diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md index 415ed5dba8b..e7a9c133f12 100644 --- a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md +++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md @@ -1,15 +1,15 @@ ```tsx import { Component, OnInit } from '@angular/core'; - -import { InfiniteScrollCustomEvent } from '@ionic/angular'; +import { IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - styleUrls: ['example.component.scss'], + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList], }) export class ExampleComponent implements OnInit { - items = []; + items: string[] = []; ngOnInit() { for (let i = 1; i < 51; i++) { diff --git a/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md index 2e23e359257..d73da989437 100644 --- a/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md +++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md @@ -1,12 +1,14 @@ ```html - + @for (item of items; track item; let index = $index) { + avatar {{ item }} + } diff --git a/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md index 415ed5dba8b..e670c8c3220 100644 --- a/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md +++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md @@ -1,15 +1,23 @@ ```tsx import { Component, OnInit } from '@angular/core'; - -import { InfiniteScrollCustomEvent } from '@ionic/angular'; +import { + IonAvatar, + IonContent, + IonInfiniteScroll, + IonInfiniteScrollContent, + IonItem, + IonLabel, + IonList, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - styleUrls: ['example.component.scss'], + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList], }) export class ExampleComponent implements OnInit { - items = []; + items: string[] = []; ngOnInit() { for (let i = 1; i < 51; i++) { diff --git a/static/usage/v8/input-password-toggle/basic/angular.md b/static/usage/v8/input-password-toggle/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/input-password-toggle/basic/angular.md rename to static/usage/v8/input-password-toggle/basic/angular/example_component_html.md diff --git a/static/usage/v8/input-password-toggle/basic/angular/example_component_ts.md b/static/usage/v8/input-password-toggle/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..5257544984e --- /dev/null +++ b/static/usage/v8/input-password-toggle/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonInputPasswordToggle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonInputPasswordToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/input-password-toggle/basic/index.md b/static/usage/v8/input-password-toggle/basic/index.md index 037fec4f190..16f73c76caa 100644 --- a/static/usage/v8/input-password-toggle/basic/index.md +++ b/static/usage/v8/input-password-toggle/basic/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/input/basic/angular.md b/static/usage/v8/input/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/input/basic/angular.md rename to static/usage/v8/input/basic/angular/example_component_html.md diff --git a/static/usage/v8/input/basic/angular/example_component_ts.md b/static/usage/v8/input/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..fbf2fdf258f --- /dev/null +++ b/static/usage/v8/input/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/input/basic/index.md b/static/usage/v8/input/basic/index.md index bf35523196a..5c98ee52a5e 100644 --- a/static/usage/v8/input/basic/index.md +++ b/static/usage/v8/input/basic/index.md @@ -3,6 +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/input/clear/angular.md b/static/usage/v8/input/clear/angular/example_component_html.md similarity index 100% rename from static/usage/v8/input/clear/angular.md rename to static/usage/v8/input/clear/angular/example_component_html.md diff --git a/static/usage/v8/input/clear/angular/example_component_ts.md b/static/usage/v8/input/clear/angular/example_component_ts.md new file mode 100644 index 00000000000..fbf2fdf258f --- /dev/null +++ b/static/usage/v8/input/clear/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/input/clear/index.md b/static/usage/v8/input/clear/index.md index f3763e6024a..61e82d72c7a 100644 --- a/static/usage/v8/input/clear/index.md +++ b/static/usage/v8/input/clear/index.md @@ -3,6 +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/input/counter-alignment/angular.md b/static/usage/v8/input/counter-alignment/angular/example_component_html.md similarity index 100% rename from static/usage/v8/input/counter-alignment/angular.md rename to static/usage/v8/input/counter-alignment/angular/example_component_html.md diff --git a/static/usage/v8/input/counter-alignment/angular/example_component_ts.md b/static/usage/v8/input/counter-alignment/angular/example_component_ts.md new file mode 100644 index 00000000000..fbf2fdf258f --- /dev/null +++ b/static/usage/v8/input/counter-alignment/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/input/counter-alignment/index.md b/static/usage/v8/input/counter-alignment/index.md index b0192c1909b..351aa301f75 100644 --- a/static/usage/v8/input/counter-alignment/index.md +++ b/static/usage/v8/input/counter-alignment/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/input/counter/angular/example_component_ts.md b/static/usage/v8/input/counter/angular/example_component_ts.md index 2c08dc06fc2..2392e6cd2d9 100644 --- a/static/usage/v8/input/counter/angular/example_component_ts.md +++ b/static/usage/v8/input/counter/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonInput } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput], }) export class ExampleComponent { customCounterFormatter(inputLength: number, maxLength: number) { diff --git a/static/usage/v8/input/fill/angular.md b/static/usage/v8/input/fill/angular/example_component_html.md similarity index 100% rename from static/usage/v8/input/fill/angular.md rename to static/usage/v8/input/fill/angular/example_component_html.md diff --git a/static/usage/v8/input/fill/angular/example_component_ts.md b/static/usage/v8/input/fill/angular/example_component_ts.md new file mode 100644 index 00000000000..9dc150bb9c8 --- /dev/null +++ b/static/usage/v8/input/fill/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/input/fill/index.md b/static/usage/v8/input/fill/index.md index d640ed691b7..8d19505db27 100644 --- a/static/usage/v8/input/fill/index.md +++ b/static/usage/v8/input/fill/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/input/label-slot/angular.md b/static/usage/v8/input/label-slot/angular/example_component_html.md similarity index 100% rename from static/usage/v8/input/label-slot/angular.md rename to static/usage/v8/input/label-slot/angular/example_component_html.md diff --git a/static/usage/v8/input/label-slot/angular/example_component_ts.md b/static/usage/v8/input/label-slot/angular/example_component_ts.md new file mode 100644 index 00000000000..39bae8be846 --- /dev/null +++ b/static/usage/v8/input/label-slot/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList, IonText } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList, IonText], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/input/label-slot/index.md b/static/usage/v8/input/label-slot/index.md index cac5c19451b..7aa9df2a4ea 100644 --- a/static/usage/v8/input/label-slot/index.md +++ b/static/usage/v8/input/label-slot/index.md @@ -3,6 +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/input/mask/angular/app_module_ts.md b/static/usage/v8/input/mask/angular/app_module_ts.md deleted file mode 100644 index 7eb78206d7f..00000000000 --- a/static/usage/v8/input/mask/angular/app_module_ts.md +++ /dev/null @@ -1,19 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; - -import { IonicModule } from '@ionic/angular'; - -import { AppComponent } from './app.component'; -import { ExampleComponent } from './example.component'; - -import { MaskitoDirective } from '@maskito/angular'; - -@NgModule({ - imports: [BrowserModule, FormsModule, MaskitoDirective, IonicModule.forRoot({})], - declarations: [AppComponent, ExampleComponent], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` diff --git a/static/usage/v8/input/mask/angular/example_component_ts.md b/static/usage/v8/input/mask/angular/example_component_ts.md index c7f0c898017..a118f6faa72 100644 --- a/static/usage/v8/input/mask/angular/example_component_ts.md +++ b/static/usage/v8/input/mask/angular/example_component_ts.md @@ -1,11 +1,16 @@ ```ts import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular/standalone'; +import { FormsModule } from '@angular/forms'; import { MaskitoOptions, MaskitoElementPredicate, maskitoTransform } from '@maskito/core'; +import { MaskitoDirective } from '@maskito/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [FormsModule, IonInput, IonItem, IonList, MaskitoDirective], }) export class ExampleComponent { readonly phoneMask: MaskitoOptions = { diff --git a/static/usage/v8/input/mask/index.md b/static/usage/v8/input/mask/index.md index 72e2d24952a..7e6f8926016 100644 --- a/static/usage/v8/input/mask/index.md +++ b/static/usage/v8/input/mask/index.md @@ -7,7 +7,6 @@ import react_main_tsx from './react.md'; import vue_example_vue from './vue.md'; -import angular_app_module_ts from './angular/app_module_ts.md'; import angular_example_component_html from './angular/example_component_html.md'; import angular_example_component_ts from './angular/example_component_ts.md'; @@ -43,7 +42,6 @@ import angular_example_component_ts from './angular/example_component_ts.md'; }, angular: { files: { - 'src/app/app.module.ts': angular_app_module_ts, 'src/app/example.component.html': angular_example_component_html, 'src/app/example.component.ts': angular_example_component_ts, }, diff --git a/static/usage/v8/input/no-visible-label/angular.md b/static/usage/v8/input/no-visible-label/angular/example_component_html.md similarity index 100% rename from static/usage/v8/input/no-visible-label/angular.md rename to static/usage/v8/input/no-visible-label/angular/example_component_html.md diff --git a/static/usage/v8/input/no-visible-label/angular/example_component_ts.md b/static/usage/v8/input/no-visible-label/angular/example_component_ts.md new file mode 100644 index 00000000000..fbf2fdf258f --- /dev/null +++ b/static/usage/v8/input/no-visible-label/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/input/no-visible-label/index.md b/static/usage/v8/input/no-visible-label/index.md index 80b53644592..4213294c18a 100644 --- a/static/usage/v8/input/no-visible-label/index.md +++ b/static/usage/v8/input/no-visible-label/index.md @@ -3,6 +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/input/set-focus/angular.md b/static/usage/v8/input/set-focus/angular/example_component_html.md similarity index 100% rename from static/usage/v8/input/set-focus/angular.md rename to static/usage/v8/input/set-focus/angular/example_component_html.md diff --git a/static/usage/v8/input/set-focus/angular/example_component_ts.md b/static/usage/v8/input/set-focus/angular/example_component_ts.md new file mode 100644 index 00000000000..f950296880e --- /dev/null +++ b/static/usage/v8/input/set-focus/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonInput, IonItem, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/input/set-focus/index.md b/static/usage/v8/input/set-focus/index.md index 1191f5f2bfb..4106a081756 100644 --- a/static/usage/v8/input/set-focus/index.md +++ b/static/usage/v8/input/set-focus/index.md @@ -1,7 +1,9 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.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'; import vue from './vue.md'; import react from './react.md'; @@ -9,9 +11,14 @@ import react from './react.md'; version="8" code={{ javascript, - vue, - angular, react, + vue, + angular: { + files: { + 'src/app/example.component.html': angular_example_component_html, + 'src/app/example.component.ts': angular_example_component_ts, + }, + }, }} src="usage/v8/input/set-focus/demo.html" /> diff --git a/static/usage/v8/input/start-end-slots/angular/example_component_ts.md b/static/usage/v8/input/start-end-slots/angular/example_component_ts.md index 899f7a826a3..2a339335955 100644 --- a/static/usage/v8/input/start-end-slots/angular/example_component_ts.md +++ b/static/usage/v8/input/start-end-slots/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonIcon, IonInput, IonItem, IonList } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { eye, lockClosed } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { eye, lockClosed } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon, IonInput, IonItem, IonList], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/input/theming/colors/angular.md b/static/usage/v8/input/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v8/input/theming/colors/angular.md rename to static/usage/v8/input/theming/colors/angular/example_component_html.md diff --git a/static/usage/v8/input/theming/colors/angular/example_component_ts.md b/static/usage/v8/input/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..9dc150bb9c8 --- /dev/null +++ b/static/usage/v8/input/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/input/theming/colors/index.md b/static/usage/v8/input/theming/colors/index.md index 127bcfdb2f3..c08352f5b25 100644 --- a/static/usage/v8/input/theming/colors/index.md +++ b/static/usage/v8/input/theming/colors/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/input/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/input/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..9dc150bb9c8 --- /dev/null +++ b/static/usage/v8/input/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/input/theming/css-properties/index.md b/static/usage/v8/input/theming/css-properties/index.md index 77a33b0d8e8..32156fbeb3f 100644 --- a/static/usage/v8/input/theming/css-properties/index.md +++ b/static/usage/v8/input/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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 angular_global_css from './angular/global_css.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/item-divider/basic/angular.md b/static/usage/v8/item-divider/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/item-divider/basic/angular.md rename to static/usage/v8/item-divider/basic/angular/example_component_html.md diff --git a/static/usage/v8/item-divider/basic/angular/example_component_ts.md b/static/usage/v8/item-divider/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..1d2ea0f0dbf --- /dev/null +++ b/static/usage/v8/item-divider/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/item-divider/basic/index.md b/static/usage/v8/item-divider/basic/index.md index be308e5e361..ae41cc694f6 100644 --- a/static/usage/v8/item-divider/basic/index.md +++ b/static/usage/v8/item-divider/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/item-divider/theming/colors/angular.md b/static/usage/v8/item-divider/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v8/item-divider/theming/colors/angular.md rename to static/usage/v8/item-divider/theming/colors/angular/example_component_html.md diff --git a/static/usage/v8/item-divider/theming/colors/angular/example_component_ts.md b/static/usage/v8/item-divider/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..11c0c268eb1 --- /dev/null +++ b/static/usage/v8/item-divider/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItemDivider, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItemDivider, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/item-divider/theming/colors/index.md b/static/usage/v8/item-divider/theming/colors/index.md index 95d2d7db318..14b4143f7ab 100644 --- a/static/usage/v8/item-divider/theming/colors/index.md +++ b/static/usage/v8/item-divider/theming/colors/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/item-divider/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/item-divider/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..11c0c268eb1 --- /dev/null +++ b/static/usage/v8/item-divider/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItemDivider, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItemDivider, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/item-divider/theming/css-properties/index.md b/static/usage/v8/item-divider/theming/css-properties/index.md index a275698ebed..d41b02daf22 100644 --- a/static/usage/v8/item-divider/theming/css-properties/index.md +++ b/static/usage/v8/item-divider/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; diff --git a/static/usage/v8/item-group/sliding-items/angular.md b/static/usage/v8/item-group/sliding-items/angular/example_component_html.md similarity index 100% rename from static/usage/v8/item-group/sliding-items/angular.md rename to static/usage/v8/item-group/sliding-items/angular/example_component_html.md diff --git a/static/usage/v8/item-group/sliding-items/angular/example_component_ts.md b/static/usage/v8/item-group/sliding-items/angular/example_component_ts.md new file mode 100644 index 00000000000..5c823eabc6f --- /dev/null +++ b/static/usage/v8/item-group/sliding-items/angular/example_component_ts.md @@ -0,0 +1,20 @@ +```ts +import { Component } from '@angular/core'; +import { + IonItem, + IonItemDivider, + IonItemGroup, + IonItemOption, + IonItemOptions, + IonItemSliding, + IonLabel, +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/item-group/sliding-items/index.md b/static/usage/v8/item-group/sliding-items/index.md index 4a960f1ad83..fff3725257f 100644 --- a/static/usage/v8/item-group/sliding-items/index.md +++ b/static/usage/v8/item-group/sliding-items/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/item-sliding/basic/angular.md b/static/usage/v8/item-sliding/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/item-sliding/basic/angular.md rename to static/usage/v8/item-sliding/basic/angular/example_component_html.md diff --git a/static/usage/v8/item-sliding/basic/angular/example_component_ts.md b/static/usage/v8/item-sliding/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..e06ea993f98 --- /dev/null +++ b/static/usage/v8/item-sliding/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/item-sliding/basic/index.md b/static/usage/v8/item-sliding/basic/index.md index 5d7c11952fd..85ac79f71d1 100644 --- a/static/usage/v8/item-sliding/basic/index.md +++ b/static/usage/v8/item-sliding/basic/index.md @@ -3,6 +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/item-sliding/expandable/angular.md b/static/usage/v8/item-sliding/expandable/angular/example_component_html.md similarity index 100% rename from static/usage/v8/item-sliding/expandable/angular.md rename to static/usage/v8/item-sliding/expandable/angular/example_component_html.md diff --git a/static/usage/v8/item-sliding/expandable/angular/example_component_ts.md b/static/usage/v8/item-sliding/expandable/angular/example_component_ts.md new file mode 100644 index 00000000000..e06ea993f98 --- /dev/null +++ b/static/usage/v8/item-sliding/expandable/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/item-sliding/expandable/index.md b/static/usage/v8/item-sliding/expandable/index.md index 388b679d086..025987e1379 100644 --- a/static/usage/v8/item-sliding/expandable/index.md +++ b/static/usage/v8/item-sliding/expandable/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/item-sliding/icons/angular/example_component_ts.md b/static/usage/v8/item-sliding/icons/angular/example_component_ts.md index 5f32e92459b..a3169b92266 100644 --- a/static/usage/v8/item-sliding/icons/angular/example_component_ts.md +++ b/static/usage/v8/item-sliding/icons/angular/example_component_ts.md @@ -1,5 +1,14 @@ ```ts import { Component } from '@angular/core'; +import { + IonIcon, + IonItem, + IonItemOption, + IonItemOptions, + IonItemSliding, + IonLabel, + IonList, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { archive, heart, trash } from 'ionicons/icons'; @@ -8,6 +17,7 @@ import { archive, heart, trash } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/item/basic/angular.md b/static/usage/v8/item/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/item/basic/angular.md rename to static/usage/v8/item/basic/angular/example_component_html.md diff --git a/static/usage/v8/item/basic/angular/example_component_ts.md b/static/usage/v8/item/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..f3dbc764613 --- /dev/null +++ b/static/usage/v8/item/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/item/basic/index.md b/static/usage/v8/item/basic/index.md index 6c8369fb44a..fe339cd3dc1 100644 --- a/static/usage/v8/item/basic/index.md +++ b/static/usage/v8/item/basic/index.md @@ -3,6 +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/item/buttons/angular/example_component_ts.md b/static/usage/v8/item/buttons/angular/example_component_ts.md index 5f8f10b788e..6d056d6d719 100644 --- a/static/usage/v8/item/buttons/angular/example_component_ts.md +++ b/static/usage/v8/item/buttons/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { home, navigate, star } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { home, navigate, star } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon, IonItem, IonLabel], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/item/clickable/angular.md b/static/usage/v8/item/clickable/angular/example_component_html.md similarity index 100% rename from static/usage/v8/item/clickable/angular.md rename to static/usage/v8/item/clickable/angular/example_component_html.md diff --git a/static/usage/v8/item/clickable/angular/example_component_ts.md b/static/usage/v8/item/clickable/angular/example_component_ts.md new file mode 100644 index 00000000000..f3dbc764613 --- /dev/null +++ b/static/usage/v8/item/clickable/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/item/clickable/index.md b/static/usage/v8/item/clickable/index.md index 02770dea629..f65face9b26 100644 --- a/static/usage/v8/item/clickable/index.md +++ b/static/usage/v8/item/clickable/index.md @@ -3,6 +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/item/content-types/actions/angular/example_component_ts.md b/static/usage/v8/item/content-types/actions/angular/example_component_ts.md index 019d31f99f1..5944353da35 100644 --- a/static/usage/v8/item/content-types/actions/angular/example_component_ts.md +++ b/static/usage/v8/item/content-types/actions/angular/example_component_ts.md @@ -1,5 +1,19 @@ ```ts import { Component } from '@angular/core'; +import { + IonAvatar, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonItemOption, + IonItemOptions, + IonItemSliding, + IonLabel, + IonList, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { pin, share, trash } from 'ionicons/icons'; @@ -8,6 +22,20 @@ import { pin, share, trash } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [ + IonAvatar, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonItemOption, + IonItemOptions, + IonItemSliding, + IonLabel, + IonList, + IonTitle, + IonToolbar, + ], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/item/content-types/controls/angular.md b/static/usage/v8/item/content-types/controls/angular/example_component_html.md similarity index 100% rename from static/usage/v8/item/content-types/controls/angular.md rename to static/usage/v8/item/content-types/controls/angular/example_component_html.md diff --git a/static/usage/v8/item/content-types/controls/angular/example_component_ts.md b/static/usage/v8/item/content-types/controls/angular/example_component_ts.md new file mode 100644 index 00000000000..18cbb2e5926 --- /dev/null +++ b/static/usage/v8/item/content-types/controls/angular/example_component_ts.md @@ -0,0 +1,21 @@ +```ts +import { Component } from '@angular/core'; +import { + IonCheckbox, + IonContent, + IonHeader, + IonInput, + IonItem, + IonList, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox, IonContent, IonHeader, IonInput, IonItem, IonList, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/item/content-types/controls/index.md b/static/usage/v8/item/content-types/controls/index.md index e1992178863..4d76397496b 100644 --- a/static/usage/v8/item/content-types/controls/index.md +++ b/static/usage/v8/item/content-types/controls/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/item/inputs/angular.md b/static/usage/v8/item/inputs/angular/example_component_html.md similarity index 100% rename from static/usage/v8/item/inputs/angular.md rename to static/usage/v8/item/inputs/angular/example_component_html.md diff --git a/static/usage/v8/item/inputs/angular/example_component_ts.md b/static/usage/v8/item/inputs/angular/example_component_ts.md new file mode 100644 index 00000000000..e42eafb8242 --- /dev/null +++ b/static/usage/v8/item/inputs/angular/example_component_ts.md @@ -0,0 +1,20 @@ +```ts +import { Component } from '@angular/core'; +import { + IonCheckbox, + IonInput, + IonItem, + IonRange, + IonSelect, + IonSelectOption, + IonToggle, +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox, IonInput, IonItem, IonRange, IonSelect, IonSelectOption, IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/item/inputs/index.md b/static/usage/v8/item/inputs/index.md index fd0da581a1d..21307b1151d 100644 --- a/static/usage/v8/item/inputs/index.md +++ b/static/usage/v8/item/inputs/index.md @@ -3,6 +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/item/lines/angular/example_component_ts.md b/static/usage/v8/item/lines/angular/example_component_ts.md index 3122a1f730f..06597ba96cf 100644 --- a/static/usage/v8/item/lines/angular/example_component_ts.md +++ b/static/usage/v8/item/lines/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonIcon, IonItem, IonLabel } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { informationCircle, star } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { informationCircle, star } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonIcon, IonItem, IonLabel], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/item/media/angular.md b/static/usage/v8/item/media/angular/example_component_html.md similarity index 100% rename from static/usage/v8/item/media/angular.md rename to static/usage/v8/item/media/angular/example_component_html.md diff --git a/static/usage/v8/item/media/angular/example_component_ts.md b/static/usage/v8/item/media/angular/example_component_ts.md new file mode 100644 index 00000000000..d8cb142b8f1 --- /dev/null +++ b/static/usage/v8/item/media/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAvatar, IonItem, IonLabel, IonThumbnail } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonItem, IonLabel, IonThumbnail], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/item/media/index.md b/static/usage/v8/item/media/index.md index 58ff650da28..5bbd16b0f74 100644 --- a/static/usage/v8/item/media/index.md +++ b/static/usage/v8/item/media/index.md @@ -3,6 +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/item/theming/colors/angular.md b/static/usage/v8/item/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v8/item/theming/colors/angular.md rename to static/usage/v8/item/theming/colors/angular/example_component_html.md diff --git a/static/usage/v8/item/theming/colors/angular/example_component_ts.md b/static/usage/v8/item/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..f3dbc764613 --- /dev/null +++ b/static/usage/v8/item/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/item/theming/colors/index.md b/static/usage/v8/item/theming/colors/index.md index a58e153f5a2..05e86f75251 100644 --- a/static/usage/v8/item/theming/colors/index.md +++ b/static/usage/v8/item/theming/colors/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/item/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/item/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..f3dbc764613 --- /dev/null +++ b/static/usage/v8/item/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/item/theming/css-properties/index.md b/static/usage/v8/item/theming/css-properties/index.md index 0e6793de318..752dee16ad6 100644 --- a/static/usage/v8/item/theming/css-properties/index.md +++ b/static/usage/v8/item/theming/css-properties/index.md @@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md'; import vue from './vue.md'; -import angular_example_component_css from './angular/example_component_css.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'; diff --git a/static/usage/v8/keyboard/inputmode/angular.md b/static/usage/v8/keyboard/inputmode/angular/example_component_html.md similarity index 100% rename from static/usage/v8/keyboard/inputmode/angular.md rename to static/usage/v8/keyboard/inputmode/angular/example_component_html.md diff --git a/static/usage/v8/keyboard/inputmode/angular/example_component_ts.md b/static/usage/v8/keyboard/inputmode/angular/example_component_ts.md new file mode 100644 index 00000000000..fbf2fdf258f --- /dev/null +++ b/static/usage/v8/keyboard/inputmode/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/keyboard/inputmode/index.md b/static/usage/v8/keyboard/inputmode/index.md index 1d80ba8703d..fca0fd02bc5 100644 --- a/static/usage/v8/keyboard/inputmode/index.md +++ b/static/usage/v8/keyboard/inputmode/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/label/basic/angular.md b/static/usage/v8/label/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/label/basic/angular.md rename to static/usage/v8/label/basic/angular/example_component_html.md diff --git a/static/usage/v8/label/basic/angular/example_component_ts.md b/static/usage/v8/label/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..5a7fdcebe2b --- /dev/null +++ b/static/usage/v8/label/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/label/basic/index.md b/static/usage/v8/label/basic/index.md index 09def9afbe1..32c8857bf28 100644 --- a/static/usage/v8/label/basic/index.md +++ b/static/usage/v8/label/basic/index.md @@ -3,6 +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/label/input/angular.md b/static/usage/v8/label/input/angular/example_component_html.md similarity index 100% rename from static/usage/v8/label/input/angular.md rename to static/usage/v8/label/input/angular/example_component_html.md diff --git a/static/usage/v8/label/input/angular/example_component_ts.md b/static/usage/v8/label/input/angular/example_component_ts.md new file mode 100644 index 00000000000..88e481153be --- /dev/null +++ b/static/usage/v8/label/input/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox, IonInput, IonItem, IonLabel, IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/label/input/index.md b/static/usage/v8/label/input/index.md index 35375f73758..4e9f2a35b88 100644 --- a/static/usage/v8/label/input/index.md +++ b/static/usage/v8/label/input/index.md @@ -3,6 +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/label/item/angular.md b/static/usage/v8/label/item/angular/example_component_html.md similarity index 100% rename from static/usage/v8/label/item/angular.md rename to static/usage/v8/label/item/angular/example_component_html.md diff --git a/static/usage/v8/label/item/angular/example_component_ts.md b/static/usage/v8/label/item/angular/example_component_ts.md new file mode 100644 index 00000000000..f3dbc764613 --- /dev/null +++ b/static/usage/v8/label/item/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/label/item/index.md b/static/usage/v8/label/item/index.md index 4e872990d19..d06297eb34b 100644 --- a/static/usage/v8/label/item/index.md +++ b/static/usage/v8/label/item/index.md @@ -3,6 +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/label/theming/colors/angular.md b/static/usage/v8/label/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v8/label/theming/colors/angular.md rename to static/usage/v8/label/theming/colors/angular/example_component_html.md diff --git a/static/usage/v8/label/theming/colors/angular/example_component_ts.md b/static/usage/v8/label/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..5a7fdcebe2b --- /dev/null +++ b/static/usage/v8/label/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/label/theming/colors/index.md b/static/usage/v8/label/theming/colors/index.md index bf94e2a9a32..840dfd5137d 100644 --- a/static/usage/v8/label/theming/colors/index.md +++ b/static/usage/v8/label/theming/colors/index.md @@ -3,6 +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/layout/dynamic-font-scaling/angular/example_component_ts.md b/static/usage/v8/layout/dynamic-font-scaling/angular/example_component_ts.md index 4e45ccc6674..d5a28316278 100644 --- a/static/usage/v8/layout/dynamic-font-scaling/angular/example_component_ts.md +++ b/static/usage/v8/layout/dynamic-font-scaling/angular/example_component_ts.md @@ -1,5 +1,22 @@ ```ts import { Component } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonFooter, + IonHeader, + IonIcon, + IonInput, + IonItem, + IonLabel, + IonList, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { create } from 'ionicons/icons'; @@ -8,6 +25,23 @@ import { create } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [ + IonBackButton, + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonFooter, + IonHeader, + IonIcon, + IonInput, + IonItem, + IonLabel, + IonList, + IonTitle, + IonToggle, + IonToolbar, + ], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/list-header/basic/angular.md b/static/usage/v8/list-header/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/list-header/basic/angular.md rename to static/usage/v8/list-header/basic/angular/example_component_html.md diff --git a/static/usage/v8/list-header/basic/angular/example_component_ts.md b/static/usage/v8/list-header/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..dd5f0b5005b --- /dev/null +++ b/static/usage/v8/list-header/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonListHeader], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/list-header/basic/index.md b/static/usage/v8/list-header/basic/index.md index b54ef34c480..487e450de82 100644 --- a/static/usage/v8/list-header/basic/index.md +++ b/static/usage/v8/list-header/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/list-header/buttons/angular.md b/static/usage/v8/list-header/buttons/angular/example_component_html.md similarity index 100% rename from static/usage/v8/list-header/buttons/angular.md rename to static/usage/v8/list-header/buttons/angular/example_component_html.md diff --git a/static/usage/v8/list-header/buttons/angular/example_component_ts.md b/static/usage/v8/list-header/buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..a608c44a22d --- /dev/null +++ b/static/usage/v8/list-header/buttons/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonItem, IonLabel, IonList, IonListHeader], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/list-header/buttons/index.md b/static/usage/v8/list-header/buttons/index.md index 2acfe8959d3..ca9d287927f 100644 --- a/static/usage/v8/list-header/buttons/index.md +++ b/static/usage/v8/list-header/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/list-header/lines/angular.md b/static/usage/v8/list-header/lines/angular/example_component_html.md similarity index 100% rename from static/usage/v8/list-header/lines/angular.md rename to static/usage/v8/list-header/lines/angular/example_component_html.md diff --git a/static/usage/v8/list-header/lines/angular/example_component_ts.md b/static/usage/v8/list-header/lines/angular/example_component_ts.md new file mode 100644 index 00000000000..dd5f0b5005b --- /dev/null +++ b/static/usage/v8/list-header/lines/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonListHeader], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/list-header/lines/index.md b/static/usage/v8/list-header/lines/index.md index 99855499202..06db229478e 100644 --- a/static/usage/v8/list-header/lines/index.md +++ b/static/usage/v8/list-header/lines/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/list-header/theming/colors/angular.md b/static/usage/v8/list-header/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v8/list-header/theming/colors/angular.md rename to static/usage/v8/list-header/theming/colors/angular/example_component_html.md diff --git a/static/usage/v8/list-header/theming/colors/angular/example_component_ts.md b/static/usage/v8/list-header/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..3a455a0c901 --- /dev/null +++ b/static/usage/v8/list-header/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel, IonListHeader } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel, IonListHeader], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/list-header/theming/colors/index.md b/static/usage/v8/list-header/theming/colors/index.md index eddf36b82d4..0ef8168a62f 100644 --- a/static/usage/v8/list-header/theming/colors/index.md +++ b/static/usage/v8/list-header/theming/colors/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/list-header/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/list-header/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..3a455a0c901 --- /dev/null +++ b/static/usage/v8/list-header/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel, IonListHeader } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel, IonListHeader], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/list-header/theming/css-properties/index.md b/static/usage/v8/list-header/theming/css-properties/index.md index c04c154d6e0..2602475525e 100644 --- a/static/usage/v8/list-header/theming/css-properties/index.md +++ b/static/usage/v8/list-header/theming/css-properties/index.md @@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md'; import vue from './vue.md'; -import angular_example_component_css from './angular/example_component_css.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 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/list/inset/angular.md b/static/usage/v8/list/inset/angular/example_component_html.md similarity index 100% rename from static/usage/v8/list/inset/angular.md rename to static/usage/v8/list/inset/angular/example_component_html.md diff --git a/static/usage/v8/list/inset/angular/example_component_ts.md b/static/usage/v8/list/inset/angular/example_component_ts.md new file mode 100644 index 00000000000..0ebeec81ff2 --- /dev/null +++ b/static/usage/v8/list/inset/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonItem, IonLabel, IonList } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonItem, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/list/inset/index.md b/static/usage/v8/list/inset/index.md index 9d6ecb1fc11..50e48fd5af8 100644 --- a/static/usage/v8/list/inset/index.md +++ b/static/usage/v8/list/inset/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'; +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/loading/controller/angular/example_component_ts.md b/static/usage/v8/loading/controller/angular/example_component_ts.md index bd4b86eef29..cec468c627c 100644 --- a/static/usage/v8/loading/controller/angular/example_component_ts.md +++ b/static/usage/v8/loading/controller/angular/example_component_ts.md @@ -1,11 +1,12 @@ ```ts import { Component } from '@angular/core'; - -import { LoadingController } from '@ionic/angular'; +import { IonButton, LoadingController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], }) export class ExampleComponent { constructor(private loadingCtrl: LoadingController) {} diff --git a/static/usage/v8/loading/inline/angular.md b/static/usage/v8/loading/inline/angular/example_component_html.md similarity index 100% rename from static/usage/v8/loading/inline/angular.md rename to static/usage/v8/loading/inline/angular/example_component_html.md diff --git a/static/usage/v8/loading/inline/angular/example_component_ts.md b/static/usage/v8/loading/inline/angular/example_component_ts.md new file mode 100644 index 00000000000..1807657477f --- /dev/null +++ b/static/usage/v8/loading/inline/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonLoading } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonLoading], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/loading/inline/index.md b/static/usage/v8/loading/inline/index.md index 2ca1e9b78d7..16ec10fcab1 100644 --- a/static/usage/v8/loading/inline/index.md +++ b/static/usage/v8/loading/inline/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/loading/spinners/angular.md b/static/usage/v8/loading/spinners/angular/example_component_html.md similarity index 100% rename from static/usage/v8/loading/spinners/angular.md rename to static/usage/v8/loading/spinners/angular/example_component_html.md diff --git a/static/usage/v8/loading/spinners/angular/example_component_ts.md b/static/usage/v8/loading/spinners/angular/example_component_ts.md new file mode 100644 index 00000000000..1807657477f --- /dev/null +++ b/static/usage/v8/loading/spinners/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonLoading } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonLoading], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/loading/spinners/index.md b/static/usage/v8/loading/spinners/index.md index d2d4ec70db0..f340c1500fd 100644 --- a/static/usage/v8/loading/spinners/index.md +++ b/static/usage/v8/loading/spinners/index.md @@ -1,7 +1,9 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.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'; import react from './react.md'; import vue from './vue.md'; @@ -11,7 +13,12 @@ import vue from './vue.md'; javascript, react, vue, - angular, + angular: { + files: { + 'src/app/example.component.html': angular_example_component_html, + 'src/app/example.component.ts': angular_example_component_ts, + }, + }, }} src="usage/v8/loading/spinners/demo.html" /> diff --git a/static/usage/v8/loading/theming/angular/example_component_ts.md b/static/usage/v8/loading/theming/angular/example_component_ts.md new file mode 100644 index 00000000000..1807657477f --- /dev/null +++ b/static/usage/v8/loading/theming/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonLoading } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonLoading], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/loading/theming/index.md b/static/usage/v8/loading/theming/index.md index d2ed15da293..e2b3d520732 100644 --- a/static/usage/v8/loading/theming/index.md +++ b/static/usage/v8/loading/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'; (); - checkboxChanged(event: any) { - const ev = event as CheckboxCustomEvent; - const checked = ev.detail.checked; + checkboxChanged(event: CheckboxCustomEvent) { + const checked = event.detail.checked; this.dismissChange.emit(checked); } diff --git a/static/usage/v8/modal/can-dismiss/child-state/angular/example_component_ts.md b/static/usage/v8/modal/can-dismiss/child-state/angular/example_component_ts.md index 19544ec574a..1f1f3fd5e57 100644 --- a/static/usage/v8/modal/can-dismiss/child-state/angular/example_component_ts.md +++ b/static/usage/v8/modal/can-dismiss/child-state/angular/example_component_ts.md @@ -1,14 +1,26 @@ ```ts import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { + ActionSheetController, + IonButton, + IonContent, + IonHeader, + IonModal, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; -import { ActionSheetController } from '@ionic/angular'; +import { ChildComponent } from './child.component'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ChildComponent, FormsModule, IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar], }) export class ExampleComponent { - presentingElement = undefined; + presentingElement!: HTMLElement | null; private canDismissOverride = false; diff --git a/static/usage/v8/modal/can-dismiss/child-state/index.md b/static/usage/v8/modal/can-dismiss/child-state/index.md index 75821bfd692..786aff9a003 100644 --- a/static/usage/v8/modal/can-dismiss/child-state/index.md +++ b/static/usage/v8/modal/can-dismiss/child-state/index.md @@ -10,7 +10,6 @@ import angular_example_component_html from './angular/example_component_html.md' import angular_example_component_ts from './angular/example_component_ts.md'; import angular_child_component_html from './angular/child_component_html.md'; import angular_child_component_ts from './angular/child_component_ts.md'; -import angular_app_module_ts from './angular/app_module_ts.md'; Go to Page Two `, + imports: [IonButton, IonContent], }) export class PageOneComponent { constructor(private nav: IonNav) {} diff --git a/static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md index 5b1b70c3474..03f298b15ae 100644 --- a/static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md +++ b/static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md @@ -1,6 +1,6 @@ ```ts import { Component } from '@angular/core'; -import { IonNav } from '@ionic/angular'; +import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone'; @Component({ selector: 'app-page-one', @@ -11,6 +11,7 @@ import { IonNav } from '@ionic/angular'; Go to Root `, + imports: [IonButton, IonContent], }) export class PageThreeComponent { constructor(private nav: IonNav) {} diff --git a/static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md index 0cd5713c062..769b0bc9bda 100644 --- a/static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md +++ b/static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md @@ -1,6 +1,6 @@ ```ts import { Component } from '@angular/core'; -import { IonNav } from '@ionic/angular'; +import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone'; import { PageThreeComponent } from './page-three.component'; @@ -12,6 +12,7 @@ import { PageThreeComponent } from './page-three.component'; Go to Page Three `, + imports: [IonButton, IonContent], }) export class PageTwoComponent { component = PageThreeComponent; diff --git a/static/usage/v8/nav/modal-navigation/index.md b/static/usage/v8/nav/modal-navigation/index.md index 3a6a6ab3142..e2e7320fe4d 100644 --- a/static/usage/v8/nav/modal-navigation/index.md +++ b/static/usage/v8/nav/modal-navigation/index.md @@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; -import angular_app_module_ts from './angular/app_module_ts.md'; import angular_example_component_ts from './angular/example_component_ts.md'; import angular_example_component_html from './angular/example_component_html.md'; import angular_page_one_component_ts from './angular/page_one_component_ts.md'; @@ -30,7 +29,6 @@ import vue_page_three from './vue/page_three_vue.md'; 'src/app/page-one.component.ts': angular_page_one_component_ts, 'src/app/page-two.component.ts': angular_page_two_component_ts, 'src/app/page-three.component.ts': angular_page_three_component_ts, - 'src/app/app.module.ts': angular_app_module_ts, }, }, react: { diff --git a/static/usage/v8/nav/nav-link/angular/app_module_ts.md b/static/usage/v8/nav/nav-link/angular/app_module_ts.md deleted file mode 100644 index d3b8b44f6ce..00000000000 --- a/static/usage/v8/nav/nav-link/angular/app_module_ts.md +++ /dev/null @@ -1,21 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - -import { IonicModule } from '@ionic/angular'; - -import { AppComponent } from './app.component'; -import { ExampleComponent } from './example.component'; - -import { PageOneComponent } from './page-one.component'; -import { PageTwoComponent } from './page-two.component'; -import { PageThreeComponent } from './page-three.component'; - -@NgModule({ - imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})], - declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` diff --git a/static/usage/v8/nav/nav-link/angular/example_component_ts.md b/static/usage/v8/nav/nav-link/angular/example_component_ts.md index b123a4858ce..4c364e72340 100644 --- a/static/usage/v8/nav/nav-link/angular/example_component_ts.md +++ b/static/usage/v8/nav/nav-link/angular/example_component_ts.md @@ -1,11 +1,14 @@ ```ts import { Component } from '@angular/core'; +import { IonNav } from '@ionic/angular/standalone'; import { PageOneComponent } from './page-one.component'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonNav], }) export class ExampleComponent { component = PageOneComponent; diff --git a/static/usage/v8/nav/nav-link/angular/page_one_component_ts.md b/static/usage/v8/nav/nav-link/angular/page_one_component_ts.md index 06c42b342cf..b6a83169e18 100644 --- a/static/usage/v8/nav/nav-link/angular/page_one_component_ts.md +++ b/static/usage/v8/nav/nav-link/angular/page_one_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar } from '@ionic/angular/standalone'; import { PageTwoComponent } from './page-two.component'; @@ -18,6 +19,7 @@ import { PageTwoComponent } from './page-two.component'; `, + imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar], }) export class PageOneComponent { component = PageTwoComponent; diff --git a/static/usage/v8/nav/nav-link/angular/page_three_component_ts.md b/static/usage/v8/nav/nav-link/angular/page_three_component_ts.md index d9e95ed7218..4cc4fc01be1 100644 --- a/static/usage/v8/nav/nav-link/angular/page_three_component_ts.md +++ b/static/usage/v8/nav/nav-link/angular/page_three_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; @Component({ selector: 'app-page-one', @@ -16,6 +17,7 @@ import { Component } from '@angular/core';

Page Three

`, + imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar], }) export class PageThreeComponent {} ``` diff --git a/static/usage/v8/nav/nav-link/angular/page_two_component_ts.md b/static/usage/v8/nav/nav-link/angular/page_two_component_ts.md index d6edd90a593..d1986f19a96 100644 --- a/static/usage/v8/nav/nav-link/angular/page_two_component_ts.md +++ b/static/usage/v8/nav/nav-link/angular/page_two_component_ts.md @@ -1,5 +1,15 @@ ```ts import { Component } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonNavLink, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; import { PageThreeComponent } from './page-three.component'; @@ -23,6 +33,7 @@ import { PageThreeComponent } from './page-three.component';
`, + imports: [IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar], }) export class PageTwoComponent { component = PageThreeComponent; diff --git a/static/usage/v8/nav/nav-link/index.md b/static/usage/v8/nav/nav-link/index.md index eed4ca22d83..07a944aefd7 100644 --- a/static/usage/v8/nav/nav-link/index.md +++ b/static/usage/v8/nav/nav-link/index.md @@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; -import angular_app_module_ts from './angular/app_module_ts.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_page_one_component_ts from './angular/page_one_component_ts.md'; @@ -30,7 +29,6 @@ import vue_page_three from './vue/page_three_vue.md'; 'src/app/page-one.component.ts': angular_page_one_component_ts, 'src/app/page-two.component.ts': angular_page_two_component_ts, 'src/app/page-three.component.ts': angular_page_three_component_ts, - 'src/app/app.module.ts': angular_app_module_ts, }, }, react: { diff --git a/static/usage/v8/note/basic/angular.md b/static/usage/v8/note/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/note/basic/angular.md rename to static/usage/v8/note/basic/angular/example_component_html.md diff --git a/static/usage/v8/note/basic/angular/example_component_ts.md b/static/usage/v8/note/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..38db87894b7 --- /dev/null +++ b/static/usage/v8/note/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonNote } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonNote], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/note/basic/index.md b/static/usage/v8/note/basic/index.md index 80679ac212b..1561441d325 100644 --- a/static/usage/v8/note/basic/index.md +++ b/static/usage/v8/note/basic/index.md @@ -3,6 +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/note/item/angular.md b/static/usage/v8/note/item/angular/example_component_html.md similarity index 100% rename from static/usage/v8/note/item/angular.md rename to static/usage/v8/note/item/angular/example_component_html.md diff --git a/static/usage/v8/note/item/angular/example_component_ts.md b/static/usage/v8/note/item/angular/example_component_ts.md new file mode 100644 index 00000000000..56ed0d01872 --- /dev/null +++ b/static/usage/v8/note/item/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonNote } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonNote], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/note/item/index.md b/static/usage/v8/note/item/index.md index ff7e768cc2b..9a07139ebc2 100644 --- a/static/usage/v8/note/item/index.md +++ b/static/usage/v8/note/item/index.md @@ -3,6 +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/note/theming/colors/angular.md b/static/usage/v8/note/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v8/note/theming/colors/angular.md rename to static/usage/v8/note/theming/colors/angular/example_component_html.md diff --git a/static/usage/v8/note/theming/colors/angular/example_component_ts.md b/static/usage/v8/note/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..38db87894b7 --- /dev/null +++ b/static/usage/v8/note/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonNote } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonNote], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/note/theming/colors/index.md b/static/usage/v8/note/theming/colors/index.md index 79018521313..6ab9f4a4302 100644 --- a/static/usage/v8/note/theming/colors/index.md +++ b/static/usage/v8/note/theming/colors/index.md @@ -3,6 +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/note/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/note/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..38db87894b7 --- /dev/null +++ b/static/usage/v8/note/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonNote } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonNote], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/note/theming/css-properties/index.md b/static/usage/v8/note/theming/css-properties/index.md index c0b40585c57..434c963d631 100644 --- a/static/usage/v8/note/theming/css-properties/index.md +++ b/static/usage/v8/note/theming/css-properties/index.md @@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md'; import vue from './vue.md'; -import angular_example_component_css from './angular/example_component_css.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'; { + handler: (value: PickerValue) => { console.log(`You selected: ${value.languages.value}`); }, }, diff --git a/static/usage/v8/picker-legacy/inline/trigger/angular/example_component_ts.md b/static/usage/v8/picker-legacy/inline/trigger/angular/example_component_ts.md index 7a638c60964..31eb752d4a9 100644 --- a/static/usage/v8/picker-legacy/inline/trigger/angular/example_component_ts.md +++ b/static/usage/v8/picker-legacy/inline/trigger/angular/example_component_ts.md @@ -1,9 +1,19 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonPickerLegacy } from '@ionic/angular/standalone'; + +interface PickerValue { + languages: { + text: string; + value: string; + }; +} @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonPickerLegacy], }) export class ExampleComponent { public pickerColumns = [ @@ -37,7 +47,7 @@ export class ExampleComponent { }, { text: 'Confirm', - handler: (value) => { + handler: (value: PickerValue) => { console.log(`You selected: ${value.languages.value}`); }, }, diff --git a/static/usage/v8/picker-legacy/multiple-column/angular/example_component_ts.md b/static/usage/v8/picker-legacy/multiple-column/angular/example_component_ts.md index 6f252e19dc9..5ac50ceecf7 100644 --- a/static/usage/v8/picker-legacy/multiple-column/angular/example_component_ts.md +++ b/static/usage/v8/picker-legacy/multiple-column/angular/example_component_ts.md @@ -1,9 +1,27 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonPickerLegacy } from '@ionic/angular/standalone'; + +interface PickerValue { + meat: { + text: string; + value: string; + }; + veggies: { + text: string; + value: string; + }; + crust: { + text: string; + value: string; + }; +} @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonPickerLegacy], }) export class ExampleComponent { public pickerColumns = [ @@ -67,7 +85,7 @@ export class ExampleComponent { }, { text: 'Confirm', - handler: (value) => { + handler: (value: PickerValue) => { console.log(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); }, }, diff --git a/static/usage/v8/picker/basic/angular.md b/static/usage/v8/picker/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/picker/basic/angular.md rename to static/usage/v8/picker/basic/angular/example_component_html.md diff --git a/static/usage/v8/picker/basic/angular/example_component_ts.md b/static/usage/v8/picker/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..a2519198b50 --- /dev/null +++ b/static/usage/v8/picker/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonPicker, IonPickerColumn, IonPickerColumnOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/picker/basic/index.md b/static/usage/v8/picker/basic/index.md index ded2d4fe4b3..57c99c522c9 100644 --- a/static/usage/v8/picker/basic/index.md +++ b/static/usage/v8/picker/basic/index.md @@ -1,7 +1,9 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.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'; import react from './react.md'; import vue from './vue.md'; @@ -11,7 +13,12 @@ import vue from './vue.md'; javascript, react, vue, - angular, + angular: { + files: { + 'src/app/example.component.html': angular_example_component_html, + 'src/app/example.component.ts': angular_example_component_ts, + }, + }, }} src="usage/v8/picker/basic/demo.html" size="medium" diff --git a/static/usage/v8/picker/modal/angular/example_component_ts.md b/static/usage/v8/picker/modal/angular/example_component_ts.md index 406b87a5af2..72ecb6a854e 100644 --- a/static/usage/v8/picker/modal/angular/example_component_ts.md +++ b/static/usage/v8/picker/modal/angular/example_component_ts.md @@ -1,10 +1,20 @@ ```ts import { Component } from '@angular/core'; +import { + IonButton, + IonButtons, + IonModal, + IonPicker, + IonPickerColumn, + IonPickerColumnOption, + IonToolbar, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: './example.component.html', styleUrls: ['./example.component.css'], + imports: [IonButton, IonButtons, IonModal, IonPicker, IonPickerColumn, IonPickerColumnOption, IonToolbar], }) export class ExampleComponent { currentValue = 'javascript'; diff --git a/static/usage/v8/picker/prefix-suffix/angular.md b/static/usage/v8/picker/prefix-suffix/angular/example_component_html.md similarity index 100% rename from static/usage/v8/picker/prefix-suffix/angular.md rename to static/usage/v8/picker/prefix-suffix/angular/example_component_html.md diff --git a/static/usage/v8/picker/prefix-suffix/angular/example_component_ts.md b/static/usage/v8/picker/prefix-suffix/angular/example_component_ts.md new file mode 100644 index 00000000000..a2519198b50 --- /dev/null +++ b/static/usage/v8/picker/prefix-suffix/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonPicker, IonPickerColumn, IonPickerColumnOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/picker/prefix-suffix/index.md b/static/usage/v8/picker/prefix-suffix/index.md index af398fd03a6..0b50e1e63a1 100644 --- a/static/usage/v8/picker/prefix-suffix/index.md +++ b/static/usage/v8/picker/prefix-suffix/index.md @@ -1,7 +1,9 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.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'; import react from './react.md'; import vue from './vue.md'; @@ -11,7 +13,12 @@ import vue from './vue.md'; javascript, react, vue, - angular, + angular: { + files: { + 'src/app/example.component.html': angular_example_component_html, + 'src/app/example.component.ts': angular_example_component_ts, + }, + }, }} src="usage/v8/picker/prefix-suffix/demo.html" size="medium" diff --git a/static/usage/v8/picker/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/picker/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..a2519198b50 --- /dev/null +++ b/static/usage/v8/picker/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonPicker, IonPickerColumn, IonPickerColumnOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/picker/theming/css-properties/index.md b/static/usage/v8/picker/theming/css-properties/index.md index 29f6db3c1c9..1c5abe28947 100644 --- a/static/usage/v8/picker/theming/css-properties/index.md +++ b/static/usage/v8/picker/theming/css-properties/index.md @@ -4,6 +4,7 @@ import javascript from './javascript.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 vue from './vue.md'; @@ -25,6 +26,7 @@ import react_main_css from './react/main_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, }, }, }} diff --git a/static/usage/v8/popover/customization/positioning/angular/example_component_ts.md b/static/usage/v8/popover/customization/positioning/angular/example_component_ts.md index 4db53a836a9..3d0ceecf836 100644 --- a/static/usage/v8/popover/customization/positioning/angular/example_component_ts.md +++ b/static/usage/v8/popover/customization/positioning/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonPopover], }) export class ExampleComponent {} ``` diff --git a/static/usage/v8/popover/customization/sizing/angular.md b/static/usage/v8/popover/customization/sizing/angular/example_component_html.md similarity index 100% rename from static/usage/v8/popover/customization/sizing/angular.md rename to static/usage/v8/popover/customization/sizing/angular/example_component_html.md diff --git a/static/usage/v8/popover/customization/sizing/angular/example_component_ts.md b/static/usage/v8/popover/customization/sizing/angular/example_component_ts.md new file mode 100644 index 00000000000..3d0ceecf836 --- /dev/null +++ b/static/usage/v8/popover/customization/sizing/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonPopover], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/popover/customization/sizing/index.md b/static/usage/v8/popover/customization/sizing/index.md index 1d79e113da8..5848dbfe329 100644 --- a/static/usage/v8/popover/customization/sizing/index.md +++ b/static/usage/v8/popover/customization/sizing/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/popover/customization/styling/angular/example_component_ts.md b/static/usage/v8/popover/customization/styling/angular/example_component_ts.md new file mode 100644 index 00000000000..3d0ceecf836 --- /dev/null +++ b/static/usage/v8/popover/customization/styling/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonPopover], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/popover/customization/styling/index.md b/static/usage/v8/popover/customization/styling/index.md index 4e9429b2f2a..6434328a3ca 100644 --- a/static/usage/v8/popover/customization/styling/index.md +++ b/static/usage/v8/popover/customization/styling/index.md @@ -7,6 +7,7 @@ import react_main_tsx from './react/main_tsx.md'; import react_main_css from './react/main_css.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/v8/popover/performance/mount/angular.md b/static/usage/v8/popover/performance/mount/angular/example_component_html.md similarity index 100% rename from static/usage/v8/popover/performance/mount/angular.md rename to static/usage/v8/popover/performance/mount/angular/example_component_html.md diff --git a/static/usage/v8/popover/performance/mount/angular/example_component_ts.md b/static/usage/v8/popover/performance/mount/angular/example_component_ts.md new file mode 100644 index 00000000000..3d0ceecf836 --- /dev/null +++ b/static/usage/v8/popover/performance/mount/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonPopover } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonPopover], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/popover/performance/mount/index.md b/static/usage/v8/popover/performance/mount/index.md index b6b291a7036..ea6103db4f3 100644 --- a/static/usage/v8/popover/performance/mount/index.md +++ b/static/usage/v8/popover/performance/mount/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/progress-bar/buffer/angular/example_component_ts.md b/static/usage/v8/progress-bar/buffer/angular/example_component_ts.md index a876a376204..fbf879f8d36 100644 --- a/static/usage/v8/progress-bar/buffer/angular/example_component_ts.md +++ b/static/usage/v8/progress-bar/buffer/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonProgressBar } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonProgressBar], }) export class ExampleComponent { public buffer = 0.06; diff --git a/static/usage/v8/progress-bar/determinate/angular/example_component_ts.md b/static/usage/v8/progress-bar/determinate/angular/example_component_ts.md index 971d3d92ed0..383264f58d4 100644 --- a/static/usage/v8/progress-bar/determinate/angular/example_component_ts.md +++ b/static/usage/v8/progress-bar/determinate/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonProgressBar } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonProgressBar], }) export class ExampleComponent { public progress = 0; diff --git a/static/usage/v8/progress-bar/indeterminate/angular.md b/static/usage/v8/progress-bar/indeterminate/angular/example_component_html.md similarity index 100% rename from static/usage/v8/progress-bar/indeterminate/angular.md rename to static/usage/v8/progress-bar/indeterminate/angular/example_component_html.md diff --git a/static/usage/v8/progress-bar/indeterminate/angular/example_component_ts.md b/static/usage/v8/progress-bar/indeterminate/angular/example_component_ts.md new file mode 100644 index 00000000000..5d74447eded --- /dev/null +++ b/static/usage/v8/progress-bar/indeterminate/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonProgressBar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonProgressBar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/progress-bar/indeterminate/index.md b/static/usage/v8/progress-bar/indeterminate/index.md index e99ce0cc143..68d830442dc 100644 --- a/static/usage/v8/progress-bar/indeterminate/index.md +++ b/static/usage/v8/progress-bar/indeterminate/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/progress-bar/theming/colors/angular.md b/static/usage/v8/progress-bar/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v8/progress-bar/theming/colors/angular.md rename to static/usage/v8/progress-bar/theming/colors/angular/example_component_html.md diff --git a/static/usage/v8/progress-bar/theming/colors/angular/example_component_ts.md b/static/usage/v8/progress-bar/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..5d74447eded --- /dev/null +++ b/static/usage/v8/progress-bar/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonProgressBar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonProgressBar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/progress-bar/theming/colors/index.md b/static/usage/v8/progress-bar/theming/colors/index.md index 05b08cb1944..c5dcbfb0868 100644 --- a/static/usage/v8/progress-bar/theming/colors/index.md +++ b/static/usage/v8/progress-bar/theming/colors/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/progress-bar/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/progress-bar/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..5d74447eded --- /dev/null +++ b/static/usage/v8/progress-bar/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonProgressBar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonProgressBar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/progress-bar/theming/css-properties/index.md b/static/usage/v8/progress-bar/theming/css-properties/index.md index 3bf29e18b51..b5fbd392093 100644 --- a/static/usage/v8/progress-bar/theming/css-properties/index.md +++ b/static/usage/v8/progress-bar/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; diff --git a/static/usage/v8/radio/basic/angular.md b/static/usage/v8/radio/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/radio/basic/angular.md rename to static/usage/v8/radio/basic/angular/example_component_html.md diff --git a/static/usage/v8/radio/basic/angular/example_component_ts.md b/static/usage/v8/radio/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v8/radio/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/radio/basic/index.md b/static/usage/v8/radio/basic/index.md index 1a1d7367b63..b82637e4ce1 100644 --- a/static/usage/v8/radio/basic/index.md +++ b/static/usage/v8/radio/basic/index.md @@ -3,6 +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/radio/empty-selection/angular.md b/static/usage/v8/radio/empty-selection/angular/example_component_html.md similarity index 100% rename from static/usage/v8/radio/empty-selection/angular.md rename to static/usage/v8/radio/empty-selection/angular/example_component_html.md diff --git a/static/usage/v8/radio/empty-selection/angular/example_component_ts.md b/static/usage/v8/radio/empty-selection/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v8/radio/empty-selection/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/radio/empty-selection/index.md b/static/usage/v8/radio/empty-selection/index.md index a744c25de4f..3bf64f07cd3 100644 --- a/static/usage/v8/radio/empty-selection/index.md +++ b/static/usage/v8/radio/empty-selection/index.md @@ -3,6 +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/radio/justify/angular.md b/static/usage/v8/radio/justify/angular/example_component_html.md similarity index 100% rename from static/usage/v8/radio/justify/angular.md rename to static/usage/v8/radio/justify/angular/example_component_html.md diff --git a/static/usage/v8/radio/justify/angular/example_component_ts.md b/static/usage/v8/radio/justify/angular/example_component_ts.md new file mode 100644 index 00000000000..151a9f44f80 --- /dev/null +++ b/static/usage/v8/radio/justify/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/radio/justify/index.md b/static/usage/v8/radio/justify/index.md index 250bf8b59d8..127c1c10b98 100644 --- a/static/usage/v8/radio/justify/index.md +++ b/static/usage/v8/radio/justify/index.md @@ -3,6 +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/radio/label-placement/angular.md b/static/usage/v8/radio/label-placement/angular/example_component_html.md similarity index 100% rename from static/usage/v8/radio/label-placement/angular.md rename to static/usage/v8/radio/label-placement/angular/example_component_html.md diff --git a/static/usage/v8/radio/label-placement/angular/example_component_ts.md b/static/usage/v8/radio/label-placement/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v8/radio/label-placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/radio/label-placement/index.md b/static/usage/v8/radio/label-placement/index.md index 3e0c513c004..8d07ec15d5e 100644 --- a/static/usage/v8/radio/label-placement/index.md +++ b/static/usage/v8/radio/label-placement/index.md @@ -3,6 +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/radio/theming/colors/angular.md b/static/usage/v8/radio/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v8/radio/theming/colors/angular.md rename to static/usage/v8/radio/theming/colors/angular/example_component_html.md diff --git a/static/usage/v8/radio/theming/colors/angular/example_component_ts.md b/static/usage/v8/radio/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v8/radio/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/radio/theming/colors/index.md b/static/usage/v8/radio/theming/colors/index.md index df88b57f343..747f24c897c 100644 --- a/static/usage/v8/radio/theming/colors/index.md +++ b/static/usage/v8/radio/theming/colors/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/radio/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/radio/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..f5bf20e746c --- /dev/null +++ b/static/usage/v8/radio/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/radio/theming/css-properties/index.md b/static/usage/v8/radio/theming/css-properties/index.md index d648dca7b0a..c5593d5871f 100644 --- a/static/usage/v8/radio/theming/css-properties/index.md +++ b/static/usage/v8/radio/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; - + @for (food of foods; track food.id) { + {{ food.name }} + } ``` diff --git a/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md b/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md index d7f803aea0b..1158167fc16 100644 --- a/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md +++ b/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md @@ -1,12 +1,21 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone'; + +interface Food { + id: number; + name: string; + type: string; +} @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonRadio, IonRadioGroup], }) export class ExampleComponent { - foods = [ + foods: Food[] = [ { id: 1, name: 'Apples', @@ -24,16 +33,13 @@ export class ExampleComponent { }, ]; - compareWith(o1, o2) { + compareWith(o1: Food, o2: Food): boolean { return o1.id === o2.id; } - handleChange(ev) { - console.log('Current value:', JSON.stringify(ev.target.value)); - } - - trackItems(index: number, item: any) { - return item.id; + handleChange(ev: Event): void { + const target = ev.target as HTMLInputElement; + console.log('Current value:', JSON.stringify(target.value)); } } ``` diff --git a/static/usage/v8/range/basic/angular.md b/static/usage/v8/range/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/range/basic/angular.md rename to static/usage/v8/range/basic/angular/example_component_html.md diff --git a/static/usage/v8/range/basic/angular/example_component_ts.md b/static/usage/v8/range/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..24ea50045aa --- /dev/null +++ b/static/usage/v8/range/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/range/basic/index.md b/static/usage/v8/range/basic/index.md index c9d1d3d6e9b..83ca81ad714 100644 --- a/static/usage/v8/range/basic/index.md +++ b/static/usage/v8/range/basic/index.md @@ -5,6 +5,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/range/dual-knobs/angular.md b/static/usage/v8/range/dual-knobs/angular/example_component_html.md similarity index 100% rename from static/usage/v8/range/dual-knobs/angular.md rename to static/usage/v8/range/dual-knobs/angular/example_component_html.md diff --git a/static/usage/v8/range/dual-knobs/angular/example_component_ts.md b/static/usage/v8/range/dual-knobs/angular/example_component_ts.md new file mode 100644 index 00000000000..24ea50045aa --- /dev/null +++ b/static/usage/v8/range/dual-knobs/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/range/dual-knobs/index.md b/static/usage/v8/range/dual-knobs/index.md index 06466b2eca7..aeb799f7551 100644 --- a/static/usage/v8/range/dual-knobs/index.md +++ b/static/usage/v8/range/dual-knobs/index.md @@ -3,6 +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/range/ion-change-event/angular/example_component_ts.md b/static/usage/v8/range/ion-change-event/angular/example_component_ts.md index 377ccd2dc28..e1502344095 100644 --- a/static/usage/v8/range/ion-change-event/angular/example_component_ts.md +++ b/static/usage/v8/range/ion-change-event/angular/example_component_ts.md @@ -1,11 +1,12 @@ ```ts import { Component } from '@angular/core'; - -import { RangeCustomEvent } from '@ionic/angular'; +import { IonRange, RangeCustomEvent } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], }) export class ExampleComponent { onIonChange(ev: Event) { diff --git a/static/usage/v8/range/ion-knob-move-event/angular/example_component_ts.md b/static/usage/v8/range/ion-knob-move-event/angular/example_component_ts.md index e1b920f66da..b13b84b308d 100644 --- a/static/usage/v8/range/ion-knob-move-event/angular/example_component_ts.md +++ b/static/usage/v8/range/ion-knob-move-event/angular/example_component_ts.md @@ -1,11 +1,12 @@ ```ts import { Component } from '@angular/core'; - -import { RangeCustomEvent } from '@ionic/angular'; +import { IonRange, RangeCustomEvent } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], }) export class ExampleComponent { onIonKnobMoveStart(ev: Event) { diff --git a/static/usage/v8/range/label-slot/angular.md b/static/usage/v8/range/label-slot/angular/example_component_html.md similarity index 100% rename from static/usage/v8/range/label-slot/angular.md rename to static/usage/v8/range/label-slot/angular/example_component_html.md diff --git a/static/usage/v8/range/label-slot/angular/example_component_ts.md b/static/usage/v8/range/label-slot/angular/example_component_ts.md new file mode 100644 index 00000000000..2c58b35ac63 --- /dev/null +++ b/static/usage/v8/range/label-slot/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange, IonText } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange, IonText], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/range/label-slot/index.md b/static/usage/v8/range/label-slot/index.md index 53c51cddf66..57691d79b1f 100644 --- a/static/usage/v8/range/label-slot/index.md +++ b/static/usage/v8/range/label-slot/index.md @@ -3,6 +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/range/labels/angular.md b/static/usage/v8/range/labels/angular/example_component_html.md similarity index 100% rename from static/usage/v8/range/labels/angular.md rename to static/usage/v8/range/labels/angular/example_component_html.md diff --git a/static/usage/v8/range/labels/angular/example_component_ts.md b/static/usage/v8/range/labels/angular/example_component_ts.md new file mode 100644 index 00000000000..24ea50045aa --- /dev/null +++ b/static/usage/v8/range/labels/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/range/labels/index.md b/static/usage/v8/range/labels/index.md index 4d1d0e54e6a..428ffeb3afe 100644 --- a/static/usage/v8/range/labels/index.md +++ b/static/usage/v8/range/labels/index.md @@ -3,6 +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/range/no-visible-label/angular.md b/static/usage/v8/range/no-visible-label/angular/example_component_html.md similarity index 100% rename from static/usage/v8/range/no-visible-label/angular.md rename to static/usage/v8/range/no-visible-label/angular/example_component_html.md diff --git a/static/usage/v8/range/no-visible-label/angular/example_component_ts.md b/static/usage/v8/range/no-visible-label/angular/example_component_ts.md new file mode 100644 index 00000000000..24ea50045aa --- /dev/null +++ b/static/usage/v8/range/no-visible-label/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/range/no-visible-label/index.md b/static/usage/v8/range/no-visible-label/index.md index 5be64329c2d..9a5e48175e3 100644 --- a/static/usage/v8/range/no-visible-label/index.md +++ b/static/usage/v8/range/no-visible-label/index.md @@ -3,6 +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/range/pins/angular/example_component_ts.md b/static/usage/v8/range/pins/angular/example_component_ts.md index 8dc875e1bda..fdae87ebf9e 100644 --- a/static/usage/v8/range/pins/angular/example_component_ts.md +++ b/static/usage/v8/range/pins/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], }) export class ExampleComponent { pinFormatter(value: number) { diff --git a/static/usage/v8/range/slots/angular/example_component_ts.md b/static/usage/v8/range/slots/angular/example_component_ts.md index f61ba54a333..3ada922624c 100644 --- a/static/usage/v8/range/slots/angular/example_component_ts.md +++ b/static/usage/v8/range/slots/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonIcon, IonRange } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { snowOutline, sunnyOutline } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { snowOutline, sunnyOutline } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonIcon, IonRange], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/range/snapping-ticks/angular.md b/static/usage/v8/range/snapping-ticks/angular/example_component_html.md similarity index 100% rename from static/usage/v8/range/snapping-ticks/angular.md rename to static/usage/v8/range/snapping-ticks/angular/example_component_html.md diff --git a/static/usage/v8/range/snapping-ticks/angular/example_component_ts.md b/static/usage/v8/range/snapping-ticks/angular/example_component_ts.md new file mode 100644 index 00000000000..24ea50045aa --- /dev/null +++ b/static/usage/v8/range/snapping-ticks/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/range/snapping-ticks/index.md b/static/usage/v8/range/snapping-ticks/index.md index a1d4bc07bdd..2f0bf2cd27b 100644 --- a/static/usage/v8/range/snapping-ticks/index.md +++ b/static/usage/v8/range/snapping-ticks/index.md @@ -3,6 +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/range/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/range/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..24ea50045aa --- /dev/null +++ b/static/usage/v8/range/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/range/theming/css-properties/index.md b/static/usage/v8/range/theming/css-properties/index.md index 7d1361b30d0..ade08cf28b4 100644 --- a/static/usage/v8/range/theming/css-properties/index.md +++ b/static/usage/v8/range/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; - + @for (item of items; track item) { +

{{ item.name }}

New message from {{ item.name }}

 + } ``` diff --git a/static/usage/v8/refresher/advanced/angular/example_component_ts.md b/static/usage/v8/refresher/advanced/angular/example_component_ts.md index 9d1f3a5f199..db6bd8d6099 100644 --- a/static/usage/v8/refresher/advanced/angular/example_component_ts.md +++ b/static/usage/v8/refresher/advanced/angular/example_component_ts.md @@ -1,13 +1,42 @@ ```ts import { Component } from '@angular/core'; +import { + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { ellipse } from 'ionicons/icons'; +interface Item { + name: string; + unread: boolean; +} + @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['./example.component.css'], + imports: [ + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + ], }) export class ExampleComponent { public names = [ @@ -25,7 +54,7 @@ export class ExampleComponent { 'Rachel Rabbit', 'Ted Turtle', ]; - public items = []; + public items: Item[] = []; constructor() { /** @@ -44,7 +73,7 @@ export class ExampleComponent { return this.names[Math.floor(Math.random() * this.names.length)]; } - addItems(count, unread = false) { + addItems(count: number, unread = false) { for (let i = 0; i < count; i++) { this.items.unshift({ name: this.chooseRandomName(), @@ -53,10 +82,10 @@ export class ExampleComponent { } } - handleRefresh(event) { + handleRefresh(event: CustomEvent) { setTimeout(() => { this.addItems(3, true); - event.target.complete(); + (event.target as HTMLIonRefresherElement).complete(); }, 2000); } } diff --git a/static/usage/v8/refresher/basic/angular/example_component_ts.md b/static/usage/v8/refresher/basic/angular/example_component_ts.md index 74304953d4e..8edb4e4dc1f 100644 --- a/static/usage/v8/refresher/basic/angular/example_component_ts.md +++ b/static/usage/v8/refresher/basic/angular/example_component_ts.md @@ -1,15 +1,25 @@ ```ts import { Component } from '@angular/core'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar], }) export class ExampleComponent { - handleRefresh(event) { + handleRefresh(event: CustomEvent) { setTimeout(() => { // Any calls to load data go here - event.target.complete(); + (event.target as HTMLIonRefresherElement).complete(); }, 2000); } } diff --git a/static/usage/v8/refresher/custom-content/angular/example_component_ts.md b/static/usage/v8/refresher/custom-content/angular/example_component_ts.md index 74304953d4e..8edb4e4dc1f 100644 --- a/static/usage/v8/refresher/custom-content/angular/example_component_ts.md +++ b/static/usage/v8/refresher/custom-content/angular/example_component_ts.md @@ -1,15 +1,25 @@ ```ts import { Component } from '@angular/core'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar], }) export class ExampleComponent { - handleRefresh(event) { + handleRefresh(event: CustomEvent) { setTimeout(() => { // Any calls to load data go here - event.target.complete(); + (event.target as HTMLIonRefresherElement).complete(); }, 2000); } } diff --git a/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md b/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md index a5ac7eaaa9a..8edb4e4dc1f 100644 --- a/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md +++ b/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md @@ -1,16 +1,25 @@ ```ts import { Component } from '@angular/core'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar], }) export class ExampleComponent { - handleRefresh(event) { + handleRefresh(event: CustomEvent) { setTimeout(() => { // Any calls to load data go here - event.target.complete(); + (event.target as HTMLIonRefresherElement).complete(); }, 2000); } } diff --git a/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md index 74304953d4e..8edb4e4dc1f 100644 --- a/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md +++ b/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md @@ -1,15 +1,25 @@ ```ts import { Component } from '@angular/core'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar], }) export class ExampleComponent { - handleRefresh(event) { + handleRefresh(event: CustomEvent) { setTimeout(() => { // Any calls to load data go here - event.target.complete(); + (event.target as HTMLIonRefresherElement).complete(); }, 2000); } } diff --git a/static/usage/v8/reorder/basic/angular/example_component_ts.md b/static/usage/v8/reorder/basic/angular/example_component_ts.md index 7a5c867f791..a0e47f6b8b6 100644 --- a/static/usage/v8/reorder/basic/angular/example_component_ts.md +++ b/static/usage/v8/reorder/basic/angular/example_component_ts.md @@ -1,11 +1,19 @@ ```ts import { Component } from '@angular/core'; - -import { ItemReorderEventDetail } from '@ionic/angular'; +import { + ItemReorderEventDetail, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], }) export class ExampleComponent { handleReorder(ev: CustomEvent) { diff --git a/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md index 17e7d981c87..d4f3cc02ac9 100644 --- a/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md +++ b/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md @@ -1,7 +1,14 @@ ```ts import { Component } from '@angular/core'; - -import { ItemReorderEventDetail } from '@ionic/angular'; +import { + ItemReorderEventDetail, + IonIcon, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { pizza } from 'ionicons/icons'; @@ -9,6 +16,8 @@ import { pizza } from 'ionicons/icons'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md index 2cd3dd66740..4ebfef05c5a 100644 --- a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md +++ b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md @@ -1,12 +1,20 @@ ```ts import { Component } from '@angular/core'; - -import { ItemReorderEventDetail } from '@ionic/angular'; +import { + ItemReorderEventDetail, + IonContent, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['./example.component.css'], + imports: [IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], }) export class ExampleComponent { handleReorder(ev: CustomEvent) { diff --git a/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md index af0ff643b26..0914b726e0e 100644 --- a/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md +++ b/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md @@ -1,11 +1,20 @@ ```ts import { Component } from '@angular/core'; - -import { ItemReorderEventDetail } from '@ionic/angular'; +import { + ItemReorderEventDetail, + IonButton, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], }) export class ExampleComponent { public isDisabled = true; diff --git a/static/usage/v8/reorder/updating-data/angular/example_component_html.md b/static/usage/v8/reorder/updating-data/angular/example_component_html.md index 2485a558246..873daed0e90 100644 --- a/static/usage/v8/reorder/updating-data/angular/example_component_html.md +++ b/static/usage/v8/reorder/updating-data/angular/example_component_html.md @@ -3,10 +3,12 @@ - + @for (item of items; track item) { + Item {{ item }} + } ``` diff --git a/static/usage/v8/reorder/updating-data/angular/example_component_ts.md b/static/usage/v8/reorder/updating-data/angular/example_component_ts.md index 920f5f81e36..bab1ace34d0 100644 --- a/static/usage/v8/reorder/updating-data/angular/example_component_ts.md +++ b/static/usage/v8/reorder/updating-data/angular/example_component_ts.md @@ -1,11 +1,19 @@ ```ts import { Component } from '@angular/core'; - -import { ItemReorderEventDetail } from '@ionic/angular'; +import { + ItemReorderEventDetail, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], }) export class ExampleComponent { items = [1, 2, 3, 4, 5]; @@ -23,9 +31,5 @@ export class ExampleComponent { // After complete is called the items will be in the new order console.log('After complete', this.items); } - - trackItems(index: number, itemNumber: number) { - return itemNumber; - } } ``` diff --git a/static/usage/v8/reorder/wrapper/angular/example_component_ts.md b/static/usage/v8/reorder/wrapper/angular/example_component_ts.md index 7a5c867f791..a0e47f6b8b6 100644 --- a/static/usage/v8/reorder/wrapper/angular/example_component_ts.md +++ b/static/usage/v8/reorder/wrapper/angular/example_component_ts.md @@ -1,11 +1,19 @@ ```ts import { Component } from '@angular/core'; - -import { ItemReorderEventDetail } from '@ionic/angular'; +import { + ItemReorderEventDetail, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], }) export class ExampleComponent { handleReorder(ev: CustomEvent) { diff --git a/static/usage/v8/ripple-effect/basic/angular/example_component_ts.md b/static/usage/v8/ripple-effect/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..55c14aafc07 --- /dev/null +++ b/static/usage/v8/ripple-effect/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRippleEffect } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRippleEffect], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/ripple-effect/basic/index.md b/static/usage/v8/ripple-effect/basic/index.md index 9a0ad84ac89..96c3c3228b6 100644 --- a/static/usage/v8/ripple-effect/basic/index.md +++ b/static/usage/v8/ripple-effect/basic/index.md @@ -9,6 +9,7 @@ import vue from './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'; diff --git a/static/usage/v8/searchbar/cancel-button/angular.md b/static/usage/v8/searchbar/cancel-button/angular/example_component_html.md similarity index 100% rename from static/usage/v8/searchbar/cancel-button/angular.md rename to static/usage/v8/searchbar/cancel-button/angular/example_component_html.md diff --git a/static/usage/v8/searchbar/cancel-button/angular/example_component_ts.md b/static/usage/v8/searchbar/cancel-button/angular/example_component_ts.md new file mode 100644 index 00000000000..4069269cd0c --- /dev/null +++ b/static/usage/v8/searchbar/cancel-button/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonSearchbar } from '@ionic/angular/standalone'; + +import { addIcons } from 'ionicons'; +import { trash } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSearchbar], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ trash }); + } +} +``` diff --git a/static/usage/v8/searchbar/cancel-button/index.md b/static/usage/v8/searchbar/cancel-button/index.md index c1269242002..bbd08611b61 100644 --- a/static/usage/v8/searchbar/cancel-button/index.md +++ b/static/usage/v8/searchbar/cancel-button/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/searchbar/clear-button/angular.md b/static/usage/v8/searchbar/clear-button/angular/example_component_html.md similarity index 100% rename from static/usage/v8/searchbar/clear-button/angular.md rename to static/usage/v8/searchbar/clear-button/angular/example_component_html.md diff --git a/static/usage/v8/searchbar/clear-button/angular/example_component_ts.md b/static/usage/v8/searchbar/clear-button/angular/example_component_ts.md new file mode 100644 index 00000000000..b93e2ab3905 --- /dev/null +++ b/static/usage/v8/searchbar/clear-button/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonSearchbar } from '@ionic/angular/standalone'; + +import { addIcons } from 'ionicons'; +import { trashBin } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSearchbar], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ trashBin }); + } +} +``` diff --git a/static/usage/v8/searchbar/clear-button/index.md b/static/usage/v8/searchbar/clear-button/index.md index 2c1df115546..925c5b3be1d 100644 --- a/static/usage/v8/searchbar/clear-button/index.md +++ b/static/usage/v8/searchbar/clear-button/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/searchbar/debounce/angular/example_component_html.md b/static/usage/v8/searchbar/debounce/angular/example_component_html.md index 4e69a179142..f0ee9b81eb7 100644 --- a/static/usage/v8/searchbar/debounce/angular/example_component_html.md +++ b/static/usage/v8/searchbar/debounce/angular/example_component_html.md @@ -2,8 +2,10 @@ - + @for (result of results; track result) { + {{ result }} + } ``` diff --git a/static/usage/v8/searchbar/debounce/angular/example_component_ts.md b/static/usage/v8/searchbar/debounce/angular/example_component_ts.md index 9a88f1c135b..6a97ecbba54 100644 --- a/static/usage/v8/searchbar/debounce/angular/example_component_ts.md +++ b/static/usage/v8/searchbar/debounce/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonList, IonSearchbar } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonSearchbar], }) export class ExampleComponent { public data = [ @@ -20,9 +23,10 @@ export class ExampleComponent { ]; public results = [...this.data]; - handleInput(event) { - const query = event.target.value.toLowerCase(); - this.results = this.data.filter((d) => d.toLowerCase().indexOf(query) > -1); + handleInput(event: Event) { + const target = event.target as HTMLIonSearchbarElement; + const query = target.value?.toLowerCase() || ''; + this.results = this.data.filter((d) => d.toLowerCase().includes(query)); } } ``` diff --git a/static/usage/v8/searchbar/search-icon/angular.md b/static/usage/v8/searchbar/search-icon/angular/example_component_html.md similarity index 100% rename from static/usage/v8/searchbar/search-icon/angular.md rename to static/usage/v8/searchbar/search-icon/angular/example_component_html.md diff --git a/static/usage/v8/searchbar/search-icon/angular/example_component_ts.md b/static/usage/v8/searchbar/search-icon/angular/example_component_ts.md new file mode 100644 index 00000000000..1339bfebf88 --- /dev/null +++ b/static/usage/v8/searchbar/search-icon/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonSearchbar } from '@ionic/angular/standalone'; + +import { addIcons } from 'ionicons'; +import { searchCircle } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSearchbar], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ searchCircle }); + } +} +``` diff --git a/static/usage/v8/searchbar/search-icon/index.md b/static/usage/v8/searchbar/search-icon/index.md index 8168ac82236..48c1c748ce7 100644 --- a/static/usage/v8/searchbar/search-icon/index.md +++ b/static/usage/v8/searchbar/search-icon/index.md @@ -3,6 +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/searchbar/theming/colors/angular.md b/static/usage/v8/searchbar/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v8/searchbar/theming/colors/angular.md rename to static/usage/v8/searchbar/theming/colors/angular/example_component_html.md diff --git a/static/usage/v8/searchbar/theming/colors/angular/example_component_ts.md b/static/usage/v8/searchbar/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..2ea2b2e4cf3 --- /dev/null +++ b/static/usage/v8/searchbar/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSearchbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSearchbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/searchbar/theming/colors/index.md b/static/usage/v8/searchbar/theming/colors/index.md index 7525982508f..0ceee8d08b0 100644 --- a/static/usage/v8/searchbar/theming/colors/index.md +++ b/static/usage/v8/searchbar/theming/colors/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/searchbar/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/searchbar/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..2ea2b2e4cf3 --- /dev/null +++ b/static/usage/v8/searchbar/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSearchbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSearchbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/searchbar/theming/css-properties/index.md b/static/usage/v8/searchbar/theming/css-properties/index.md index 3aa1b04c396..4c92987e23b 100644 --- a/static/usage/v8/searchbar/theming/css-properties/index.md +++ b/static/usage/v8/searchbar/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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 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/segment-button/layout/angular/example_component_ts.md b/static/usage/v8/segment-button/layout/angular/example_component_ts.md index 8540f8ec1b3..d974333e9ac 100644 --- a/static/usage/v8/segment-button/layout/angular/example_component_ts.md +++ b/static/usage/v8/segment-button/layout/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { call, heart, pin } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { call, heart, pin } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonIcon, IonLabel, IonSegment, IonSegmentButton], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/segment-button/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/segment-button/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..d51cbc123a9 --- /dev/null +++ b/static/usage/v8/segment-button/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel, IonSegment, IonSegmentButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/segment-button/theming/css-properties/index.md b/static/usage/v8/segment-button/theming/css-properties/index.md index 45c01ea915d..39d7ff52531 100644 --- a/static/usage/v8/segment-button/theming/css-properties/index.md +++ b/static/usage/v8/segment-button/theming/css-properties/index.md @@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md'; import vue from './vue.md'; -import angular_example_component_css from './angular/example_component_css.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 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/segment/scrollable/angular/example_component_ts.md b/static/usage/v8/segment/scrollable/angular/example_component_ts.md index 807b3ff6125..fb95a4ea914 100644 --- a/static/usage/v8/segment/scrollable/angular/example_component_ts.md +++ b/static/usage/v8/segment/scrollable/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonIcon, IonSegment, IonSegmentButton } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { barbell, basket, call, globe, heart, home, person, pin, star, trash } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { barbell, basket, call, globe, heart, home, person, pin, star, trash } f selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonIcon, IonSegment, IonSegmentButton], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/segment/swipeable/angular/angular_css.md b/static/usage/v8/segment/swipeable/angular/example_component_css.md similarity index 100% rename from static/usage/v8/segment/swipeable/angular/angular_css.md rename to static/usage/v8/segment/swipeable/angular/example_component_css.md diff --git a/static/usage/v8/segment/swipeable/angular/angular_html.md b/static/usage/v8/segment/swipeable/angular/example_component_html.md similarity index 100% rename from static/usage/v8/segment/swipeable/angular/angular_html.md rename to static/usage/v8/segment/swipeable/angular/example_component_html.md diff --git a/static/usage/v8/segment/swipeable/angular/example_component_ts.md b/static/usage/v8/segment/swipeable/angular/example_component_ts.md new file mode 100644 index 00000000000..6ccef810d45 --- /dev/null +++ b/static/usage/v8/segment/swipeable/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/segment/swipeable/index.md b/static/usage/v8/segment/swipeable/index.md index e19de64f789..4ac4971f6b7 100644 --- a/static/usage/v8/segment/swipeable/index.md +++ b/static/usage/v8/segment/swipeable/index.md @@ -1,11 +1,15 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; -import react_main_tsx from './react/react_tsx.md'; -import react_main_css from './react/react_css.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + import vue from './vue.md'; -import angular_html from './angular/angular_html.md'; -import angular_css from './angular/angular_css.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'; diff --git a/static/usage/v8/segment/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/segment/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..d51cbc123a9 --- /dev/null +++ b/static/usage/v8/segment/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel, IonSegment, IonSegmentButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/segment/theming/css-properties/index.md b/static/usage/v8/segment/theming/css-properties/index.md index 2ca6610b540..9c440653c4c 100644 --- a/static/usage/v8/segment/theming/css-properties/index.md +++ b/static/usage/v8/segment/theming/css-properties/index.md @@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md'; import vue from './vue.md'; -import angular_example_component_css from './angular/example_component_css.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'; diff --git a/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md index fb51c040a2f..fb988662d59 100644 --- a/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md +++ b/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md @@ -1,13 +1,16 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { - handleChange(e) { - console.log('ionChange fired with value: ' + e.detail.value); + handleChange(event: CustomEvent) { + console.log('ionChange fired with value: ' + event.detail.value); } handleCancel() { diff --git a/static/usage/v8/select/basic/single-selection/angular.md b/static/usage/v8/select/basic/single-selection/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/basic/single-selection/angular.md rename to static/usage/v8/select/basic/single-selection/angular/example_component_html.md diff --git a/static/usage/v8/select/basic/single-selection/angular/example_component_ts.md b/static/usage/v8/select/basic/single-selection/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v8/select/basic/single-selection/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/basic/single-selection/index.md b/static/usage/v8/select/basic/single-selection/index.md index 820ab1cccf2..14036fc96ab 100644 --- a/static/usage/v8/select/basic/single-selection/index.md +++ b/static/usage/v8/select/basic/single-selection/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/select/customization/button-text/angular.md b/static/usage/v8/select/customization/button-text/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/customization/button-text/angular.md rename to static/usage/v8/select/customization/button-text/angular/example_component_html.md diff --git a/static/usage/v8/select/customization/button-text/angular/example_component_ts.md b/static/usage/v8/select/customization/button-text/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v8/select/customization/button-text/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/customization/button-text/index.md b/static/usage/v8/select/customization/button-text/index.md index cc9d2417caf..be21f778b8a 100644 --- a/static/usage/v8/select/customization/button-text/index.md +++ b/static/usage/v8/select/customization/button-text/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/select/customization/custom-toggle-icons/angular.md b/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/customization/custom-toggle-icons/angular.md rename to static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_html.md diff --git a/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md b/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md new file mode 100644 index 00000000000..61e221a24b6 --- /dev/null +++ b/static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +import { addIcons } from 'ionicons'; +import { add, remove } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ add, remove }); + } +} +``` diff --git a/static/usage/v8/select/customization/custom-toggle-icons/index.md b/static/usage/v8/select/customization/custom-toggle-icons/index.md index 228945fc15c..90b1f857c2e 100644 --- a/static/usage/v8/select/customization/custom-toggle-icons/index.md +++ b/static/usage/v8/select/customization/custom-toggle-icons/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/select/customization/icon-flip-behavior/angular/example_component_ts.md b/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md index 4db53a836a9..d85d4166365 100644 --- a/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md +++ b/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md @@ -1,10 +1,24 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +import { addIcons } from 'ionicons'; +import { caretDownSharp } from 'ionicons/icons'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) -export class ExampleComponent {} +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ caretDownSharp }); + } +} ``` diff --git a/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md index 5f8bc6929ca..ad2e2a9b6bb 100644 --- a/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md +++ b/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { customAlertOptions = { diff --git a/static/usage/v8/select/customization/styling-select/angular/example_component_ts.md b/static/usage/v8/select/customization/styling-select/angular/example_component_ts.md index 4db53a836a9..1b377b77218 100644 --- a/static/usage/v8/select/customization/styling-select/angular/example_component_ts.md +++ b/static/usage/v8/select/customization/styling-select/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonSelect, IonSelectOption } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonSelect, IonSelectOption], }) export class ExampleComponent {} ``` diff --git a/static/usage/v8/select/fill/angular.md b/static/usage/v8/select/fill/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/fill/angular.md rename to static/usage/v8/select/fill/angular/example_component_html.md diff --git a/static/usage/v8/select/fill/angular/example_component_ts.md b/static/usage/v8/select/fill/angular/example_component_ts.md new file mode 100644 index 00000000000..1b377b77218 --- /dev/null +++ b/static/usage/v8/select/fill/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/fill/index.md b/static/usage/v8/select/fill/index.md index 9666f49d0d8..edf11822c4f 100644 --- a/static/usage/v8/select/fill/index.md +++ b/static/usage/v8/select/fill/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/select/interfaces/modal/angular.md b/static/usage/v8/select/interfaces/modal/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/interfaces/modal/angular.md rename to static/usage/v8/select/interfaces/modal/angular/example_component_html.md diff --git a/static/usage/v8/select/interfaces/modal/angular/example_component_ts.md b/static/usage/v8/select/interfaces/modal/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v8/select/interfaces/modal/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/interfaces/modal/index.md b/static/usage/v8/select/interfaces/modal/index.md index 9f79261c280..4920aab389a 100644 --- a/static/usage/v8/select/interfaces/modal/index.md +++ b/static/usage/v8/select/interfaces/modal/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/select/interfaces/popover/angular.md b/static/usage/v8/select/interfaces/popover/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/interfaces/popover/angular.md rename to static/usage/v8/select/interfaces/popover/angular/example_component_html.md diff --git a/static/usage/v8/select/interfaces/popover/angular/example_component_ts.md b/static/usage/v8/select/interfaces/popover/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v8/select/interfaces/popover/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/interfaces/popover/index.md b/static/usage/v8/select/interfaces/popover/index.md index b33bd96e53b..167e36dee4b 100644 --- a/static/usage/v8/select/interfaces/popover/index.md +++ b/static/usage/v8/select/interfaces/popover/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/select/justify/angular.md b/static/usage/v8/select/justify/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/justify/angular.md rename to static/usage/v8/select/justify/angular/example_component_html.md diff --git a/static/usage/v8/select/justify/angular/example_component_ts.md b/static/usage/v8/select/justify/angular/example_component_ts.md new file mode 100644 index 00000000000..edeb5fb2170 --- /dev/null +++ b/static/usage/v8/select/justify/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/justify/index.md b/static/usage/v8/select/justify/index.md index 751948aa47c..b1be55c0ba0 100644 --- a/static/usage/v8/select/justify/index.md +++ b/static/usage/v8/select/justify/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/select/label-placement/angular.md b/static/usage/v8/select/label-placement/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/label-placement/angular.md rename to static/usage/v8/select/label-placement/angular/example_component_html.md diff --git a/static/usage/v8/select/label-placement/angular/example_component_ts.md b/static/usage/v8/select/label-placement/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v8/select/label-placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/label-placement/index.md b/static/usage/v8/select/label-placement/index.md index 694b6b3f4ea..49800fb0536 100644 --- a/static/usage/v8/select/label-placement/index.md +++ b/static/usage/v8/select/label-placement/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/select/label-slot/angular.md b/static/usage/v8/select/label-slot/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/label-slot/angular.md rename to static/usage/v8/select/label-slot/angular/example_component_html.md diff --git a/static/usage/v8/select/label-slot/angular/example_component_ts.md b/static/usage/v8/select/label-slot/angular/example_component_ts.md new file mode 100644 index 00000000000..a8cb5c497c5 --- /dev/null +++ b/static/usage/v8/select/label-slot/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption, IonText], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/label-slot/index.md b/static/usage/v8/select/label-slot/index.md index c7d0382d140..a9269a7e266 100644 --- a/static/usage/v8/select/label-slot/index.md +++ b/static/usage/v8/select/label-slot/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/select/no-visible-label/angular.md b/static/usage/v8/select/no-visible-label/angular/example_component_html.md similarity index 100% rename from static/usage/v8/select/no-visible-label/angular.md rename to static/usage/v8/select/no-visible-label/angular/example_component_html.md diff --git a/static/usage/v8/select/no-visible-label/angular/example_component_ts.md b/static/usage/v8/select/no-visible-label/angular/example_component_ts.md new file mode 100644 index 00000000000..efa11c163f9 --- /dev/null +++ b/static/usage/v8/select/no-visible-label/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/no-visible-label/index.md b/static/usage/v8/select/no-visible-label/index.md index f09ead1ad1a..09dea4d4c00 100644 --- a/static/usage/v8/select/no-visible-label/index.md +++ b/static/usage/v8/select/no-visible-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/select/objects-as-values/multiple-selection/angular/example_component_html.md b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_html.md index af00be1957e..361cfbad1b8 100644 --- a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_html.md +++ b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_html.md @@ -8,7 +8,9 @@ (ionChange)="handleChange($event)" [multiple]="true" > - {{ food.name }} + @for (food of foods; track food) { + {{ food.name }} + } diff --git a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md index c33570deec9..976de91ea50 100644 --- a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md +++ b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md @@ -1,12 +1,21 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +interface Food { + id: number; + name: string; + type: string; +} @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { - foods = [ + foods: Food[] = [ { id: 1, name: 'Apples', @@ -24,7 +33,7 @@ export class ExampleComponent { }, ]; - compareWith(o1, o2) { + compareWith(o1: Food | null, o2: Food | Food[] | null): boolean { if (!o1 || !o2) { return o1 === o2; } @@ -36,8 +45,9 @@ export class ExampleComponent { return o1.id === o2.id; } - handleChange(ev) { - console.log('Current value:', JSON.stringify(ev.target.value)); + handleChange(ev: Event) { + const target = ev.target as HTMLIonSelectElement; + console.log('Current value:', JSON.stringify(target.value)); } } ``` diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md index 7354647f224..808a9743cc2 100644 --- a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md +++ b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md @@ -7,7 +7,9 @@ placeholder="Select food" (ionChange)="handleChange($event)" > - {{ food.name }} + @for (food of foods; track food) { + {{ food.name }} + } diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md index 20d05fa847f..e984a6f6544 100644 --- a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md +++ b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md @@ -1,12 +1,21 @@ ```ts import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; + +interface Food { + id: number; + name: string; + type: string; +} @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { - foods = [ + foods: Food[] = [ { id: 1, name: 'Apples', @@ -24,12 +33,13 @@ export class ExampleComponent { }, ]; - compareWith(o1, o2) { + compareWith(o1: Food | null, o2: Food | null): boolean { return o1 && o2 ? o1.id === o2.id : o1 === o2; } - handleChange(ev) { - console.log('Current value:', JSON.stringify(ev.target.value)); + handleChange(ev: Event) { + const target = ev.target as HTMLIonSelectElement; + console.log('Current value:', JSON.stringify(target.value)); } } ``` diff --git a/static/usage/v8/select/start-end-slots/angular/example_component_ts.md b/static/usage/v8/select/start-end-slots/angular/example_component_ts.md index f7717b55dc1..4cdf6bc2b32 100644 --- a/static/usage/v8/select/start-end-slots/angular/example_component_ts.md +++ b/static/usage/v8/select/start-end-slots/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { eye, leaf } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { eye, leaf } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/select/typeahead/angular/app_module_ts.md b/static/usage/v8/select/typeahead/angular/app_module_ts.md deleted file mode 100644 index 0fa58037717..00000000000 --- a/static/usage/v8/select/typeahead/angular/app_module_ts.md +++ /dev/null @@ -1,19 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; - -import { IonicModule } from '@ionic/angular'; - -import { AppComponent } from './app.component'; -import { ExampleComponent } from './example.component'; - -import { TypeaheadComponent } from './typeahead.component'; - -@NgModule({ - imports: [BrowserModule, FormsModule, IonicModule.forRoot({})], - declarations: [AppComponent, ExampleComponent, TypeaheadComponent], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` diff --git a/static/usage/v8/select/typeahead/angular/example_component_ts.md b/static/usage/v8/select/typeahead/angular/example_component_ts.md index ded6fa60b0f..9276b8b13e5 100644 --- a/static/usage/v8/select/typeahead/angular/example_component_ts.md +++ b/static/usage/v8/select/typeahead/angular/example_component_ts.md @@ -1,11 +1,15 @@ ```ts import { Component, ViewChild } from '@angular/core'; -import { IonModal } from '@ionic/angular'; +import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/angular/standalone'; import { Item } from './types'; +import { TypeaheadComponent } from './typeahead.component'; + @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonItem, IonLabel, IonList, IonModal, TypeaheadComponent], }) export class ExampleComponent { @ViewChild('modal', { static: true }) modal!: IonModal; @@ -41,15 +45,23 @@ export class ExampleComponent { { text: 'Strawberry', value: 'strawberry' }, ]; - private formatData(data: string[]) { + /** + * Formats the display text based on the selected fruits. + * @param data - Array of selected fruit values + * @returns A formatted string for display + */ + private formatData(data: string[]): string { if (data.length === 1) { const fruit = this.fruits.find((fruit) => fruit.value === data[0]); - return fruit.text; + return fruit ? fruit.text : ''; } - return `${data.length} items`; } + /** + * Handles fruit selection changes and updates the selected fruits and text. + * @param fruits - Array of selected fruit values + */ fruitSelectionChanged(fruits: string[]) { this.selectedFruits = fruits; this.selectedFruitsText = this.formatData(this.selectedFruits); diff --git a/static/usage/v7/select/typeahead/angular/modal-example_component_html.md b/static/usage/v8/select/typeahead/angular/typeahead_component_html.md similarity index 90% rename from static/usage/v7/select/typeahead/angular/modal-example_component_html.md rename to static/usage/v8/select/typeahead/angular/typeahead_component_html.md index 64da05a7a9d..ed147c64254 100644 --- a/static/usage/v7/select/typeahead/angular/modal-example_component_html.md +++ b/static/usage/v8/select/typeahead/angular/typeahead_component_html.md @@ -16,11 +16,13 @@ - + @for (item of filteredItems; track item.value) { + {{ item.text }} + } ``` diff --git a/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v8/select/typeahead/angular/typeahead_component_ts.md similarity index 67% rename from static/usage/v7/select/typeahead/angular/modal-example_component_ts.md rename to static/usage/v8/select/typeahead/angular/typeahead_component_ts.md index 9bd21f1b404..f9de32444d0 100644 --- a/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md +++ b/static/usage/v8/select/typeahead/angular/typeahead_component_ts.md @@ -1,11 +1,37 @@ ```ts import { Component, Input, Output, EventEmitter } from '@angular/core'; import type { OnInit } from '@angular/core'; + +import { + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonList, + IonSearchbar, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; + import { Item } from './types'; @Component({ selector: 'app-typeahead', templateUrl: 'typeahead.component.html', + imports: [ + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonList, + IonSearchbar, + IonTitle, + IonToolbar, + ], }) export class TypeaheadComponent implements OnInit { @Input() items: Item[] = []; @@ -23,10 +49,6 @@ export class TypeaheadComponent implements OnInit { this.workingSelectedValues = [...this.selectedItems]; } - trackItems(index: number, item: Item) { - return item.value; - } - cancelChanges() { this.selectionCancel.emit(); } @@ -35,8 +57,9 @@ export class TypeaheadComponent implements OnInit { this.selectionChange.emit(this.workingSelectedValues); } - searchbarInput(ev) { - this.filterList(ev.target.value); + searchbarInput(ev: Event) { + const inputElement = ev.target as HTMLInputElement; + this.filterList(inputElement.value); } /** @@ -50,7 +73,7 @@ export class TypeaheadComponent implements OnInit { * If no search query is defined, * return all options. */ - if (searchQuery === undefined) { + if (searchQuery === undefined || searchQuery.trim() === '') { this.filteredItems = [...this.items]; } else { /** @@ -59,17 +82,15 @@ export class TypeaheadComponent implements OnInit { * contain the search query as a substring. */ const normalizedQuery = searchQuery.toLowerCase(); - this.filteredItems = this.items.filter((item) => { - return item.text.toLowerCase().includes(normalizedQuery); - }); + this.filteredItems = this.items.filter((item) => item.text.toLowerCase().includes(normalizedQuery)); } } - isChecked(value: string) { - return this.workingSelectedValues.find((item) => item === value); + isChecked(value: string): boolean { + return this.workingSelectedValues.includes(value); } - checkboxChange(ev) { + checkboxChange(ev: CustomEvent<{ checked: boolean; value: string }>) { const { checked, value } = ev.detail; if (checked) { diff --git a/static/usage/v8/select/typeahead/index.md b/static/usage/v8/select/typeahead/index.md index c7978e18190..7ce89c665a0 100644 --- a/static/usage/v8/select/typeahead/index.md +++ b/static/usage/v8/select/typeahead/index.md @@ -10,11 +10,10 @@ import vue_example from './vue/example_vue.md'; import vue_types_ts from './vue/vue_types_ts.md'; import vue_typeahead_component from './vue/typeahead_component_vue.md'; -import angular_app_module_ts from './angular/app_module_ts.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_modal_example_component_ts from './angular/modal-example_component_ts.md'; -import angular_modal_example_component_html from './angular/modal-example_component_html.md'; +import angular_typeahead_component_ts from './angular/typeahead_component_ts.md'; +import angular_typeahead_component_html from './angular/typeahead_component_html.md'; import angular_types_ts from './angular/angular_types_ts.md'; +@if (loaded) { + Albums @@ -12,8 +13,8 @@ - - +} @else { + @@ -34,6 +35,7 @@ +} Toggle ``` diff --git a/static/usage/v8/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v8/skeleton-text/basic/angular/example_component_ts.md index c74fbd4855d..1a2f83bccc9 100644 --- a/static/usage/v8/skeleton-text/basic/angular/example_component_ts.md +++ b/static/usage/v8/skeleton-text/basic/angular/example_component_ts.md @@ -1,5 +1,15 @@ ```ts import { Component } from '@angular/core'; +import { + IonButton, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonSkeletonText, + IonThumbnail, +} from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { musicalNotes } from 'ionicons/icons'; @@ -8,6 +18,7 @@ import { musicalNotes } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail], }) export class ExampleComponent { public loaded = false; diff --git a/static/usage/v8/skeleton-text/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/skeleton-text/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..d4e5d48be69 --- /dev/null +++ b/static/usage/v8/skeleton-text/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/skeleton-text/theming/css-properties/index.md b/static/usage/v8/skeleton-text/theming/css-properties/index.md index 70081b66ce9..5c9ff39c0fd 100644 --- a/static/usage/v8/skeleton-text/theming/css-properties/index.md +++ b/static/usage/v8/skeleton-text/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; diff --git a/static/usage/v8/spinner/theming/colors/angular.md b/static/usage/v8/spinner/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v8/spinner/theming/colors/angular.md rename to static/usage/v8/spinner/theming/colors/angular/example_component_html.md diff --git a/static/usage/v8/spinner/theming/colors/angular/example_component_ts.md b/static/usage/v8/spinner/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..776380a6638 --- /dev/null +++ b/static/usage/v8/spinner/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSpinner } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSpinner], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/spinner/theming/colors/index.md b/static/usage/v8/spinner/theming/colors/index.md index 111ac08a532..83bfc27c81f 100644 --- a/static/usage/v8/spinner/theming/colors/index.md +++ b/static/usage/v8/spinner/theming/colors/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/spinner/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/spinner/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..776380a6638 --- /dev/null +++ b/static/usage/v8/spinner/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSpinner } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSpinner], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/spinner/theming/css-properties/index.md b/static/usage/v8/spinner/theming/css-properties/index.md index cdfc38fc2ec..d35cdee00d1 100644 --- a/static/usage/v8/spinner/theming/css-properties/index.md +++ b/static/usage/v8/spinner/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; diff --git a/static/usage/v8/split-pane/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/split-pane/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..1e20f96fbf7 --- /dev/null +++ b/static/usage/v8/split-pane/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/split-pane/theming/css-properties/index.md b/static/usage/v8/split-pane/theming/css-properties/index.md index 330361b8fd4..fb44ca91cf3 100644 --- a/static/usage/v8/split-pane/theming/css-properties/index.md +++ b/static/usage/v8/split-pane/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; + + + ``` diff --git a/static/usage/v8/tabs/router/angular/app_component_ts.md b/static/usage/v8/tabs/router/angular/app_component_ts.md new file mode 100644 index 00000000000..69438d5bb07 --- /dev/null +++ b/static/usage/v8/tabs/router/angular/app_component_ts.md @@ -0,0 +1,14 @@ +```ts +import { Component } from '@angular/core'; +import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'], + imports: [IonApp, IonRouterOutlet], +}) +export class AppComponent { + constructor() {} +} +``` diff --git a/static/usage/v8/tabs/router/angular/app_module_ts.md b/static/usage/v8/tabs/router/angular/app_module_ts.md deleted file mode 100644 index e36b8c6316e..00000000000 --- a/static/usage/v8/tabs/router/angular/app_module_ts.md +++ /dev/null @@ -1,19 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; - -import { IonicModule } from '@ionic/angular'; - -import { AppComponent } from './app.component'; -import { ExampleComponent } from './example.component'; - -import { AppRoutingModule } from './app-routing.module'; - -@NgModule({ - imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot({})], - declarations: [AppComponent, ExampleComponent], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` diff --git a/static/usage/v8/tabs/router/angular/app_routes_ts.md b/static/usage/v8/tabs/router/angular/app_routes_ts.md new file mode 100644 index 00000000000..fd959555b28 --- /dev/null +++ b/static/usage/v8/tabs/router/angular/app_routes_ts.md @@ -0,0 +1,39 @@ +```ts +import { Routes } from '@angular/router'; +import { ExampleComponent } from './example.component'; + +export const routes: Routes = [ + { + path: 'example', + component: ExampleComponent, + children: [ + { + path: 'home', + loadComponent: () => import('./home/home-page.component').then((m) => m.HomePageComponent), + }, + { + path: 'library', + loadComponent: () => import('./library/library-page.component').then((m) => m.LibraryPageComponent), + }, + { + path: 'radio', + loadComponent: () => import('./radio/radio-page.component').then((m) => m.RadioPageComponent), + }, + { + path: 'search', + loadComponent: () => import('./search/search-page.component').then((m) => m.SearchPageComponent), + }, + { + path: '', + redirectTo: '/example/home', + pathMatch: 'full', + }, + ], + }, + { + path: '', + redirectTo: '/example/home', + pathMatch: 'full', + }, +]; +``` diff --git a/static/usage/v8/tabs/router/angular/app_routing_module_ts.md b/static/usage/v8/tabs/router/angular/app_routing_module_ts.md deleted file mode 100644 index 7ff1067030f..00000000000 --- a/static/usage/v8/tabs/router/angular/app_routing_module_ts.md +++ /dev/null @@ -1,42 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { ExampleComponent } from './example.component'; - -@NgModule({ - imports: [ - RouterModule.forRoot([ - { - path: '', - component: ExampleComponent, - children: [ - { - path: '', - pathMatch: 'full', - redirectTo: 'home', - }, - { - path: 'home', - loadChildren: () => import('./home/home-page.module').then((m) => m.HomePageModule), - }, - { - path: 'radio', - loadChildren: () => import('./radio/radio-page.module').then((m) => m.RadioPageModule), - }, - { - path: 'library', - loadChildren: () => import('./library/library-page.module').then((m) => m.LibraryPageModule), - }, - { - path: 'search', - loadChildren: () => import('./search/search-page.module').then((m) => m.SearchPageModule), - }, - ], - }, - ]), - ], - exports: [RouterModule], -}) -export class AppRoutingModule {} -``` diff --git a/static/usage/v8/tabs/router/angular/example_component_ts.md b/static/usage/v8/tabs/router/angular/example_component_ts.md index 7762322ce9d..84c7d490b48 100644 --- a/static/usage/v8/tabs/router/angular/example_component_ts.md +++ b/static/usage/v8/tabs/router/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonIcon, IonTabBar, IonTabButton, IonTabs } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { library, playCircle, radio, search } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { library, playCircle, radio, search } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonIcon, IonTabBar, IonTabButton, IonTabs], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/tabs/router/angular/home_page_component_ts.md b/static/usage/v8/tabs/router/angular/home_page_component_ts.md index 9e2ef0a3e8c..7d3d3446815 100644 --- a/static/usage/v8/tabs/router/angular/home_page_component_ts.md +++ b/static/usage/v8/tabs/router/angular/home_page_component_ts.md @@ -1,9 +1,11 @@ ```ts import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; @Component({ selector: 'app-home-page', templateUrl: './home-page.component.html', + imports: [IonContent, IonHeader, IonTitle, IonToolbar], }) export class HomePageComponent {} ``` diff --git a/static/usage/v8/tabs/router/angular/home_page_module_ts.md b/static/usage/v8/tabs/router/angular/home_page_module_ts.md deleted file mode 100644 index 2a1fb15b460..00000000000 --- a/static/usage/v8/tabs/router/angular/home_page_module_ts.md +++ /dev/null @@ -1,14 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { HomePageComponent } from './home-page.component'; - -import { IonicModule } from '@ionic/angular'; - -@NgModule({ - imports: [IonicModule, RouterModule.forChild([{ path: '', component: HomePageComponent }])], - declarations: [HomePageComponent], - exports: [HomePageComponent], -}) -export class HomePageModule {} -``` diff --git a/static/usage/v8/tabs/router/angular/library_page_component_ts.md b/static/usage/v8/tabs/router/angular/library_page_component_ts.md index f5a92a4868a..072cd0a779f 100644 --- a/static/usage/v8/tabs/router/angular/library_page_component_ts.md +++ b/static/usage/v8/tabs/router/angular/library_page_component_ts.md @@ -1,9 +1,11 @@ ```ts import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; @Component({ selector: 'app-library-page', templateUrl: './library-page.component.html', + imports: [IonContent, IonHeader, IonTitle, IonToolbar], }) export class LibraryPageComponent {} ``` diff --git a/static/usage/v8/tabs/router/angular/library_page_module_ts.md b/static/usage/v8/tabs/router/angular/library_page_module_ts.md deleted file mode 100644 index 8e2ab48cf39..00000000000 --- a/static/usage/v8/tabs/router/angular/library_page_module_ts.md +++ /dev/null @@ -1,14 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { IonicModule } from '@ionic/angular'; - -import { LibraryPageComponent } from './library-page.component'; - -@NgModule({ - imports: [IonicModule, RouterModule.forChild([{ path: '', component: LibraryPageComponent }])], - declarations: [LibraryPageComponent], - exports: [LibraryPageComponent], -}) -export class LibraryPageModule {} -``` diff --git a/static/usage/v8/tabs/router/angular/radio_page_component_ts.md b/static/usage/v8/tabs/router/angular/radio_page_component_ts.md index d29209c00dd..63273c02807 100644 --- a/static/usage/v8/tabs/router/angular/radio_page_component_ts.md +++ b/static/usage/v8/tabs/router/angular/radio_page_component_ts.md @@ -1,9 +1,11 @@ ```ts import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; @Component({ selector: 'app-radio-page', templateUrl: './radio-page.component.html', + imports: [IonContent, IonHeader, IonTitle, IonToolbar], }) export class RadioPageComponent {} ``` diff --git a/static/usage/v8/tabs/router/angular/radio_page_module_ts.md b/static/usage/v8/tabs/router/angular/radio_page_module_ts.md deleted file mode 100644 index f50a0088632..00000000000 --- a/static/usage/v8/tabs/router/angular/radio_page_module_ts.md +++ /dev/null @@ -1,14 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { RadioPageComponent } from './radio-page.component'; - -import { IonicModule } from '@ionic/angular'; - -@NgModule({ - imports: [IonicModule, RouterModule.forChild([{ path: '', component: RadioPageComponent }])], - declarations: [RadioPageComponent], - exports: [RadioPageComponent], -}) -export class RadioPageModule {} -``` diff --git a/static/usage/v8/tabs/router/angular/search_page_component_ts.md b/static/usage/v8/tabs/router/angular/search_page_component_ts.md index bd6e723d332..00eb12be824 100644 --- a/static/usage/v8/tabs/router/angular/search_page_component_ts.md +++ b/static/usage/v8/tabs/router/angular/search_page_component_ts.md @@ -1,9 +1,11 @@ ```ts import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; @Component({ selector: 'app-search-page', templateUrl: './search-page.component.html', + imports: [IonContent, IonHeader, IonTitle, IonToolbar], }) export class SearchPageComponent {} ``` diff --git a/static/usage/v8/tabs/router/angular/search_page_module_ts.md b/static/usage/v8/tabs/router/angular/search_page_module_ts.md deleted file mode 100644 index a1d599c5d9b..00000000000 --- a/static/usage/v8/tabs/router/angular/search_page_module_ts.md +++ /dev/null @@ -1,14 +0,0 @@ -```ts -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { SearchPageComponent } from './search-page.component'; - -import { IonicModule } from '@ionic/angular'; - -@NgModule({ - imports: [IonicModule, RouterModule.forChild([{ path: '', component: SearchPageComponent }])], - declarations: [SearchPageComponent], - exports: [SearchPageComponent], -}) -export class SearchPageModule {} -``` diff --git a/static/usage/v8/tabs/router/index.md b/static/usage/v8/tabs/router/index.md index 90700816abb..fabae4f6cd8 100644 --- a/static/usage/v8/tabs/router/index.md +++ b/static/usage/v8/tabs/router/index.md @@ -3,26 +3,22 @@ import Playground from '@site/src/components/global/Playground'; import javascript_index_html from './javascript/index_html.md'; import javascript_index_ts from './javascript/index_ts.md'; +import angular_app_routes_ts from './angular/app_routes_ts.md'; import angular_app_component_html from './angular/app_component_html.md'; -import angular_app_module_ts from './angular/app_module_ts.md'; -import angular_app_routing_module_ts from './angular/app_routing_module_ts.md'; +import angular_app_component_ts from './angular/app_component_ts.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_home_page_module_ts from './angular/home_page_module_ts.md'; import angular_home_page_component_ts from './angular/home_page_component_ts.md'; import angular_home_page_component_html from './angular/home_page_component_html.md'; -import angular_library_page_module_ts from './angular/library_page_module_ts.md'; import angular_library_page_component_ts from './angular/library_page_component_ts.md'; import angular_library_page_component_html from './angular/library_page_component_html.md'; -import angular_radio_page_module_ts from './angular/radio_page_module_ts.md'; import angular_radio_page_component_ts from './angular/radio_page_component_ts.md'; import angular_radio_page_component_html from './angular/radio_page_component_html.md'; -import angular_search_page_module_ts from './angular/search_page_module_ts.md'; import angular_search_page_component_ts from './angular/search_page_component_ts.md'; import angular_search_page_component_html from './angular/search_page_component_html.md'; @@ -54,24 +50,20 @@ import react_search_page_tsx from './react/search_page_tsx.md'; }, angular: { files: { + 'src/global.css': angular_global_css, + 'src/app/app.routes.ts': angular_app_routes_ts, + 'src/app/app.component.html': angular_app_component_html, + 'src/app/app.component.ts': angular_app_component_ts, 'src/app/example.component.html': angular_example_component_html, 'src/app/example.component.ts': angular_example_component_ts, 'src/app/home/home-page.component.ts': angular_home_page_component_ts, 'src/app/home/home-page.component.html': angular_home_page_component_html, - 'src/global.css': angular_global_css, - 'src/app/home/home-page.module.ts': angular_home_page_module_ts, 'src/app/library/library-page.component.ts': angular_library_page_component_ts, 'src/app/library/library-page.component.html': angular_library_page_component_html, - 'src/app/library/library-page.module.ts': angular_library_page_module_ts, 'src/app/radio/radio-page.component.ts': angular_radio_page_component_ts, 'src/app/radio/radio-page.component.html': angular_radio_page_component_html, - 'src/app/radio/radio-page.module.ts': angular_radio_page_module_ts, 'src/app/search/search-page.component.ts': angular_search_page_component_ts, 'src/app/search/search-page.component.html': angular_search_page_component_html, - 'src/app/search/search-page.module.ts': angular_search_page_module_ts, - 'src/app/app.module.ts': angular_app_module_ts, - 'src/app/app.component.html': angular_app_component_html, - 'src/app/app-routing.module.ts': angular_app_routing_module_ts, }, }, vue: { diff --git a/static/usage/v8/text/basic/angular/example_component_ts.md b/static/usage/v8/text/basic/angular/example_component_ts.md index 122ee98dfbe..b49066098d3 100644 --- a/static/usage/v8/text/basic/angular/example_component_ts.md +++ b/static/usage/v8/text/basic/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonIcon, IonText } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { warning } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { warning } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonIcon, IonText], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/textarea/autogrow/angular.md b/static/usage/v8/textarea/autogrow/angular/example_component_html.md similarity index 100% rename from static/usage/v8/textarea/autogrow/angular.md rename to static/usage/v8/textarea/autogrow/angular/example_component_html.md diff --git a/static/usage/v8/textarea/autogrow/angular/example_component_ts.md b/static/usage/v8/textarea/autogrow/angular/example_component_ts.md new file mode 100644 index 00000000000..a407eaef3ba --- /dev/null +++ b/static/usage/v8/textarea/autogrow/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonTextarea } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/textarea/autogrow/index.md b/static/usage/v8/textarea/autogrow/index.md index d4288d0da5c..f1a7eea0565 100644 --- a/static/usage/v8/textarea/autogrow/index.md +++ b/static/usage/v8/textarea/autogrow/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/textarea/basic/angular.md b/static/usage/v8/textarea/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/textarea/basic/angular.md rename to static/usage/v8/textarea/basic/angular/example_component_html.md diff --git a/static/usage/v8/textarea/basic/angular/example_component_ts.md b/static/usage/v8/textarea/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..5e8570222df --- /dev/null +++ b/static/usage/v8/textarea/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/textarea/basic/index.md b/static/usage/v8/textarea/basic/index.md index 61d4251c86b..5e5fa9afb78 100644 --- a/static/usage/v8/textarea/basic/index.md +++ b/static/usage/v8/textarea/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/textarea/clear-on-edit/angular.md b/static/usage/v8/textarea/clear-on-edit/angular/example_component_html.md similarity index 100% rename from static/usage/v8/textarea/clear-on-edit/angular.md rename to static/usage/v8/textarea/clear-on-edit/angular/example_component_html.md diff --git a/static/usage/v8/textarea/clear-on-edit/angular/example_component_ts.md b/static/usage/v8/textarea/clear-on-edit/angular/example_component_ts.md new file mode 100644 index 00000000000..ddae482aec7 --- /dev/null +++ b/static/usage/v8/textarea/clear-on-edit/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonTextarea } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/textarea/clear-on-edit/index.md b/static/usage/v8/textarea/clear-on-edit/index.md index 5f2d928b215..9f617c997ae 100644 --- a/static/usage/v8/textarea/clear-on-edit/index.md +++ b/static/usage/v8/textarea/clear-on-edit/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/textarea/counter/angular/example_component_ts.md b/static/usage/v8/textarea/counter/angular/example_component_ts.md index 2c08dc06fc2..2b46bbe6dad 100644 --- a/static/usage/v8/textarea/counter/angular/example_component_ts.md +++ b/static/usage/v8/textarea/counter/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonTextarea } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonTextarea], }) export class ExampleComponent { customCounterFormatter(inputLength: number, maxLength: number) { diff --git a/static/usage/v8/textarea/fill/angular.md b/static/usage/v8/textarea/fill/angular/example_component_html.md similarity index 100% rename from static/usage/v8/textarea/fill/angular.md rename to static/usage/v8/textarea/fill/angular/example_component_html.md diff --git a/static/usage/v8/textarea/fill/angular/example_component_ts.md b/static/usage/v8/textarea/fill/angular/example_component_ts.md new file mode 100644 index 00000000000..ddae482aec7 --- /dev/null +++ b/static/usage/v8/textarea/fill/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonTextarea } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/textarea/fill/index.md b/static/usage/v8/textarea/fill/index.md index 73d6beae803..e3ebf6621d7 100644 --- a/static/usage/v8/textarea/fill/index.md +++ b/static/usage/v8/textarea/fill/index.md @@ -3,12 +3,24 @@ 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/textarea/helper-error/angular.md b/static/usage/v8/textarea/helper-error/angular/example_component_html.md similarity index 100% rename from static/usage/v8/textarea/helper-error/angular.md rename to static/usage/v8/textarea/helper-error/angular/example_component_html.md diff --git a/static/usage/v8/textarea/helper-error/angular/example_component_ts.md b/static/usage/v8/textarea/helper-error/angular/example_component_ts.md new file mode 100644 index 00000000000..ddae482aec7 --- /dev/null +++ b/static/usage/v8/textarea/helper-error/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonTextarea } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/textarea/helper-error/index.md b/static/usage/v8/textarea/helper-error/index.md index 2a0d896e83a..b6d3e084d07 100644 --- a/static/usage/v8/textarea/helper-error/index.md +++ b/static/usage/v8/textarea/helper-error/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/textarea/label-slot/angular.md b/static/usage/v8/textarea/label-slot/angular/example_component_html.md similarity index 100% rename from static/usage/v8/textarea/label-slot/angular.md rename to static/usage/v8/textarea/label-slot/angular/example_component_html.md diff --git a/static/usage/v8/textarea/label-slot/angular/example_component_ts.md b/static/usage/v8/textarea/label-slot/angular/example_component_ts.md new file mode 100644 index 00000000000..874d21ed018 --- /dev/null +++ b/static/usage/v8/textarea/label-slot/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonText, IonTextarea } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonText, IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/textarea/label-slot/index.md b/static/usage/v8/textarea/label-slot/index.md index baf22ad55b5..64d7ff6cb0f 100644 --- a/static/usage/v8/textarea/label-slot/index.md +++ b/static/usage/v8/textarea/label-slot/index.md @@ -3,6 +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/textarea/no-visible-label/angular.md b/static/usage/v8/textarea/no-visible-label/angular/example_component_html.md similarity index 100% rename from static/usage/v8/textarea/no-visible-label/angular.md rename to static/usage/v8/textarea/no-visible-label/angular/example_component_html.md diff --git a/static/usage/v8/textarea/no-visible-label/angular/example_component_ts.md b/static/usage/v8/textarea/no-visible-label/angular/example_component_ts.md new file mode 100644 index 00000000000..5e8570222df --- /dev/null +++ b/static/usage/v8/textarea/no-visible-label/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonTextarea } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/textarea/no-visible-label/index.md b/static/usage/v8/textarea/no-visible-label/index.md index 7274f4734fe..626f04e63e4 100644 --- a/static/usage/v8/textarea/no-visible-label/index.md +++ b/static/usage/v8/textarea/no-visible-label/index.md @@ -3,6 +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/textarea/start-end-slots/angular/example_component_ts.md b/static/usage/v8/textarea/start-end-slots/angular/example_component_ts.md index 899f7a826a3..c110f8c1596 100644 --- a/static/usage/v8/textarea/start-end-slots/angular/example_component_ts.md +++ b/static/usage/v8/textarea/start-end-slots/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonButton, IonIcon, IonItem, IonList, IonTextarea } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { eye, lockClosed } from 'ionicons/icons'; @@ -8,6 +9,7 @@ import { eye, lockClosed } from 'ionicons/icons'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon, IonItem, IonList, IonTextarea], }) export class ExampleComponent { constructor() { diff --git a/static/usage/v8/textarea/theming/angular/example_component_ts.md b/static/usage/v8/textarea/theming/angular/example_component_ts.md new file mode 100644 index 00000000000..ddae482aec7 --- /dev/null +++ b/static/usage/v8/textarea/theming/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonTextarea } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/textarea/theming/index.md b/static/usage/v8/textarea/theming/index.md index 76004eb4ed6..97747123ddc 100644 --- a/static/usage/v8/textarea/theming/index.md +++ b/static/usage/v8/textarea/theming/index.md @@ -9,6 +9,7 @@ import vue from './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 angular_global_css from './angular/global_css.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/thumbnail/item/angular.md b/static/usage/v8/thumbnail/item/angular/example_component_html.md similarity index 100% rename from static/usage/v8/thumbnail/item/angular.md rename to static/usage/v8/thumbnail/item/angular/example_component_html.md diff --git a/static/usage/v8/thumbnail/item/angular/example_component_ts.md b/static/usage/v8/thumbnail/item/angular/example_component_ts.md new file mode 100644 index 00000000000..fd6269b877c --- /dev/null +++ b/static/usage/v8/thumbnail/item/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonThumbnail } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonThumbnail], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/thumbnail/item/index.md b/static/usage/v8/thumbnail/item/index.md index d12e29ff95f..0aa457bef7f 100644 --- a/static/usage/v8/thumbnail/item/index.md +++ b/static/usage/v8/thumbnail/item/index.md @@ -3,6 +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/thumbnail/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/thumbnail/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..a82583c287d --- /dev/null +++ b/static/usage/v8/thumbnail/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonThumbnail } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonThumbnail], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/thumbnail/theming/css-properties/index.md b/static/usage/v8/thumbnail/theming/css-properties/index.md index 60473043c83..0596691aef3 100644 --- a/static/usage/v8/thumbnail/theming/css-properties/index.md +++ b/static/usage/v8/thumbnail/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; diff --git a/static/usage/v8/toast/inline/basic/angular.md b/static/usage/v8/toast/inline/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/toast/inline/basic/angular.md rename to static/usage/v8/toast/inline/basic/angular/example_component_html.md diff --git a/static/usage/v8/toast/inline/basic/angular/example_component_ts.md b/static/usage/v8/toast/inline/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..4e602aa6713 --- /dev/null +++ b/static/usage/v8/toast/inline/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/toast/inline/basic/index.md b/static/usage/v8/toast/inline/basic/index.md index c256cb1c739..fa9937e1854 100644 --- a/static/usage/v8/toast/inline/basic/index.md +++ b/static/usage/v8/toast/inline/basic/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/toggle/basic/angular.md b/static/usage/v8/toggle/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v8/toggle/basic/angular.md rename to static/usage/v8/toggle/basic/angular/example_component_html.md diff --git a/static/usage/v8/toggle/basic/angular/example_component_ts.md b/static/usage/v8/toggle/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..7bcffbfd88f --- /dev/null +++ b/static/usage/v8/toggle/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonToggle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/toggle/basic/index.md b/static/usage/v8/toggle/basic/index.md index 8a7695a62bc..58494462ad6 100644 --- a/static/usage/v8/toggle/basic/index.md +++ b/static/usage/v8/toggle/basic/index.md @@ -3,6 +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/toggle/justify/angular.md b/static/usage/v8/toggle/justify/angular/example_component_html.md similarity index 100% rename from static/usage/v8/toggle/justify/angular.md rename to static/usage/v8/toggle/justify/angular/example_component_html.md diff --git a/static/usage/v8/toggle/justify/angular/example_component_ts.md b/static/usage/v8/toggle/justify/angular/example_component_ts.md new file mode 100644 index 00000000000..80a17959d02 --- /dev/null +++ b/static/usage/v8/toggle/justify/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonToggle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/toggle/justify/index.md b/static/usage/v8/toggle/justify/index.md index 92432d33f7a..1784ddadf94 100644 --- a/static/usage/v8/toggle/justify/index.md +++ b/static/usage/v8/toggle/justify/index.md @@ -3,6 +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/toggle/label-placement/angular.md b/static/usage/v8/toggle/label-placement/angular/example_component_html.md similarity index 100% rename from static/usage/v8/toggle/label-placement/angular.md rename to static/usage/v8/toggle/label-placement/angular/example_component_html.md diff --git a/static/usage/v8/toggle/label-placement/angular/example_component_ts.md b/static/usage/v8/toggle/label-placement/angular/example_component_ts.md new file mode 100644 index 00000000000..7bcffbfd88f --- /dev/null +++ b/static/usage/v8/toggle/label-placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonToggle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/toggle/label-placement/index.md b/static/usage/v8/toggle/label-placement/index.md index 7a5204f2f9e..023b15fc38e 100644 --- a/static/usage/v8/toggle/label-placement/index.md +++ b/static/usage/v8/toggle/label-placement/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/toggle/list/angular.md b/static/usage/v8/toggle/list/angular/example_component_html.md similarity index 100% rename from static/usage/v8/toggle/list/angular.md rename to static/usage/v8/toggle/list/angular/example_component_html.md diff --git a/static/usage/v8/toggle/list/angular/example_component_ts.md b/static/usage/v8/toggle/list/angular/example_component_ts.md new file mode 100644 index 00000000000..80a17959d02 --- /dev/null +++ b/static/usage/v8/toggle/list/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonToggle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/toggle/list/index.md b/static/usage/v8/toggle/list/index.md index 66a8b51a026..f9f3bc75c51 100644 --- a/static/usage/v8/toggle/list/index.md +++ b/static/usage/v8/toggle/list/index.md @@ -3,6 +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/toggle/on-off/angular.md b/static/usage/v8/toggle/on-off/angular/example_component_html.md similarity index 100% rename from static/usage/v8/toggle/on-off/angular.md rename to static/usage/v8/toggle/on-off/angular/example_component_html.md diff --git a/static/usage/v8/toggle/on-off/angular/example_component_ts.md b/static/usage/v8/toggle/on-off/angular/example_component_ts.md new file mode 100644 index 00000000000..7bcffbfd88f --- /dev/null +++ b/static/usage/v8/toggle/on-off/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonToggle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/toggle/on-off/index.md b/static/usage/v8/toggle/on-off/index.md index ff1d95d2f81..e54975f66bb 100644 --- a/static/usage/v8/toggle/on-off/index.md +++ b/static/usage/v8/toggle/on-off/index.md @@ -3,6 +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/toggle/theming/colors/angular.md b/static/usage/v8/toggle/theming/colors/angular/example_component_html.md similarity index 100% rename from static/usage/v8/toggle/theming/colors/angular.md rename to static/usage/v8/toggle/theming/colors/angular/example_component_html.md diff --git a/static/usage/v8/toggle/theming/colors/angular/example_component_ts.md b/static/usage/v8/toggle/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..7bcffbfd88f --- /dev/null +++ b/static/usage/v8/toggle/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonToggle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/toggle/theming/colors/index.md b/static/usage/v8/toggle/theming/colors/index.md index 44fc0a52e8d..bf0a1e5ca42 100644 --- a/static/usage/v8/toggle/theming/colors/index.md +++ b/static/usage/v8/toggle/theming/colors/index.md @@ -3,6 +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/toggle/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/toggle/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..7bcffbfd88f --- /dev/null +++ b/static/usage/v8/toggle/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonToggle } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/toggle/theming/css-properties/index.md b/static/usage/v8/toggle/theming/css-properties/index.md index a136177ef9d..553ef9c1fe3 100644 --- a/static/usage/v8/toggle/theming/css-properties/index.md +++ b/static/usage/v8/toggle/theming/css-properties/index.md @@ -7,8 +7,9 @@ import react_main_tsx from './react/main_tsx.md'; import vue from './vue.md'; -import angular_example_component_css from './angular/example_component_css.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'; diff --git a/static/usage/v8/toolbar/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/toolbar/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..680c14e0481 --- /dev/null +++ b/static/usage/v8/toolbar/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/toolbar/theming/css-properties/index.md b/static/usage/v8/toolbar/theming/css-properties/index.md index 72e5c8117fe..a277fcb21ce 100644 --- a/static/usage/v8/toolbar/theming/css-properties/index.md +++ b/static/usage/v8/toolbar/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './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'; diff --git a/versioned_docs/version-v7/api/nav.md b/versioned_docs/version-v7/api/nav.md index 2c17d05f6b2..5195dc19efb 100644 --- a/versioned_docs/version-v7/api/nav.md +++ b/versioned_docs/version-v7/api/nav.md @@ -37,6 +37,20 @@ import NavLinkExample from '@site/static/usage/v7/nav/nav-link/index.md'; +## Navigation within a Modal + +Modal can use Nav to offer a linear navigation that is independent of the URL. + +:::note + +The example below uses a reference to Nav and the public method APIs to push and pop views. It is recommended to use NavLink in implementations that do not require this level of granular access and control. + +::: + +import ModalNavigationExample from '@site/static/usage/v7/nav/modal-navigation/index.md'; + + + ## Interfaces ### NavCustomEvent diff --git a/versioned_docs/version-v7/api/radio.md b/versioned_docs/version-v7/api/radio.md index 25308e1fe29..c470a326ed6 100644 --- a/versioned_docs/version-v7/api/radio.md +++ b/versioned_docs/version-v7/api/radio.md @@ -39,6 +39,14 @@ import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md +## Object Value References + +By default, the radio group uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property. + +import UsingComparewith from '@site/static/usage/v8/radio/using-comparewith/index.md'; + + + ## Alignment Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property. diff --git a/versioned_docs/version-v7/api/reorder.md b/versioned_docs/version-v7/api/reorder.md index 0fe49c8b7d5..8d5e7ef6aa6 100644 --- a/versioned_docs/version-v7/api/reorder.md +++ b/versioned_docs/version-v7/api/reorder.md @@ -65,7 +65,7 @@ In order to sort the array upon completion of the reorder, the array should be p In some cases, it may be necessary for an app to reorder both the array and the DOM nodes on its own. If this is required, `false` should be passed as a parameter to the `complete` method. This will prevent Ionic from reordering any DOM nodes inside of the reorder group. -Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `trackBy` for Angular, and `key` for React and Vue. +Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `track` for Angular, and `key` for React and Vue. import UpdatingData from '@site/static/usage/v7/reorder/updating-data/index.md';