From c5926f05fd8e2e505b8166d7616a72e5439f90d3 Mon Sep 17 00:00:00 2001 From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com> Date: Mon, 16 Dec 2024 18:32:26 -0500 Subject: [PATCH 1/3] chore(stackblitz): update Angular to use WebContainers --- .../global/Playground/stackblitz.utils.ts | 69 ++++----- .../code/stackblitz/v7/angular/angular.json | 143 ++++++++++-------- .../stackblitz/v7/angular/app.component.ts | 9 +- .../code/stackblitz/v7/angular/app.module.ts | 16 -- .../code/stackblitz/v7/angular/app.routes.ts | 13 ++ static/code/stackblitz/v7/angular/index.html | 15 ++ static/code/stackblitz/v7/angular/main.ts | 17 ++- .../code/stackblitz/v7/angular/package.json | 28 +++- static/code/stackblitz/v7/angular/styles.css | 20 +-- .../stackblitz/v7/angular/tsconfig.app.json | 9 ++ .../code/stackblitz/v7/angular/tsconfig.json | 23 ++- .../code/stackblitz/v8/angular/angular.json | 143 ++++++++++-------- .../stackblitz/v8/angular/app.component.ts | 9 +- .../code/stackblitz/v8/angular/app.module.ts | 16 -- .../code/stackblitz/v8/angular/app.routes.ts | 13 ++ static/code/stackblitz/v8/angular/index.html | 15 ++ static/code/stackblitz/v8/angular/main.ts | 17 ++- .../code/stackblitz/v8/angular/package.json | 32 +++- static/code/stackblitz/v8/angular/styles.css | 30 ++-- .../stackblitz/v8/angular/tsconfig.app.json | 9 ++ .../code/stackblitz/v8/angular/tsconfig.json | 23 ++- 21 files changed, 412 insertions(+), 257 deletions(-) delete mode 100644 static/code/stackblitz/v7/angular/app.module.ts create mode 100644 static/code/stackblitz/v7/angular/app.routes.ts create mode 100644 static/code/stackblitz/v7/angular/index.html create mode 100644 static/code/stackblitz/v7/angular/tsconfig.app.json delete mode 100644 static/code/stackblitz/v8/angular/app.module.ts create mode 100644 static/code/stackblitz/v8/angular/app.routes.ts create mode 100644 static/code/stackblitz/v8/angular/index.html create mode 100644 static/code/stackblitz/v8/angular/tsconfig.app.json diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts index 620d6dbe2d..841f4a7402 100644 --- a/src/components/global/Playground/stackblitz.utils.ts +++ b/src/components/global/Playground/stackblitz.utils.ts @@ -105,8 +105,13 @@ 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/index.html', + 'angular/app.routes.ts', 'angular/app.component.ts', 'angular/app.component.css', options?.includeIonContent ? 'angular/app.component.withContent.html' : 'angular/app.component.html', @@ -114,58 +119,50 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => { '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 811624f69b..7cc8b31603 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 ed440084f8..0a7113552c 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, IonContent } 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, IonContent], }) -export class AppComponent { } +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 7f6894ce6a..0000000000 --- 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 0000000000..f442724b6f --- /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 0000000000..227b2a07ed --- /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 518110491b..db355ecf14 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 2fbb72a638..fcb7176519 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 463c50148f..b01fadedbe 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 0000000000..f69a169a56 --- /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 129cb6a388..f46b98bad6 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 811624f69b..7cc8b31603 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 ed440084f8..0a7113552c 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, IonContent } 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, IonContent], }) -export class AppComponent { } +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 7f6894ce6a..0000000000 --- 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 0000000000..f442724b6f --- /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 0000000000..227b2a07ed --- /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 518110491b..db355ecf14 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 cc00c35fb5..b0c78d7f46 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 4532a9076d..6d58ddeb61 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 0000000000..f69a169a56 --- /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 129cb6a388..f46b98bad6 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 } } From 8557af00439b273ae93d8ed658c4af12575bdf57 Mon Sep 17 00:00:00 2001 From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com> Date: Fri, 20 Dec 2024 10:27:02 -0500 Subject: [PATCH 2/3] docs(stackblitz): only add IonContent when it is included --- .../global/Playground/stackblitz.utils.ts | 2 +- static/code/stackblitz/v7/angular/app.component.ts | 4 ++-- .../v7/angular/app.component.withContent.ts | 13 +++++++++++++ static/code/stackblitz/v8/angular/app.component.ts | 4 ++-- .../v8/angular/app.component.withContent.ts | 13 +++++++++++++ 5 files changed, 31 insertions(+), 5 deletions(-) create mode 100644 static/code/stackblitz/v7/angular/app.component.withContent.ts create mode 100644 static/code/stackblitz/v8/angular/app.component.withContent.ts diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts index 841f4a7402..4406da5011 100644 --- a/src/components/global/Playground/stackblitz.utils.ts +++ b/src/components/global/Playground/stackblitz.utils.ts @@ -112,7 +112,7 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => { 'angular/main.ts', 'angular/index.html', 'angular/app.routes.ts', - 'angular/app.component.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', diff --git a/static/code/stackblitz/v7/angular/app.component.ts b/static/code/stackblitz/v7/angular/app.component.ts index 0a7113552c..0cf0f64b77 100644 --- a/static/code/stackblitz/v7/angular/app.component.ts +++ b/static/code/stackblitz/v7/angular/app.component.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { IonApp, IonContent } from '@ionic/angular/standalone'; +import { IonApp } 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], + imports: [ExampleComponent, IonApp], }) 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 0000000000..0a7113552c --- /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/v8/angular/app.component.ts b/static/code/stackblitz/v8/angular/app.component.ts index 0a7113552c..0cf0f64b77 100644 --- a/static/code/stackblitz/v8/angular/app.component.ts +++ b/static/code/stackblitz/v8/angular/app.component.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { IonApp, IonContent } from '@ionic/angular/standalone'; +import { IonApp } 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], + imports: [ExampleComponent, IonApp], }) 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 0000000000..0a7113552c --- /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() {} +} From 63c277848e13aa403186e1781f5a8cf368a9fcf4 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 31 Dec 2024 09:06:57 -0500 Subject: [PATCH 3/3] docs(playgrounds): update angular to standalone (#3981) Co-authored-by: Brandy Carney <6577830+brandyscarney@users.noreply.github.com> --- docs/api/infinite-scroll.md | 4 +- docs/api/reorder.md | 2 +- .../global/Playground/stackblitz.utils.ts | 1 - .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../accessibility/animations/index.md | 11 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/accordion/basic/index.md | 11 +- .../angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../customization/expansion-styles/index.md | 11 +- .../example_component_html.md} | 0 .../icons/angular/example_component_ts.md | 23 ++++ .../v7/accordion/customization/icons/index.md | 11 +- .../theming/angular/example_component_ts.md | 12 ++ .../accordion/customization/theming/index.md | 2 + .../v7/accordion/disable-group/demo.html | 41 ------- .../usage/v7/accordion/disable-group/index.md | 17 --- .../v7/accordion/disable-group/javascript.md | 22 ---- .../usage/v7/accordion/disable-group/react.md | 35 ------ .../usage/v7/accordion/disable-group/vue.md | 37 ------ .../group/angular/example_component_html.md} | 0 .../group/angular/example_component_ts.md | 12 ++ .../usage/v7/accordion/disable/group/index.md | 11 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../v7/accordion/disable/individual/index.md | 11 +- .../angular/example_component_ts.md | 5 +- .../example_component_html.md} | 0 .../multiple/angular/example_component_ts.md | 12 ++ static/usage/v7/accordion/multiple/index.md | 11 +- .../example_component_html.md} | 0 .../group/angular/example_component_ts.md | 12 ++ .../v7/accordion/readonly/group/index.md | 11 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../v7/accordion/readonly/individual/index.md | 11 +- .../toggle/angular/example_component_ts.md | 6 +- .../angular/example_component_ts.md | 5 +- .../isOpen/angular/example_component_ts.md | 3 + .../trigger/angular/example_component_ts.md | 3 + .../angular/example_component_ts.md | 7 +- .../angular/example_component_ts.md | 2 + .../styling/angular/example_component_ts.md | 2 + .../buttons/angular/example_component_ts.md | 7 +- .../angular/example_component_ts.md | 3 + .../radios/angular/example_component_ts.md | 3 + .../angular/example_component_ts.md | 3 + .../angular/example_component_ts.md | 4 +- .../isOpen/angular/example_component_ts.md | 3 + .../trigger/angular/example_component_ts.md | 3 + .../basic/angular/example_component_ts.md | 13 ++- .../angular/example_component_ts.md | 54 +++++---- .../chain/angular/example_component_ts.md | 104 +++++++++-------- .../gesture/angular/example_component_ts.md | 13 ++- .../group/angular/example_component_ts.md | 20 ++-- .../keyframes/angular/example_component_ts.md | 10 +- .../angular/example_component_ts.md | 30 +++-- .../angular/example_component_ts.md | 12 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/avatar/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../chip/angular/example_component_ts.md | 12 ++ static/usage/v7/avatar/chip/index.md | 20 +++- .../example_component_html.md} | 0 .../item/angular/example_component_ts.md | 12 ++ static/usage/v7/avatar/item/index.md | 20 +++- .../angular/example_component_ts.md | 12 ++ .../v7/avatar/theming/css-properties/index.md | 2 + .../basic/angular/app_module_ts.md | 20 ---- .../basic/angular/example_component_ts.md | 3 + .../basic/angular/page_one_component_ts.md | 2 + .../basic/angular/page_two_component_ts.md | 2 + static/usage/v7/back-button/basic/index.md | 2 - .../custom/angular/app_module_ts.md | 20 ---- .../custom/angular/example_component_ts.md | 3 + .../custom/angular/page_one_component_ts.md | 2 + .../custom/angular/page_two_component_ts.md | 16 ++- static/usage/v7/back-button/custom/index.md | 2 - .../basic/angular/example_component_ts.md | 21 ++++ static/usage/v7/backdrop/basic/index.md | 4 +- .../styling/angular/example_component_ts.md | 20 ++++ static/usage/v7/backdrop/styling/index.md | 6 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/badge/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ static/usage/v7/badge/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../v7/badge/theming/css-properties/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/breadcrumbs/basic/index.md | 20 +++- .../angular/example_component_ts.md | 7 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../items-before-after/index.md | 16 ++- .../example_component_html.md} | 0 .../max-items/angular/example_component_ts.md | 12 ++ .../collapsing-items/max-items/index.md | 16 ++- .../angular/example_component_html.md | 8 +- .../angular/example_component_ts.md | 13 ++- .../angular/example_component_ts.md | 2 + .../angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../v7/breadcrumbs/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../theming/css-properties/index.md | 4 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/button/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../expand/angular/example_component_ts.md | 12 ++ static/usage/v7/button/expand/index.md | 20 +++- .../example_component_html.md} | 0 .../fill/angular/example_component_ts.md | 12 ++ static/usage/v7/button/fill/index.md | 20 +++- .../icons/angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../shape/angular/example_component_ts.md | 12 ++ static/usage/v7/button/shape/index.md | 20 +++- .../example_component_html.md} | 0 .../size/angular/example_component_ts.md | 12 ++ static/usage/v7/button/size/index.md | 20 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v7/button/text-wrapping/index.md | 20 +++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../usage/v7/button/theming/colors/index.md | 20 +++- .../angular/example_component_ts.md | 12 ++ .../v7/button/theming/css-properties/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/buttons/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../placement/angular/example_component_ts.md | 12 ++ static/usage/v7/buttons/placement/index.md | 20 +++- .../types/angular/example_component_ts.md | 10 ++ .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/card/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../buttons/angular/example_component_ts.md | 19 ++++ static/usage/v7/card/buttons/index.md | 21 +++- .../card/list/angular/example_component_ts.md | 32 ++++++ static/usage/v7/card/list/index.md | 2 + .../example_component_html.md} | 0 .../media/angular/example_component_ts.md | 12 ++ static/usage/v7/card/media/index.md | 21 +++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ static/usage/v7/card/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../v7/card/theming/css-properties/index.md | 2 + .../example_component_html.md} | 0 .../alignment/angular/example_component_ts.md | 12 ++ static/usage/v7/checkbox/alignment/index.md | 11 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/checkbox/basic/index.md | 11 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v7/checkbox/indeterminate/index.md | 11 +- .../example_component_html.md} | 0 .../justify/angular/example_component_ts.md | 12 ++ static/usage/v7/checkbox/justify/index.md | 20 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v7/checkbox/label-link/index.md | 11 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../v7/checkbox/label-placement/index.md | 20 +++- .../angular/example_component_ts.md | 12 ++ .../checkbox/theming/css-properties/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/chip/basic/index.md | 20 +++- .../slots/angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ static/usage/v7/chip/theming/colors/index.md | 20 +++- .../angular/example_component_ts.md | 12 ++ .../v7/chip/theming/css-properties/index.md | 6 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/content/basic/index.md | 16 ++- static/usage/v7/content/fixed/angular.md | 54 --------- .../fixed/angular/example_component_ts.md | 12 ++ static/usage/v7/content/fixed/index.md | 2 + static/usage/v7/content/fixed/react.md | 62 ----------- .../angular/example_component_ts.md | 12 ++ static/usage/v7/content/fullscreen/index.md | 2 + .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v7/content/header-footer/index.md | 16 ++- .../angular/example_component_ts.md | 4 +- .../angular/example_component_ts.md | 6 +- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../usage/v7/content/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../content/theming/css-properties/index.md | 2 + .../angular/example_component_ts.md | 12 ++ .../content/theming/css-shadow-parts/index.md | 2 + .../safe-area/angular/example_component_ts.md | 12 ++ .../v7/content/theming/safe-area/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ .../usage/v7/datetime-button/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 16 +++ .../datetime-button/format-options/index.md | 11 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/datetime/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../buttons/customizing-button-texts/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../buttons/customizing-buttons/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../showing-confirmation-buttons/index.md | 16 ++- .../advanced/angular/example_component_ts.md | 3 + .../example_component_html.md} | 0 .../max-min/angular/example_component_ts.md | 12 ++ .../date-constraints/max-min/index.md | 16 ++- .../example_component_html.md} | 0 .../values/angular/example_component_ts.md | 12 ++ .../datetime/date-constraints/values/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 16 +++ .../usage/v7/datetime/format-options/index.md | 11 +- .../array/angular/example_component_ts.md | 3 + .../callback/angular/example_component_ts.md | 5 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../localization/custom-locale/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../localization/first-day-of-week/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../datetime/localization/hour-cycle/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../locale-extension-tags/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../datetime/localization/time-label/index.md | 16 ++- .../example_component_html.md} | 0 .../multiple/angular/example_component_ts.md | 12 ++ static/usage/v7/datetime/multiple/index.md | 16 ++- .../example_component_html.md} | 0 .../date/angular/example_component_ts.md | 12 ++ .../v7/datetime/presentation/date/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../presentation/month-and-year/index.md | 16 ++- .../example_component_html.md} | 0 .../time/angular/example_component_ts.md | 12 ++ .../v7/datetime/presentation/time/index.md | 16 ++- .../example_component_html.md} | 0 .../wheel/angular/example_component_ts.md | 12 ++ .../v7/datetime/presentation/wheel/index.md | 16 ++- .../angular/example_component_ts.md | 5 +- .../angular/example_component_ts.md | 12 ++ .../global-theming/angular/global_css.md | 20 ++-- .../datetime/styling/global-theming/index.md | 2 + .../angular/example_component_ts.md | 2 + .../v7/datetime/theming/angular/global_css.md | 20 ++-- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../datetime/title/customizing-title/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../title/showing-default-title/index.md | 16 ++- .../fab/basic/angular/example_component_ts.md | 2 + .../angular/example_component_ts.md | 2 + .../list-side/angular/example_component_ts.md | 2 + .../angular/example_component_ts.md | 11 ++ .../safe-area/angular/example_component_ts.md | 2 + .../colors/angular/example_component_ts.md | 2 + .../angular/example_component_ts.md | 2 + .../angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/footer/basic/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../v7/footer/custom-scroll-target/index.md | 2 + .../example_component_html.md} | 0 .../fade/angular/example_component_ts.md | 12 ++ static/usage/v7/footer/fade/index.md | 16 ++- .../example_component_html.md} | 0 .../no-border/angular/example_component_ts.md | 12 ++ static/usage/v7/footer/no-border/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v7/footer/translucent/index.md | 16 ++- .../basic/angular/example_component_ts.md | 9 +- .../angular/example_component_ts.md | 5 +- .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/grid/basic/index.md | 2 + .../angular/example_component_ts.md | 12 ++ .../grid/customizing/column-number/index.md | 2 + .../padding/angular/example_component_ts.md | 12 ++ .../v7/grid/customizing/padding/index.md | 2 + .../width/angular/example_component_ts.md | 12 ++ .../usage/v7/grid/customizing/width/index.md | 2 + .../fixed/angular/example_component_ts.md | 12 ++ static/usage/v7/grid/fixed/index.md | 2 + .../angular/example_component_ts.md | 12 ++ .../v7/grid/horizontal-alignment/index.md | 2 + .../angular/example_component_ts.md | 12 ++ .../usage/v7/grid/offset-responsive/index.md | 2 + .../offset/angular/example_component_ts.md | 12 ++ static/usage/v7/grid/offset/index.md | 2 + .../angular/example_component_ts.md | 12 ++ .../v7/grid/push-pull-responsive/index.md | 2 + .../push-pull/angular/example_component_ts.md | 12 ++ static/usage/v7/grid/push-pull/index.md | 2 + .../size-auto/angular/example_component_ts.md | 12 ++ static/usage/v7/grid/size-auto/index.md | 2 + .../angular/example_component_ts.md | 12 ++ static/usage/v7/grid/size-responsive/index.md | 2 + .../grid/size/angular/example_component_ts.md | 12 ++ static/usage/v7/grid/size/index.md | 2 + .../angular/example_component_ts.md | 12 ++ .../usage/v7/grid/vertical-alignment/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/header/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../condense/angular/example_component_ts.md | 12 ++ static/usage/v7/header/condense/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../v7/header/custom-scroll-target/index.md | 2 + .../example_component_html.md} | 0 .../fade/angular/example_component_ts.md | 12 ++ static/usage/v7/header/fade/index.md | 16 ++- .../example_component_html.md} | 0 .../no-border/angular/example_component_ts.md | 12 ++ static/usage/v7/header/no-border/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v7/header/translucent/index.md | 16 ++- .../basic/angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../img/basic/angular/example_component_ts.md | 12 ++ static/usage/v7/img/basic/index.md | 20 +++- .../basic/angular/example_component_html.md | 4 +- .../basic/angular/example_component_ts.md | 21 +++- .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 8 +- .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 16 ++- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/input/basic/index.md | 21 +++- .../example_component_html.md} | 0 .../clear/angular/example_component_ts.md | 12 ++ static/usage/v7/input/clear/index.md | 21 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v7/input/counter-alignment/index.md | 11 +- .../counter/angular/example_component_ts.md | 3 + .../example_component_html.md} | 0 .../fill/angular/example_component_ts.md | 12 ++ static/usage/v7/input/fill/index.md | 16 ++- .../filtering/angular/example_component_ts.md | 10 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v7/input/helper-error/index.md | 11 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v7/input/label-placement/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v7/input/label-slot/index.md | 20 +++- .../v7/input/mask/angular/app_module_ts.md | 19 ---- .../mask/angular/example_component_ts.md | 5 + static/usage/v7/input/mask/index.md | 2 - .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v7/input/no-visible-label/index.md | 20 +++- .../example_component_html.md} | 0 .../set-focus/angular/example_component_ts.md | 12 ++ static/usage/v7/input/set-focus/index.md | 13 ++- .../angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ static/usage/v7/input/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../v7/input/theming/css-properties/index.md | 2 + .../example_component_html.md} | 0 .../types/angular/example_component_ts.md | 12 ++ static/usage/v7/input/types/index.md | 21 +++- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/item-divider/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../v7/item-divider/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../theming/css-properties/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/item-group/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 20 ++++ .../v7/item-group/sliding-items/index.md | 16 ++- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/item-sliding/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v7/item-sliding/expandable/index.md | 16 ++- .../icons/angular/example_component_ts.md | 10 ++ .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/item/basic/index.md | 21 +++- .../buttons/angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../clickable/angular/example_component_ts.md | 12 ++ static/usage/v7/item/clickable/index.md | 20 +++- .../actions/angular/example_component_ts.md | 28 +++++ .../example_component_html.md} | 0 .../controls/angular/example_component_ts.md | 21 ++++ .../v7/item/content-types/controls/index.md | 11 +- .../metadata/angular/example_component_ts.md | 13 +++ .../angular/example_component_ts.md | 2 + .../text/angular/example_component_ts.md | 36 ++++++ .../usage/v7/item/content-types/text/index.md | 2 + .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v7/item/detail-arrows/index.md | 16 ++- .../example_component_html.md} | 0 .../inputs/angular/example_component_ts.md | 20 ++++ static/usage/v7/item/inputs/index.md | 21 +++- .../lines/angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../media/angular/example_component_ts.md | 12 ++ static/usage/v7/item/media/index.md | 20 +++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ static/usage/v7/item/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../v7/item/theming/css-properties/index.md | 6 +- .../angular/example_component_ts.md | 12 ++ .../v7/item/theming/css-shadow-parts/index.md | 6 +- .../angular/example_component_ts.md | 12 ++ .../v7/item/theming/input-highlight/index.md | 6 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v7/keyboard/enterkeyhint/index.md | 11 +- .../example_component_html.md} | 0 .../inputmode/angular/example_component_ts.md | 12 ++ static/usage/v7/keyboard/inputmode/index.md | 11 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/label/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../input/angular/example_component_ts.md | 12 ++ static/usage/v7/label/input/index.md | 21 +++- .../example_component_html.md} | 0 .../item/angular/example_component_ts.md | 12 ++ static/usage/v7/label/item/index.md | 21 +++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ static/usage/v7/label/theming/colors/index.md | 20 +++- .../angular/example_component_ts.md | 34 ++++++ .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/list-header/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../buttons/angular/example_component_ts.md | 12 ++ static/usage/v7/list-header/buttons/index.md | 16 ++- .../example_component_html.md} | 0 .../lines/angular/example_component_ts.md | 12 ++ static/usage/v7/list-header/lines/index.md | 16 ++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../v7/list-header/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../theming/css-properties/index.md | 6 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/list/basic/index.md | 21 +++- .../example_component_html.md} | 0 .../inset/angular/example_component_ts.md | 12 ++ static/usage/v7/list/inset/index.md | 16 ++- .../example_component_html.md} | 0 .../lines/angular/example_component_ts.md | 12 ++ static/usage/v7/list/lines/index.md | 21 +++- .../angular/example_component_ts.md | 5 +- .../example_component_html.md} | 0 .../inline/angular/example_component_ts.md | 12 ++ static/usage/v7/loading/inline/index.md | 11 +- .../example_component_html.md} | 0 .../spinners/angular/example_component_ts.md | 12 ++ static/usage/v7/loading/spinners/index.md | 11 +- .../theming/angular/example_component_ts.md | 12 ++ static/usage/v7/loading/theming/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 20 ++++ static/usage/v7/menu/basic/index.md | 11 +- .../multiple/angular/example_component_ts.md | 12 +- .../example_component_html.md} | 0 .../sides/angular/example_component_ts.md | 20 ++++ static/usage/v7/menu/sides/index.md | 11 +- .../theming/angular/example_component_ts.md | 21 ++++ static/usage/v7/menu/theming/index.md | 2 + .../example_component_html.md} | 0 .../toggle/angular/example_component_ts.md | 20 ++++ static/usage/v7/menu/toggle/index.md | 11 +- .../menu/type/angular/example_component_ts.md | 27 +++++ .../boolean/angular/example_component_ts.md | 17 ++- .../child-state/angular/app_module_ts.md | 19 ---- .../child-state/angular/child_component_ts.md | 21 +++- .../angular/example_component_ts.md | 16 ++- .../v7/modal/can-dismiss/child-state/index.md | 2 - .../function/angular/example_component_ts.md | 16 ++- .../angular/example_component_ts.md | 13 ++- .../basic/angular/example_component_ts.md | 31 +++++- .../modal/controller/angular/app_module_ts.md | 19 ---- .../angular/example_component_ts.md | 5 +- .../angular/modal-example_component_ts.md | 15 ++- static/usage/v7/modal/controller/index.md | 2 - .../angular/example_component_ts.md | 13 +++ .../basic/angular/example_component_ts.md | 30 ++++- .../is-open/angular/example_component_ts.md | 11 ++ .../example_component_html.md} | 0 .../mount/angular/example_component_ts.md | 20 ++++ .../usage/v7/modal/performance/mount/index.md | 11 +- .../angular/example_component_ts.md | 12 ++ .../usage/v7/modal/sheet/auto-height/index.md | 2 + .../angular/example_component_ts.md | 28 +++++ .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 38 +++++++ static/usage/v7/modal/sheet/basic/index.md | 11 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../v7/modal/sheet/handle-behavior/index.md | 11 +- .../angular/example_component_ts.md | 35 +++++- .../theming/angular/example_component_ts.md | 38 +++++++ .../usage/v7/modal/styling/theming/index.md | 4 +- .../modal-navigation/angular/app_module_ts.md | 21 ---- .../angular/example_component_ts.md | 15 ++- .../angular/page_one_component_ts.md | 3 +- .../angular/page_three_component_ts.md | 3 +- .../angular/page_two_component_ts.md | 3 +- static/usage/v7/nav/modal-navigation/index.md | 2 - .../v7/nav/nav-link/angular/app_module_ts.md | 21 ---- .../nav-link/angular/example_component_ts.md | 3 + .../nav-link/angular/page_one_component_ts.md | 2 + .../angular/page_three_component_ts.md | 2 + .../nav-link/angular/page_two_component_ts.md | 11 ++ static/usage/v7/nav/nav-link/index.md | 2 - .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/note/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../note/item/angular/example_component_ts.md | 12 ++ static/usage/v7/note/item/index.md | 20 +++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ static/usage/v7/note/theming/colors/index.md | 20 +++- .../angular/example_component_ts.md | 12 ++ .../v7/note/theming/css-properties/index.md | 6 +- .../angular/example_component_ts.md | 4 +- .../isOpen/angular/example_component_ts.md | 12 +- .../trigger/angular/example_component_ts.md | 12 +- .../angular/example_component_ts.md | 20 +++- .../angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../sizing/angular/example_component_ts.md | 12 ++ .../v7/popover/customization/sizing/index.md | 16 ++- .../styling/angular/example_component_ts.md | 12 ++ .../v7/popover/customization/styling/index.md | 2 + .../example_component_html.md} | 0 .../nested/angular/example_component_ts.md | 12 ++ static/usage/v7/popover/nested/index.md | 16 ++- .../example_component_html.md} | 0 .../mount/angular/example_component_ts.md | 12 ++ .../v7/popover/performance/mount/index.md | 11 +- .../controller/angular/app_module_ts.md | 19 ---- .../angular/example_component_ts.md | 7 +- .../angular/popover_component_ts.md | 3 +- .../v7/popover/presenting/controller/index.md | 2 - .../angular/example_component_ts.md | 5 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../presenting/inline-trigger/index.md | 16 ++- .../buffer/angular/example_component_ts.md | 2 + .../angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../v7/progress-bar/indeterminate/index.md | 16 ++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../v7/progress-bar/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../theming/css-properties/index.md | 2 + .../angular/example_component_ts.md | 12 ++ .../theming/css-shadow-parts/index.md | 2 + .../example_component_html.md} | 0 .../alignment/angular/example_component_ts.md | 12 ++ static/usage/v7/radio/alignment/index.md | 11 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/radio/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v7/radio/empty-selection/index.md | 20 +++- .../example_component_html.md} | 0 .../justify/angular/example_component_ts.md | 12 ++ static/usage/v7/radio/justify/index.md | 20 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v7/radio/label-placement/index.md | 20 +++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ static/usage/v7/radio/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../v7/radio/theming/css-properties/index.md | 2 + .../angular/example_component_ts.md | 12 ++ .../radio/theming/css-shadow-parts/index.md | 2 + .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 22 ++-- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/range/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v7/range/dual-knobs/index.md | 20 +++- .../angular/example_component_ts.md | 5 +- .../angular/example_component_ts.md | 5 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v7/range/label-slot/index.md | 20 +++- .../example_component_html.md} | 0 .../labels/angular/example_component_ts.md | 12 ++ static/usage/v7/range/labels/index.md | 21 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v7/range/no-visible-label/index.md | 20 +++- .../pins/angular/example_component_ts.md | 3 + .../slots/angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v7/range/snapping-ticks/index.md | 20 +++- .../angular/example_component_ts.md | 12 ++ .../v7/range/theming/css-properties/index.md | 4 +- .../angular/example_component_ts.md | 12 ++ .../range/theming/css-shadow-parts/index.md | 4 +- .../angular/example_component_html.md | 4 +- .../advanced/angular/example_component_ts.md | 37 +++++- .../basic/angular/example_component_ts.md | 14 ++- .../angular/example_component_ts.md | 14 ++- .../angular/example_component_ts.md | 13 ++- .../angular/example_component_ts.md | 14 ++- .../basic/angular/example_component_ts.md | 12 +- .../angular/example_component_ts.md | 13 ++- .../angular/example_component_ts.md | 12 +- .../angular/example_component_ts.md | 13 ++- .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 16 ++- .../wrapper/angular/example_component_ts.md | 12 +- .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/ripple-effect/basic/index.md | 2 + .../angular/example_component_ts.md | 12 ++ .../v7/ripple-effect/customizing/index.md | 2 + .../type/angular/example_component_ts.md | 12 ++ static/usage/v7/ripple-effect/type/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/searchbar/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 24 ++++ .../usage/v7/searchbar/cancel-button/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 24 ++++ .../usage/v7/searchbar/clear-button/index.md | 16 ++- .../angular/example_component_html.md | 4 +- .../debounce/angular/example_component_ts.md | 10 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 24 ++++ .../usage/v7/searchbar/search-icon/index.md | 20 +++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../v7/searchbar/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../searchbar/theming/css-properties/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/segment-button/basic/index.md | 20 +++- .../layout/angular/example_component_ts.md | 2 + .../angular/example_component_ts.md | 12 ++ .../theming/css-properties/index.md | 6 +- .../angular/example_component_ts.md | 12 ++ .../theming/css-shadow-parts/index.md | 6 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/segment/basic/index.md | 20 +++- .../angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../usage/v7/segment/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../segment/theming/css-properties/index.md | 6 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../select/basic/multiple-selection/index.md | 16 ++- .../angular/example_component_ts.md | 7 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../v7/select/basic/single-selection/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../select/customization/button-text/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 24 ++++ .../custom-toggle-icons/index.md | 16 ++- .../angular/example_component_ts.md | 16 ++- .../angular/example_component_ts.md | 3 + .../angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../fill/angular/example_component_ts.md | 12 ++ static/usage/v7/select/fill/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../select/interfaces/action-sheet/index.md | 16 ++- .../example_component_html.md} | 0 .../popover/angular/example_component_ts.md | 12 ++ .../v7/select/interfaces/popover/index.md | 16 ++- .../example_component_html.md} | 0 .../justify/angular/example_component_ts.md | 12 ++ static/usage/v7/select/justify/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v7/select/label-placement/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v7/select/label-slot/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v7/select/no-visible-label/index.md | 16 ++- .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 18 ++- .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 18 ++- .../angular/example_component_ts.md | 2 + .../select/typeahead/angular/app_module_ts.md | 19 ---- .../typeahead/angular/example_component_ts.md | 20 +++- ...nt_html.md => typeahead_component_html.md} | 4 +- .../angular/typeahead_component_ts.md} | 47 +++++--- static/usage/v7/select/typeahead/index.md | 10 +- .../basic/angular/example_component_html.md | 8 +- .../basic/angular/example_component_ts.md | 11 ++ .../angular/example_component_ts.md | 12 ++ .../theming/css-properties/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/spinner/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../usage/v7/spinner/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../spinner/theming/css-properties/index.md | 2 + .../resizing/angular/example_component_ts.md | 12 ++ .../v7/spinner/theming/resizing/index.md | 4 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/split-pane/basic/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../theming/css-properties/index.md | 2 + .../tabs/router/angular/app_component_html.md | 4 +- .../tabs/router/angular/app_component_ts.md | 14 +++ .../v7/tabs/router/angular/app_module_ts.md | 19 ---- .../v7/tabs/router/angular/app_routes_ts.md | 39 +++++++ .../router/angular/app_routing_module_ts.md | 42 ------- .../router/angular/example_component_ts.md | 2 + .../router/angular/home_page_component_ts.md | 2 + .../router/angular/home_page_module_ts.md | 14 --- .../angular/library_page_component_ts.md | 2 + .../router/angular/library_page_module_ts.md | 14 --- .../router/angular/radio_page_component_ts.md | 2 + .../router/angular/radio_page_module_ts.md | 14 --- .../angular/search_page_component_ts.md | 2 + .../router/angular/search_page_module_ts.md | 14 --- static/usage/v7/tabs/router/index.md | 20 +--- .../basic/angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../autogrow/angular/example_component_ts.md | 12 ++ static/usage/v7/textarea/autogrow/index.md | 16 ++- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/textarea/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v7/textarea/clear-on-edit/index.md | 16 ++- .../counter/angular/example_component_ts.md | 3 + .../example_component_html.md} | 0 .../fill/angular/example_component_ts.md | 12 ++ static/usage/v7/textarea/fill/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v7/textarea/helper-error/index.md | 11 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../v7/textarea/label-placement/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v7/textarea/label-slot/index.md | 20 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../v7/textarea/no-visible-label/index.md | 20 +++- .../angular/example_component_ts.md | 2 + .../theming/angular/example_component_ts.md | 12 ++ static/usage/v7/textarea/theming/index.md | 4 +- .../angular/example_component_ts.md | 35 ++++++ .../angular/example_component_ts.md | 45 +++++++- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/thumbnail/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../item/angular/example_component_ts.md | 12 ++ static/usage/v7/thumbnail/item/index.md | 20 +++- .../angular/example_component_ts.md | 12 ++ .../thumbnail/theming/css-properties/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/title/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ .../collapsible-large-title/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../buttons/angular/example_component_ts.md | 21 ++++ .../collapsible-large-title/buttons/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../v7/title/theming/css-properties/index.md | 2 + .../buttons/angular/example_component_ts.md | 7 +- .../example_component_html.md} | 0 .../icon/angular/example_component_ts.md | 24 ++++ static/usage/v7/toast/icon/index.md | 11 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/toast/inline/basic/index.md | 11 +- .../is-open/angular/example_component_ts.md | 3 + .../layout/angular/example_component_ts.md | 3 + .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v7/toast/position-anchor/index.md | 11 +- .../angular/example_component_ts.md | 4 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v7/toast/swipe-gesture/index.md | 11 +- .../theming/angular/example_component_ts.md | 3 + .../example_component_html.md} | 0 .../alignment/angular/example_component_ts.md | 12 ++ static/usage/v7/toggle/alignment/index.md | 11 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/toggle/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../justify/angular/example_component_ts.md | 12 ++ static/usage/v7/toggle/justify/index.md | 20 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v7/toggle/label-placement/index.md | 16 ++- .../example_component_html.md} | 0 .../list/angular/example_component_ts.md | 12 ++ static/usage/v7/toggle/list/index.md | 20 +++- .../example_component_html.md} | 0 .../on-off/angular/example_component_ts.md | 12 ++ static/usage/v7/toggle/on-off/index.md | 20 +++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../usage/v7/toggle/theming/colors/index.md | 20 +++- .../angular/example_component_ts.md | 12 ++ .../v7/toggle/theming/css-properties/index.md | 6 +- .../angular/example_component_ts.md | 12 ++ .../toggle/theming/css-shadow-parts/index.md | 6 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v7/toolbar/basic/index.md | 16 ++- .../buttons/angular/example_component_ts.md | 10 ++ .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v7/toolbar/progress-bars/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v7/toolbar/searchbars/index.md | 16 ++- .../example_component_html.md} | 0 .../segments/angular/example_component_ts.md | 12 ++ static/usage/v7/toolbar/segments/index.md | 16 ++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../usage/v7/toolbar/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../toolbar/theming/css-properties/index.md | 2 + .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../accessibility/animations/index.md | 11 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/accordion/basic/index.md | 11 +- .../angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../customization/expansion-styles/index.md | 11 +- .../example_component_html.md} | 0 .../icons/angular/example_component_ts.md | 23 ++++ .../v8/accordion/customization/icons/index.md | 11 +- .../theming/angular/example_component_ts.md | 12 ++ .../accordion/customization/theming/index.md | 2 + .../v8/accordion/disable-group/angular.md | 22 ---- .../v8/accordion/disable-group/demo.html | 41 ------- .../usage/v8/accordion/disable-group/index.md | 17 --- .../v8/accordion/disable-group/javascript.md | 22 ---- .../usage/v8/accordion/disable-group/react.md | 35 ------ .../usage/v8/accordion/disable-group/vue.md | 37 ------ .../v8/accordion/disable/group/angular.md | 22 ---- .../group/angular/example_component_html.md} | 0 .../group/angular/example_component_ts.md | 12 ++ .../usage/v8/accordion/disable/group/index.md | 11 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../v8/accordion/disable/individual/index.md | 11 +- .../angular/example_component_ts.md | 5 +- .../example_component_html.md} | 0 .../multiple/angular/example_component_ts.md | 12 ++ static/usage/v8/accordion/multiple/index.md | 11 +- .../example_component_html.md} | 0 .../group/angular/example_component_ts.md | 12 ++ .../v8/accordion/readonly/group/index.md | 11 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../v8/accordion/readonly/individual/index.md | 11 +- .../toggle/angular/example_component_ts.md | 6 +- .../angular/example_component_ts.md | 5 +- .../isOpen/angular/example_component_ts.md | 3 + .../trigger/angular/example_component_ts.md | 3 + .../angular/example_component_ts.md | 7 +- .../angular/example_component_ts.md | 2 + .../styling/angular/example_component_ts.md | 2 + .../buttons/angular/example_component_ts.md | 7 +- .../angular/example_component_ts.md | 3 + .../radios/angular/example_component_ts.md | 3 + .../angular/example_component_ts.md | 3 + .../angular/example_component_ts.md | 4 +- .../isOpen/angular/example_component_ts.md | 3 + .../trigger/angular/example_component_ts.md | 3 + .../basic/angular/example_component_ts.md | 14 ++- .../angular/example_component_ts.md | 55 +++++---- .../chain/angular/example_component_ts.md | 105 ++++++++++-------- .../gesture/angular/example_component_ts.md | 13 ++- .../group/angular/example_component_ts.md | 21 ++-- .../keyframes/angular/example_component_ts.md | 11 +- .../angular/example_component_ts.md | 30 +++-- .../angular/example_component_ts.md | 13 ++- .../set-focus/angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/avatar/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../chip/angular/example_component_ts.md | 12 ++ static/usage/v8/avatar/chip/index.md | 20 +++- .../example_component_html.md} | 0 .../item/angular/example_component_ts.md | 12 ++ static/usage/v8/avatar/item/index.md | 20 +++- .../angular/example_component_ts.md | 12 ++ .../v8/avatar/theming/css-properties/index.md | 2 + .../basic/angular/app_module_ts.md | 20 ---- .../basic/angular/example_component_ts.md | 3 + .../basic/angular/page_one_component_ts.md | 2 + .../basic/angular/page_two_component_ts.md | 2 + static/usage/v8/back-button/basic/index.md | 2 - .../custom/angular/app_module_ts.md | 20 ---- .../custom/angular/example_component_ts.md | 3 + .../custom/angular/page_one_component_ts.md | 2 + .../custom/angular/page_two_component_ts.md | 16 ++- static/usage/v8/back-button/custom/index.md | 2 - .../basic/angular/example_component_ts.md | 21 ++++ static/usage/v8/backdrop/basic/index.md | 4 +- .../styling/angular/example_component_ts.md | 20 ++++ static/usage/v8/backdrop/styling/index.md | 6 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/badge/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ static/usage/v8/badge/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../v8/badge/theming/css-properties/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/breadcrumbs/basic/index.md | 20 +++- .../angular/example_component_ts.md | 7 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../items-before-after/index.md | 16 ++- .../example_component_html.md} | 0 .../max-items/angular/example_component_ts.md | 12 ++ .../collapsing-items/max-items/index.md | 16 ++- .../angular/example_component_html.md | 8 +- .../angular/example_component_ts.md | 13 ++- .../angular/example_component_ts.md | 2 + .../angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../v8/breadcrumbs/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../theming/css-properties/index.md | 4 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/button/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../expand/angular/example_component_ts.md | 12 ++ static/usage/v8/button/expand/index.md | 20 +++- .../example_component_html.md} | 0 .../fill/angular/example_component_ts.md | 12 ++ static/usage/v8/button/fill/index.md | 20 +++- .../icons/angular/example_component_ts.md | 2 + .../shape/angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../size/angular/example_component_ts.md | 12 ++ static/usage/v8/button/size/index.md | 20 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v8/button/text-wrapping/index.md | 20 +++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../usage/v8/button/theming/colors/index.md | 20 +++- .../angular/example_component_ts.md | 12 ++ .../v8/button/theming/css-properties/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/buttons/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../placement/angular/example_component_ts.md | 12 ++ static/usage/v8/buttons/placement/index.md | 20 +++- .../types/angular/example_component_ts.md | 10 ++ .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/card/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../buttons/angular/example_component_ts.md | 19 ++++ static/usage/v8/card/buttons/index.md | 21 +++- .../card/list/angular/example_component_ts.md | 32 ++++++ static/usage/v8/card/list/index.md | 2 + .../example_component_html.md} | 0 .../media/angular/example_component_ts.md | 12 ++ static/usage/v8/card/media/index.md | 21 +++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ static/usage/v8/card/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../v8/card/theming/css-properties/index.md | 2 + .../example_component_html.md} | 0 .../alignment/angular/example_component_ts.md | 12 ++ static/usage/v8/checkbox/alignment/index.md | 11 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/checkbox/basic/index.md | 11 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v8/checkbox/indeterminate/index.md | 11 +- .../example_component_html.md} | 0 .../justify/angular/example_component_ts.md | 12 ++ static/usage/v8/checkbox/justify/index.md | 20 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v8/checkbox/label-link/index.md | 11 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../v8/checkbox/label-placement/index.md | 20 +++- .../angular/example_component_ts.md | 12 ++ .../checkbox/theming/css-properties/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/chip/basic/index.md | 20 +++- .../slots/angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ static/usage/v8/chip/theming/colors/index.md | 20 +++- .../angular/example_component_ts.md | 12 ++ .../v8/chip/theming/css-properties/index.md | 6 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/content/basic/index.md | 16 ++- static/usage/v8/content/fixed/angular.md | 54 --------- .../fixed/angular/example_component_ts.md | 12 ++ static/usage/v8/content/fixed/index.md | 2 + static/usage/v8/content/fixed/react.md | 62 ----------- .../angular/example_component_ts.md | 12 ++ static/usage/v8/content/fullscreen/index.md | 2 + .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v8/content/header-footer/index.md | 16 ++- .../angular/example_component_ts.md | 4 +- .../angular/example_component_ts.md | 6 +- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../usage/v8/content/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../content/theming/css-properties/index.md | 2 + .../angular/example_component_ts.md | 12 ++ .../content/theming/css-shadow-parts/index.md | 2 + .../safe-area/angular/example_component_ts.md | 12 ++ .../v8/content/theming/safe-area/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ .../usage/v8/datetime-button/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../datetime-button/format-options/index.md | 11 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/datetime/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../buttons/customizing-button-texts/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../buttons/customizing-buttons/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../showing-confirmation-buttons/index.md | 16 ++- .../advanced/angular/example_component_ts.md | 3 + .../example_component_html.md} | 0 .../max-min/angular/example_component_ts.md | 12 ++ .../date-constraints/max-min/index.md | 16 ++- .../example_component_html.md} | 0 .../values/angular/example_component_ts.md | 12 ++ .../datetime/date-constraints/values/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v8/datetime/format-options/index.md | 11 +- .../array/angular/example_component_ts.md | 3 + .../callback/angular/example_component_ts.md | 5 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../localization/custom-locale/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../localization/first-day-of-week/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../datetime/localization/hour-cycle/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../locale-extension-tags/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../datetime/localization/time-label/index.md | 16 ++- .../example_component_html.md} | 0 .../multiple/angular/example_component_ts.md | 12 ++ static/usage/v8/datetime/multiple/index.md | 16 ++- .../example_component_html.md} | 0 .../date/angular/example_component_ts.md | 12 ++ .../v8/datetime/presentation/date/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../presentation/month-and-year/index.md | 16 ++- .../example_component_html.md} | 0 .../time/angular/example_component_ts.md | 12 ++ .../v8/datetime/presentation/time/index.md | 16 ++- .../example_component_html.md} | 0 .../wheel/angular/example_component_ts.md | 12 ++ .../v8/datetime/presentation/wheel/index.md | 16 ++- .../angular/example_component_ts.md | 5 +- .../angular/example_component_ts.md | 12 ++ .../datetime/styling/global-theming/index.md | 2 + .../angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../datetime/title/customizing-title/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../title/showing-default-title/index.md | 16 ++- .../fab/basic/angular/example_component_ts.md | 2 + .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 34 +++++- .../angular/example_component_ts.md | 2 + .../list-side/angular/example_component_ts.md | 2 + .../angular/example_component_ts.md | 11 ++ .../safe-area/angular/example_component_ts.md | 2 + .../colors/angular/example_component_ts.md | 2 + .../angular/example_component_ts.md | 2 + .../angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/footer/basic/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../v8/footer/custom-scroll-target/index.md | 2 + .../example_component_html.md} | 0 .../fade/angular/example_component_ts.md | 12 ++ static/usage/v8/footer/fade/index.md | 16 ++- .../example_component_html.md} | 0 .../no-border/angular/example_component_ts.md | 12 ++ static/usage/v8/footer/no-border/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v8/footer/translucent/index.md | 16 ++- .../basic/angular/example_component_ts.md | 9 +- .../angular/example_component_ts.md | 5 +- .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/grid/basic/index.md | 2 + .../angular/example_component_ts.md | 12 ++ .../grid/customizing/column-number/index.md | 2 + .../padding/angular/example_component_ts.md | 12 ++ .../v8/grid/customizing/padding/index.md | 2 + .../width/angular/example_component_ts.md | 12 ++ .../usage/v8/grid/customizing/width/index.md | 2 + .../fixed/angular/example_component_ts.md | 12 ++ static/usage/v8/grid/fixed/index.md | 2 + .../angular/example_component_ts.md | 12 ++ .../v8/grid/horizontal-alignment/index.md | 2 + .../angular/example_component_ts.md | 12 ++ .../usage/v8/grid/offset-responsive/index.md | 2 + .../offset/angular/example_component_ts.md | 12 ++ static/usage/v8/grid/offset/index.md | 2 + .../angular/example_component_ts.md | 12 ++ .../v8/grid/push-pull-responsive/index.md | 2 + .../push-pull/angular/example_component_ts.md | 12 ++ static/usage/v8/grid/push-pull/index.md | 2 + .../size-auto/angular/example_component_ts.md | 12 ++ static/usage/v8/grid/size-auto/index.md | 2 + .../angular/example_component_ts.md | 12 ++ static/usage/v8/grid/size-responsive/index.md | 2 + .../grid/size/angular/example_component_ts.md | 12 ++ static/usage/v8/grid/size/index.md | 2 + .../angular/example_component_ts.md | 12 ++ .../usage/v8/grid/vertical-alignment/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/header/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../condense/angular/example_component_ts.md | 12 ++ static/usage/v8/header/condense/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../v8/header/custom-scroll-target/index.md | 2 + .../example_component_html.md} | 0 .../fade/angular/example_component_ts.md | 12 ++ static/usage/v8/header/fade/index.md | 16 ++- .../example_component_html.md} | 0 .../no-border/angular/example_component_ts.md | 12 ++ static/usage/v8/header/no-border/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v8/header/translucent/index.md | 16 ++- static/usage/v8/icon/basic/angular.md | 6 - .../basic/angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../img/basic/angular/example_component_ts.md | 12 ++ static/usage/v8/img/basic/index.md | 20 +++- .../basic/angular/example_component_html.md | 4 +- .../basic/angular/example_component_ts.md | 21 +++- .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 8 +- .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 16 ++- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ .../v8/input-password-toggle/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/input/basic/index.md | 21 +++- .../example_component_html.md} | 0 .../clear/angular/example_component_ts.md | 12 ++ static/usage/v8/input/clear/index.md | 21 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v8/input/counter-alignment/index.md | 11 +- .../counter/angular/example_component_ts.md | 3 + .../example_component_html.md} | 0 .../fill/angular/example_component_ts.md | 12 ++ static/usage/v8/input/fill/index.md | 16 ++- .../filtering/angular/example_component_ts.md | 10 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v8/input/helper-error/index.md | 11 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v8/input/label-placement/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v8/input/label-slot/index.md | 20 +++- .../v8/input/mask/angular/app_module_ts.md | 19 ---- .../mask/angular/example_component_ts.md | 5 + static/usage/v8/input/mask/index.md | 2 - .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v8/input/no-visible-label/index.md | 20 +++- .../example_component_html.md} | 0 .../set-focus/angular/example_component_ts.md | 12 ++ static/usage/v8/input/set-focus/index.md | 13 ++- .../angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ static/usage/v8/input/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../v8/input/theming/css-properties/index.md | 2 + .../example_component_html.md} | 0 .../types/angular/example_component_ts.md | 12 ++ static/usage/v8/input/types/index.md | 21 +++- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/item-divider/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../v8/item-divider/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../theming/css-properties/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/item-group/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 20 ++++ .../v8/item-group/sliding-items/index.md | 16 ++- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/item-sliding/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v8/item-sliding/expandable/index.md | 16 ++- .../icons/angular/example_component_ts.md | 10 ++ .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/item/basic/index.md | 21 +++- .../buttons/angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../clickable/angular/example_component_ts.md | 12 ++ static/usage/v8/item/clickable/index.md | 20 +++- .../actions/angular/example_component_ts.md | 28 +++++ .../example_component_html.md} | 0 .../controls/angular/example_component_ts.md | 21 ++++ .../v8/item/content-types/controls/index.md | 11 +- .../metadata/angular/example_component_ts.md | 13 +++ .../angular/example_component_ts.md | 2 + .../text/angular/example_component_ts.md | 36 ++++++ .../usage/v8/item/content-types/text/index.md | 2 + .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v8/item/detail-arrows/index.md | 16 ++- .../example_component_html.md} | 0 .../inputs/angular/example_component_ts.md | 20 ++++ static/usage/v8/item/inputs/index.md | 21 +++- .../lines/angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../media/angular/example_component_ts.md | 12 ++ static/usage/v8/item/media/index.md | 20 +++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ static/usage/v8/item/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../v8/item/theming/css-properties/index.md | 6 +- .../angular/example_component_ts.md | 12 ++ .../v8/item/theming/css-shadow-parts/index.md | 6 +- .../angular/example_component_ts.md | 12 ++ .../v8/item/theming/input-highlight/index.md | 6 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v8/keyboard/enterkeyhint/index.md | 11 +- .../example_component_html.md} | 0 .../inputmode/angular/example_component_ts.md | 12 ++ static/usage/v8/keyboard/inputmode/index.md | 11 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/label/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../input/angular/example_component_ts.md | 12 ++ static/usage/v8/label/input/index.md | 21 +++- .../example_component_html.md} | 0 .../item/angular/example_component_ts.md | 12 ++ static/usage/v8/label/item/index.md | 21 +++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ static/usage/v8/label/theming/colors/index.md | 20 +++- .../angular/example_component_ts.md | 34 ++++++ .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/list-header/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../buttons/angular/example_component_ts.md | 12 ++ static/usage/v8/list-header/buttons/index.md | 16 ++- .../example_component_html.md} | 0 .../lines/angular/example_component_ts.md | 12 ++ static/usage/v8/list-header/lines/index.md | 16 ++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../v8/list-header/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../theming/css-properties/index.md | 6 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/list/basic/index.md | 21 +++- .../example_component_html.md} | 0 .../inset/angular/example_component_ts.md | 12 ++ static/usage/v8/list/inset/index.md | 16 ++- .../example_component_html.md} | 0 .../lines/angular/example_component_ts.md | 12 ++ static/usage/v8/list/lines/index.md | 21 +++- .../angular/example_component_ts.md | 5 +- .../example_component_html.md} | 0 .../inline/angular/example_component_ts.md | 12 ++ static/usage/v8/loading/inline/index.md | 11 +- .../example_component_html.md} | 0 .../spinners/angular/example_component_ts.md | 12 ++ static/usage/v8/loading/spinners/index.md | 11 +- .../theming/angular/example_component_ts.md | 12 ++ static/usage/v8/loading/theming/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 20 ++++ static/usage/v8/menu/basic/index.md | 11 +- .../multiple/angular/example_component_ts.md | 12 +- .../example_component_html.md} | 0 .../sides/angular/example_component_ts.md | 20 ++++ static/usage/v8/menu/sides/index.md | 11 +- .../theming/angular/example_component_ts.md | 21 ++++ static/usage/v8/menu/theming/index.md | 2 + .../example_component_html.md} | 0 .../toggle/angular/example_component_ts.md | 20 ++++ static/usage/v8/menu/toggle/index.md | 11 +- .../menu/type/angular/example_component_ts.md | 27 +++++ .../boolean/angular/example_component_ts.md | 17 ++- .../child-state/angular/app_module_ts.md | 19 ---- .../child-state/angular/child_component_ts.md | 21 +++- .../angular/example_component_ts.md | 16 ++- .../v8/modal/can-dismiss/child-state/index.md | 2 - .../function/angular/example_component_ts.md | 16 ++- .../angular/example_component_ts.md | 13 ++- .../basic/angular/example_component_ts.md | 31 +++++- .../modal/controller/angular/app_module_ts.md | 19 ---- .../angular/example_component_ts.md | 5 +- .../angular/modal-example_component_ts.md | 15 ++- static/usage/v8/modal/controller/index.md | 2 - .../angular/example_component_ts.md | 13 +++ .../basic/angular/example_component_ts.md | 30 ++++- .../is-open/angular/example_component_ts.md | 11 ++ .../example_component_html.md} | 0 .../mount/angular/example_component_ts.md | 20 ++++ .../usage/v8/modal/performance/mount/index.md | 11 +- .../angular/example_component_ts.md | 12 ++ .../usage/v8/modal/sheet/auto-height/index.md | 2 + .../angular/example_component_ts.md | 28 +++++ .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 38 +++++++ static/usage/v8/modal/sheet/basic/index.md | 11 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../v8/modal/sheet/handle-behavior/index.md | 11 +- .../angular/example_component_ts.md | 35 +++++- .../theming/angular/example_component_ts.md | 38 +++++++ .../usage/v8/modal/styling/theming/index.md | 4 +- .../modal-navigation/angular/app_module_ts.md | 21 ---- .../angular/example_component_ts.md | 15 ++- .../angular/page_one_component_ts.md | 3 +- .../angular/page_three_component_ts.md | 3 +- .../angular/page_two_component_ts.md | 3 +- static/usage/v8/nav/modal-navigation/index.md | 2 - .../v8/nav/nav-link/angular/app_module_ts.md | 21 ---- .../nav-link/angular/example_component_ts.md | 3 + .../nav-link/angular/page_one_component_ts.md | 2 + .../angular/page_three_component_ts.md | 2 + .../nav-link/angular/page_two_component_ts.md | 11 ++ static/usage/v8/nav/nav-link/index.md | 2 - .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/note/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../note/item/angular/example_component_ts.md | 12 ++ static/usage/v8/note/item/index.md | 20 +++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ static/usage/v8/note/theming/colors/index.md | 20 +++- .../angular/example_component_ts.md | 12 ++ .../v8/note/theming/css-properties/index.md | 6 +- .../angular/example_component_ts.md | 4 +- .../isOpen/angular/example_component_ts.md | 12 +- .../trigger/angular/example_component_ts.md | 12 +- .../angular/example_component_ts.md | 20 +++- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/picker/basic/index.md | 11 +- .../modal/angular/example_component_ts.md | 10 ++ .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v8/picker/prefix-suffix/index.md | 11 +- .../angular/example_component_ts.md | 12 ++ .../v8/picker/theming/css-properties/index.md | 2 + .../angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../sizing/angular/example_component_ts.md | 12 ++ .../v8/popover/customization/sizing/index.md | 16 ++- .../styling/angular/example_component_ts.md | 12 ++ .../v8/popover/customization/styling/index.md | 2 + .../example_component_html.md} | 0 .../nested/angular/example_component_ts.md | 12 ++ static/usage/v8/popover/nested/index.md | 16 ++- .../example_component_html.md} | 0 .../mount/angular/example_component_ts.md | 12 ++ .../v8/popover/performance/mount/index.md | 11 +- .../controller/angular/app_module_ts.md | 19 ---- .../angular/example_component_ts.md | 7 +- .../angular/popover_component_ts.md | 3 +- .../v8/popover/presenting/controller/index.md | 2 - .../angular/example_component_ts.md | 5 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../presenting/inline-trigger/index.md | 16 ++- .../buffer/angular/example_component_ts.md | 2 + .../angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../v8/progress-bar/indeterminate/index.md | 16 ++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../v8/progress-bar/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../theming/css-properties/index.md | 2 + .../angular/example_component_ts.md | 12 ++ .../theming/css-shadow-parts/index.md | 2 + .../example_component_html.md} | 0 .../alignment/angular/example_component_ts.md | 12 ++ static/usage/v8/radio/alignment/index.md | 11 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/radio/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v8/radio/empty-selection/index.md | 20 +++- .../example_component_html.md} | 0 .../justify/angular/example_component_ts.md | 12 ++ static/usage/v8/radio/justify/index.md | 20 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v8/radio/label-placement/index.md | 20 +++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ static/usage/v8/radio/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../v8/radio/theming/css-properties/index.md | 2 + .../angular/example_component_ts.md | 12 ++ .../radio/theming/css-shadow-parts/index.md | 2 + .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 22 ++-- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/range/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v8/range/dual-knobs/index.md | 20 +++- .../angular/example_component_ts.md | 5 +- .../angular/example_component_ts.md | 5 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v8/range/label-slot/index.md | 20 +++- .../example_component_html.md} | 0 .../labels/angular/example_component_ts.md | 12 ++ static/usage/v8/range/labels/index.md | 21 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v8/range/no-visible-label/index.md | 20 +++- .../pins/angular/example_component_ts.md | 3 + .../slots/angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v8/range/snapping-ticks/index.md | 20 +++- .../angular/example_component_ts.md | 12 ++ .../v8/range/theming/css-properties/index.md | 4 +- .../angular/example_component_ts.md | 12 ++ .../range/theming/css-shadow-parts/index.md | 4 +- .../angular/example_component_html.md | 4 +- .../advanced/angular/example_component_ts.md | 37 +++++- .../basic/angular/example_component_ts.md | 14 ++- .../angular/example_component_ts.md | 14 ++- .../angular/example_component_ts.md | 13 ++- .../angular/example_component_ts.md | 14 ++- .../basic/angular/example_component_ts.md | 12 +- .../angular/example_component_ts.md | 13 ++- .../angular/example_component_ts.md | 12 +- .../angular/example_component_ts.md | 13 ++- .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 16 ++- .../wrapper/angular/example_component_ts.md | 12 +- .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/ripple-effect/basic/index.md | 2 + .../angular/example_component_ts.md | 12 ++ .../v8/ripple-effect/customizing/index.md | 2 + .../type/angular/example_component_ts.md | 12 ++ static/usage/v8/ripple-effect/type/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/searchbar/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 24 ++++ .../usage/v8/searchbar/cancel-button/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 24 ++++ .../usage/v8/searchbar/clear-button/index.md | 16 ++- .../angular/example_component_html.md | 4 +- .../debounce/angular/example_component_ts.md | 10 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 24 ++++ .../usage/v8/searchbar/search-icon/index.md | 20 +++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../v8/searchbar/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../searchbar/theming/css-properties/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/segment-button/basic/index.md | 20 +++- .../layout/angular/example_component_ts.md | 2 + .../angular/example_component_ts.md | 12 ++ .../theming/css-properties/index.md | 6 +- .../angular/example_component_ts.md | 12 ++ .../theming/css-shadow-parts/index.md | 6 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/segment/basic/index.md | 20 +++- .../angular/example_component_ts.md | 2 + ...ngular_css.md => example_component_css.md} | 0 ...ular_html.md => example_component_html.md} | 0 .../swipeable/angular/example_component_ts.md | 12 ++ static/usage/v8/segment/swipeable/index.md | 19 ++-- .../react/{react_css.md => main_css.md} | 0 .../react/{react_tsx.md => main_tsx.md} | 0 .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../usage/v8/segment/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../segment/theming/css-properties/index.md | 6 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../select/basic/multiple-selection/index.md | 16 ++- .../angular/example_component_ts.md | 7 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../v8/select/basic/single-selection/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../select/customization/button-text/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 24 ++++ .../custom-toggle-icons/index.md | 16 ++- .../angular/example_component_ts.md | 16 ++- .../angular/example_component_ts.md | 3 + .../angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../fill/angular/example_component_ts.md | 12 ++ static/usage/v8/select/fill/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../select/interfaces/action-sheet/index.md | 16 ++- .../example_component_html.md} | 0 .../modal/angular/example_component_ts.md | 12 ++ .../usage/v8/select/interfaces/modal/index.md | 16 ++- .../example_component_html.md} | 0 .../popover/angular/example_component_ts.md | 12 ++ .../v8/select/interfaces/popover/index.md | 16 ++- .../example_component_html.md} | 0 .../justify/angular/example_component_ts.md | 12 ++ static/usage/v8/select/justify/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v8/select/label-placement/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v8/select/label-slot/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v8/select/no-visible-label/index.md | 16 ++- .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 18 ++- .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 18 ++- .../angular/example_component_ts.md | 2 + .../select/typeahead/angular/app_module_ts.md | 19 ---- .../typeahead/angular/example_component_ts.md | 20 +++- ...nt_html.md => typeahead_component_html.md} | 4 +- .../angular/typeahead_component_ts.md} | 47 +++++--- static/usage/v8/select/typeahead/index.md | 10 +- .../basic/angular/example_component_html.md | 8 +- .../basic/angular/example_component_ts.md | 11 ++ .../angular/example_component_ts.md | 12 ++ .../theming/css-properties/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/spinner/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../usage/v8/spinner/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../spinner/theming/css-properties/index.md | 2 + .../resizing/angular/example_component_ts.md | 12 ++ .../v8/spinner/theming/resizing/index.md | 4 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/split-pane/basic/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../theming/css-properties/index.md | 2 + .../basic/angular/example_component_ts.md | 12 ++ .../tabs/router/angular/app_component_html.md | 4 +- .../tabs/router/angular/app_component_ts.md | 14 +++ .../v8/tabs/router/angular/app_module_ts.md | 19 ---- .../v8/tabs/router/angular/app_routes_ts.md | 39 +++++++ .../router/angular/app_routing_module_ts.md | 42 ------- .../router/angular/example_component_ts.md | 2 + .../router/angular/home_page_component_ts.md | 2 + .../router/angular/home_page_module_ts.md | 14 --- .../angular/library_page_component_ts.md | 2 + .../router/angular/library_page_module_ts.md | 14 --- .../router/angular/radio_page_component_ts.md | 2 + .../router/angular/radio_page_module_ts.md | 14 --- .../angular/search_page_component_ts.md | 2 + .../router/angular/search_page_module_ts.md | 14 --- static/usage/v8/tabs/router/index.md | 20 +--- .../basic/angular/example_component_ts.md | 2 + .../example_component_html.md} | 0 .../autogrow/angular/example_component_ts.md | 12 ++ static/usage/v8/textarea/autogrow/index.md | 16 ++- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/textarea/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v8/textarea/clear-on-edit/index.md | 16 ++- .../counter/angular/example_component_ts.md | 3 + .../example_component_html.md} | 0 .../fill/angular/example_component_ts.md | 12 ++ static/usage/v8/textarea/fill/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v8/textarea/helper-error/index.md | 11 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../v8/textarea/label-placement/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v8/textarea/label-slot/index.md | 20 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../v8/textarea/no-visible-label/index.md | 20 +++- .../angular/example_component_ts.md | 2 + .../theming/angular/example_component_ts.md | 12 ++ static/usage/v8/textarea/theming/index.md | 4 +- .../angular/example_component_ts.md | 34 ++++++ .../angular/example_component_ts.md | 34 ++++++ .../angular/example_component_ts.md | 45 +++++++- .../angular/example_component_ts.md | 53 +++++++-- .../angular/example_component_ts.md | 34 ++++++ .../angular/example_component_ts.md | 34 ++++++ .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/thumbnail/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../item/angular/example_component_ts.md | 12 ++ static/usage/v8/thumbnail/item/index.md | 20 +++- .../angular/example_component_ts.md | 12 ++ .../thumbnail/theming/css-properties/index.md | 2 + .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/title/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ .../collapsible-large-title/basic/index.md | 16 ++- .../example_component_html.md} | 0 .../buttons/angular/example_component_ts.md | 21 ++++ .../collapsible-large-title/buttons/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../v8/title/theming/css-properties/index.md | 2 + .../buttons/angular/example_component_ts.md | 7 +- .../example_component_html.md} | 0 .../icon/angular/example_component_ts.md | 24 ++++ static/usage/v8/toast/icon/index.md | 11 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/toast/inline/basic/index.md | 11 +- .../is-open/angular/example_component_ts.md | 3 + .../layout/angular/example_component_ts.md | 3 + .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v8/toast/position-anchor/index.md | 11 +- .../angular/example_component_ts.md | 4 +- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v8/toast/swipe-gesture/index.md | 11 +- .../theming/angular/example_component_ts.md | 3 + .../example_component_html.md} | 0 .../alignment/angular/example_component_ts.md | 12 ++ static/usage/v8/toggle/alignment/index.md | 11 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/toggle/basic/index.md | 20 +++- .../example_component_html.md} | 0 .../justify/angular/example_component_ts.md | 12 ++ static/usage/v8/toggle/justify/index.md | 20 +++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v8/toggle/label-placement/index.md | 16 ++- .../example_component_html.md} | 0 .../list/angular/example_component_ts.md | 12 ++ static/usage/v8/toggle/list/index.md | 20 +++- .../example_component_html.md} | 0 .../on-off/angular/example_component_ts.md | 12 ++ static/usage/v8/toggle/on-off/index.md | 20 +++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../usage/v8/toggle/theming/colors/index.md | 20 +++- .../angular/example_component_ts.md | 12 ++ .../v8/toggle/theming/css-properties/index.md | 6 +- .../angular/example_component_ts.md | 12 ++ .../toggle/theming/css-shadow-parts/index.md | 6 +- .../example_component_html.md} | 0 .../basic/angular/example_component_ts.md | 12 ++ static/usage/v8/toolbar/basic/index.md | 16 ++- .../buttons/angular/example_component_ts.md | 10 ++ .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ .../usage/v8/toolbar/progress-bars/index.md | 16 ++- .../example_component_html.md} | 0 .../angular/example_component_ts.md | 12 ++ static/usage/v8/toolbar/searchbars/index.md | 16 ++- .../example_component_html.md} | 0 .../segments/angular/example_component_ts.md | 12 ++ static/usage/v8/toolbar/segments/index.md | 16 ++- .../example_component_html.md} | 0 .../colors/angular/example_component_ts.md | 12 ++ .../usage/v8/toolbar/theming/colors/index.md | 16 ++- .../angular/example_component_ts.md | 12 ++ .../toolbar/theming/css-properties/index.md | 2 + .../version-v7/api/infinite-scroll.md | 2 + versioned_docs/version-v7/api/nav.md | 14 +++ versioned_docs/version-v7/api/radio.md | 8 ++ versioned_docs/version-v7/api/reorder.md | 2 +- 1845 files changed, 15621 insertions(+), 2693 deletions(-) rename static/usage/v7/accordion/accessibility/animations/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/accordion/accessibility/animations/angular/example_component_ts.md rename static/usage/v7/accordion/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/accordion/basic/angular/example_component_ts.md rename static/usage/v7/accordion/customization/expansion-styles/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/accordion/customization/expansion-styles/angular/example_component_ts.md rename static/usage/v7/accordion/customization/icons/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/accordion/customization/icons/angular/example_component_ts.md create mode 100644 static/usage/v7/accordion/customization/theming/angular/example_component_ts.md delete mode 100644 static/usage/v7/accordion/disable-group/demo.html delete mode 100644 static/usage/v7/accordion/disable-group/index.md delete mode 100644 static/usage/v7/accordion/disable-group/javascript.md delete mode 100644 static/usage/v7/accordion/disable-group/react.md delete mode 100644 static/usage/v7/accordion/disable-group/vue.md rename static/usage/v7/accordion/{disable-group/angular.md => disable/group/angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/accordion/disable/group/angular/example_component_ts.md rename static/usage/v7/accordion/disable/individual/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/accordion/disable/individual/angular/example_component_ts.md rename static/usage/v7/accordion/multiple/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/accordion/multiple/angular/example_component_ts.md rename static/usage/v7/accordion/readonly/group/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/accordion/readonly/group/angular/example_component_ts.md rename static/usage/v7/accordion/readonly/individual/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/accordion/readonly/individual/angular/example_component_ts.md rename static/usage/v7/avatar/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/avatar/basic/angular/example_component_ts.md rename static/usage/v7/avatar/chip/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/avatar/chip/angular/example_component_ts.md rename static/usage/v7/avatar/item/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/avatar/item/angular/example_component_ts.md create mode 100644 static/usage/v7/avatar/theming/css-properties/angular/example_component_ts.md delete mode 100644 static/usage/v7/back-button/basic/angular/app_module_ts.md delete mode 100644 static/usage/v7/back-button/custom/angular/app_module_ts.md create mode 100644 static/usage/v7/backdrop/basic/angular/example_component_ts.md create mode 100644 static/usage/v7/backdrop/styling/angular/example_component_ts.md rename static/usage/v7/badge/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/badge/basic/angular/example_component_ts.md rename static/usage/v7/badge/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/badge/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v7/badge/theming/css-properties/angular/example_component_ts.md rename static/usage/v7/breadcrumbs/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/breadcrumbs/basic/angular/example_component_ts.md rename static/usage/v7/breadcrumbs/collapsing-items/items-before-after/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular/example_component_ts.md rename static/usage/v7/breadcrumbs/collapsing-items/max-items/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/breadcrumbs/collapsing-items/max-items/angular/example_component_ts.md rename static/usage/v7/breadcrumbs/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/breadcrumbs/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_ts.md rename static/usage/v7/button/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/button/basic/angular/example_component_ts.md rename static/usage/v7/button/expand/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/button/expand/angular/example_component_ts.md rename static/usage/v7/button/fill/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/button/fill/angular/example_component_ts.md rename static/usage/v7/button/shape/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/button/shape/angular/example_component_ts.md rename static/usage/v7/button/size/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/button/size/angular/example_component_ts.md rename static/usage/v7/button/text-wrapping/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/button/text-wrapping/angular/example_component_ts.md rename static/usage/v7/button/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/button/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v7/button/theming/css-properties/angular/example_component_ts.md rename static/usage/v7/buttons/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/buttons/basic/angular/example_component_ts.md rename static/usage/v7/buttons/placement/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/buttons/placement/angular/example_component_ts.md rename static/usage/v7/card/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/card/basic/angular/example_component_ts.md rename static/usage/v7/card/buttons/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/card/buttons/angular/example_component_ts.md create mode 100644 static/usage/v7/card/list/angular/example_component_ts.md rename static/usage/v7/card/media/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/card/media/angular/example_component_ts.md rename static/usage/v7/card/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/card/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v7/card/theming/css-properties/angular/example_component_ts.md rename static/usage/v7/checkbox/alignment/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/checkbox/alignment/angular/example_component_ts.md rename static/usage/v7/checkbox/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/checkbox/basic/angular/example_component_ts.md rename static/usage/v7/checkbox/indeterminate/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/checkbox/indeterminate/angular/example_component_ts.md rename static/usage/v7/checkbox/justify/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/checkbox/justify/angular/example_component_ts.md rename static/usage/v7/checkbox/label-link/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/checkbox/label-link/angular/example_component_ts.md rename static/usage/v7/checkbox/label-placement/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/checkbox/label-placement/angular/example_component_ts.md create mode 100644 static/usage/v7/checkbox/theming/css-properties/angular/example_component_ts.md rename static/usage/v7/chip/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/chip/basic/angular/example_component_ts.md rename static/usage/v7/chip/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/chip/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v7/chip/theming/css-properties/angular/example_component_ts.md rename static/usage/v7/content/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/content/basic/angular/example_component_ts.md delete mode 100644 static/usage/v7/content/fixed/angular.md create mode 100644 static/usage/v7/content/fixed/angular/example_component_ts.md delete mode 100644 static/usage/v7/content/fixed/react.md create mode 100644 static/usage/v7/content/fullscreen/angular/example_component_ts.md rename static/usage/v7/content/header-footer/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/content/header-footer/angular/example_component_ts.md rename static/usage/v7/content/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/content/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v7/content/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v7/content/theming/css-shadow-parts/angular/example_component_ts.md create mode 100644 static/usage/v7/content/theming/safe-area/angular/example_component_ts.md rename static/usage/v7/datetime-button/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime-button/basic/angular/example_component_ts.md rename static/usage/v7/datetime-button/format-options/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime-button/format-options/angular/example_component_ts.md rename static/usage/v7/datetime/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime/basic/angular/example_component_ts.md rename static/usage/v7/datetime/buttons/customizing-button-texts/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime/buttons/customizing-button-texts/angular/example_component_ts.md rename static/usage/v7/datetime/buttons/customizing-buttons/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime/buttons/customizing-buttons/angular/example_component_ts.md rename static/usage/v7/datetime/buttons/showing-confirmation-buttons/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md rename static/usage/v7/datetime/date-constraints/max-min/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime/date-constraints/max-min/angular/example_component_ts.md rename static/usage/v7/datetime/date-constraints/values/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime/date-constraints/values/angular/example_component_ts.md rename static/usage/v7/datetime/format-options/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime/format-options/angular/example_component_ts.md rename static/usage/v7/datetime/localization/custom-locale/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime/localization/custom-locale/angular/example_component_ts.md rename static/usage/v7/datetime/localization/first-day-of-week/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime/localization/first-day-of-week/angular/example_component_ts.md rename static/usage/v7/datetime/localization/hour-cycle/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime/localization/hour-cycle/angular/example_component_ts.md rename static/usage/v7/datetime/localization/locale-extension-tags/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime/localization/locale-extension-tags/angular/example_component_ts.md rename static/usage/v7/datetime/localization/time-label/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime/localization/time-label/angular/example_component_ts.md rename static/usage/v7/datetime/multiple/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime/multiple/angular/example_component_ts.md rename static/usage/v7/datetime/presentation/date/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime/presentation/date/angular/example_component_ts.md rename static/usage/v7/datetime/presentation/month-and-year/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime/presentation/month-and-year/angular/example_component_ts.md rename static/usage/v7/datetime/presentation/time/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime/presentation/time/angular/example_component_ts.md rename static/usage/v7/datetime/presentation/wheel/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime/presentation/wheel/angular/example_component_ts.md create mode 100644 static/usage/v7/datetime/styling/global-theming/angular/example_component_ts.md rename static/usage/v7/datetime/title/customizing-title/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime/title/customizing-title/angular/example_component_ts.md rename static/usage/v7/datetime/title/showing-default-title/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/datetime/title/showing-default-title/angular/example_component_ts.md rename static/usage/v7/footer/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/footer/basic/angular/example_component_ts.md create mode 100644 static/usage/v7/footer/custom-scroll-target/angular/example_component_ts.md rename static/usage/v7/footer/fade/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/footer/fade/angular/example_component_ts.md rename static/usage/v7/footer/no-border/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/footer/no-border/angular/example_component_ts.md rename static/usage/v7/footer/translucent/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/footer/translucent/angular/example_component_ts.md create mode 100644 static/usage/v7/grid/basic/angular/example_component_ts.md create mode 100644 static/usage/v7/grid/customizing/column-number/angular/example_component_ts.md create mode 100644 static/usage/v7/grid/customizing/padding/angular/example_component_ts.md create mode 100644 static/usage/v7/grid/customizing/width/angular/example_component_ts.md create mode 100644 static/usage/v7/grid/fixed/angular/example_component_ts.md create mode 100644 static/usage/v7/grid/horizontal-alignment/angular/example_component_ts.md create mode 100644 static/usage/v7/grid/offset-responsive/angular/example_component_ts.md create mode 100644 static/usage/v7/grid/offset/angular/example_component_ts.md create mode 100644 static/usage/v7/grid/push-pull-responsive/angular/example_component_ts.md create mode 100644 static/usage/v7/grid/push-pull/angular/example_component_ts.md create mode 100644 static/usage/v7/grid/size-auto/angular/example_component_ts.md create mode 100644 static/usage/v7/grid/size-responsive/angular/example_component_ts.md create mode 100644 static/usage/v7/grid/size/angular/example_component_ts.md create mode 100644 static/usage/v7/grid/vertical-alignment/angular/example_component_ts.md rename static/usage/v7/header/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/header/basic/angular/example_component_ts.md rename static/usage/v7/header/condense/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/header/condense/angular/example_component_ts.md create mode 100644 static/usage/v7/header/custom-scroll-target/angular/example_component_ts.md rename static/usage/v7/header/fade/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/header/fade/angular/example_component_ts.md rename static/usage/v7/header/no-border/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/header/no-border/angular/example_component_ts.md rename static/usage/v7/header/translucent/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/header/translucent/angular/example_component_ts.md rename static/usage/v7/img/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/img/basic/angular/example_component_ts.md rename static/usage/v7/input/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/input/basic/angular/example_component_ts.md rename static/usage/v7/input/clear/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/input/clear/angular/example_component_ts.md rename static/usage/v7/input/counter-alignment/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/input/counter-alignment/angular/example_component_ts.md rename static/usage/v7/input/fill/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/input/fill/angular/example_component_ts.md rename static/usage/v7/input/helper-error/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/input/helper-error/angular/example_component_ts.md rename static/usage/v7/input/label-placement/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/input/label-placement/angular/example_component_ts.md rename static/usage/v7/input/label-slot/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/input/label-slot/angular/example_component_ts.md delete mode 100644 static/usage/v7/input/mask/angular/app_module_ts.md rename static/usage/v7/input/no-visible-label/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/input/no-visible-label/angular/example_component_ts.md rename static/usage/v7/input/set-focus/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/input/set-focus/angular/example_component_ts.md rename static/usage/v7/input/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/input/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v7/input/theming/css-properties/angular/example_component_ts.md rename static/usage/v7/input/types/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/input/types/angular/example_component_ts.md rename static/usage/v7/item-divider/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/item-divider/basic/angular/example_component_ts.md rename static/usage/v7/item-divider/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/item-divider/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v7/item-divider/theming/css-properties/angular/example_component_ts.md rename static/usage/v7/item-group/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/item-group/basic/angular/example_component_ts.md rename static/usage/v7/item-group/sliding-items/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/item-group/sliding-items/angular/example_component_ts.md rename static/usage/v7/item-sliding/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/item-sliding/basic/angular/example_component_ts.md rename static/usage/v7/item-sliding/expandable/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/item-sliding/expandable/angular/example_component_ts.md rename static/usage/v7/item/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/item/basic/angular/example_component_ts.md rename static/usage/v7/item/clickable/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/item/clickable/angular/example_component_ts.md rename static/usage/v7/item/content-types/controls/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/item/content-types/controls/angular/example_component_ts.md create mode 100644 static/usage/v7/item/content-types/text/angular/example_component_ts.md rename static/usage/v7/item/detail-arrows/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/item/detail-arrows/angular/example_component_ts.md rename static/usage/v7/item/inputs/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/item/inputs/angular/example_component_ts.md rename static/usage/v7/item/media/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/item/media/angular/example_component_ts.md rename static/usage/v7/item/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/item/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v7/item/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v7/item/theming/css-shadow-parts/angular/example_component_ts.md create mode 100644 static/usage/v7/item/theming/input-highlight/angular/example_component_ts.md rename static/usage/v7/keyboard/enterkeyhint/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/keyboard/enterkeyhint/angular/example_component_ts.md rename static/usage/v7/keyboard/inputmode/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/keyboard/inputmode/angular/example_component_ts.md rename static/usage/v7/label/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/label/basic/angular/example_component_ts.md rename static/usage/v7/label/input/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/label/input/angular/example_component_ts.md rename static/usage/v7/label/item/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/label/item/angular/example_component_ts.md rename static/usage/v7/label/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/label/theming/colors/angular/example_component_ts.md rename static/usage/v7/list-header/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/list-header/basic/angular/example_component_ts.md rename static/usage/v7/list-header/buttons/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/list-header/buttons/angular/example_component_ts.md rename static/usage/v7/list-header/lines/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/list-header/lines/angular/example_component_ts.md rename static/usage/v7/list-header/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/list-header/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v7/list-header/theming/css-properties/angular/example_component_ts.md rename static/usage/v7/list/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/list/basic/angular/example_component_ts.md rename static/usage/v7/list/inset/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/list/inset/angular/example_component_ts.md rename static/usage/v7/list/lines/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/list/lines/angular/example_component_ts.md rename static/usage/v7/loading/inline/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/loading/inline/angular/example_component_ts.md rename static/usage/v7/loading/spinners/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/loading/spinners/angular/example_component_ts.md create mode 100644 static/usage/v7/loading/theming/angular/example_component_ts.md rename static/usage/v7/menu/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/menu/basic/angular/example_component_ts.md rename static/usage/v7/menu/sides/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/menu/sides/angular/example_component_ts.md create mode 100644 static/usage/v7/menu/theming/angular/example_component_ts.md rename static/usage/v7/menu/toggle/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/menu/toggle/angular/example_component_ts.md delete mode 100644 static/usage/v7/modal/can-dismiss/child-state/angular/app_module_ts.md delete mode 100644 static/usage/v7/modal/controller/angular/app_module_ts.md rename static/usage/v7/modal/performance/mount/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/modal/performance/mount/angular/example_component_ts.md create mode 100644 static/usage/v7/modal/sheet/auto-height/angular/example_component_ts.md rename static/usage/v7/modal/sheet/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/modal/sheet/basic/angular/example_component_ts.md rename static/usage/v7/modal/sheet/handle-behavior/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/modal/sheet/handle-behavior/angular/example_component_ts.md create mode 100644 static/usage/v7/modal/styling/theming/angular/example_component_ts.md delete mode 100644 static/usage/v7/nav/modal-navigation/angular/app_module_ts.md delete mode 100644 static/usage/v7/nav/nav-link/angular/app_module_ts.md rename static/usage/v7/note/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/note/basic/angular/example_component_ts.md rename static/usage/v7/note/item/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/note/item/angular/example_component_ts.md rename static/usage/v7/note/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/note/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v7/note/theming/css-properties/angular/example_component_ts.md rename static/usage/v7/popover/customization/sizing/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/popover/customization/sizing/angular/example_component_ts.md create mode 100644 static/usage/v7/popover/customization/styling/angular/example_component_ts.md rename static/usage/v7/popover/nested/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/popover/nested/angular/example_component_ts.md rename static/usage/v7/popover/performance/mount/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/popover/performance/mount/angular/example_component_ts.md delete mode 100644 static/usage/v7/popover/presenting/controller/angular/app_module_ts.md rename static/usage/v7/popover/presenting/inline-trigger/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/popover/presenting/inline-trigger/angular/example_component_ts.md rename static/usage/v7/progress-bar/indeterminate/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/progress-bar/indeterminate/angular/example_component_ts.md rename static/usage/v7/progress-bar/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/progress-bar/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v7/progress-bar/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_ts.md rename static/usage/v7/radio/alignment/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/radio/alignment/angular/example_component_ts.md rename static/usage/v7/radio/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/radio/basic/angular/example_component_ts.md rename static/usage/v7/radio/empty-selection/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/radio/empty-selection/angular/example_component_ts.md rename static/usage/v7/radio/justify/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/radio/justify/angular/example_component_ts.md rename static/usage/v7/radio/label-placement/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/radio/label-placement/angular/example_component_ts.md rename static/usage/v7/radio/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/radio/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v7/radio/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v7/radio/theming/css-shadow-parts/angular/example_component_ts.md rename static/usage/v7/range/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/range/basic/angular/example_component_ts.md rename static/usage/v7/range/dual-knobs/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/range/dual-knobs/angular/example_component_ts.md rename static/usage/v7/range/label-slot/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/range/label-slot/angular/example_component_ts.md rename static/usage/v7/range/labels/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/range/labels/angular/example_component_ts.md rename static/usage/v7/range/no-visible-label/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/range/no-visible-label/angular/example_component_ts.md rename static/usage/v7/range/snapping-ticks/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/range/snapping-ticks/angular/example_component_ts.md create mode 100644 static/usage/v7/range/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v7/range/theming/css-shadow-parts/angular/example_component_ts.md create mode 100644 static/usage/v7/ripple-effect/basic/angular/example_component_ts.md create mode 100644 static/usage/v7/ripple-effect/customizing/angular/example_component_ts.md create mode 100644 static/usage/v7/ripple-effect/type/angular/example_component_ts.md rename static/usage/v7/searchbar/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/searchbar/basic/angular/example_component_ts.md rename static/usage/v7/searchbar/cancel-button/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/searchbar/cancel-button/angular/example_component_ts.md rename static/usage/v7/searchbar/clear-button/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/searchbar/clear-button/angular/example_component_ts.md rename static/usage/v7/searchbar/search-icon/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/searchbar/search-icon/angular/example_component_ts.md rename static/usage/v7/searchbar/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/searchbar/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v7/searchbar/theming/css-properties/angular/example_component_ts.md rename static/usage/v7/segment-button/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/segment-button/basic/angular/example_component_ts.md create mode 100644 static/usage/v7/segment-button/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v7/segment-button/theming/css-shadow-parts/angular/example_component_ts.md rename static/usage/v7/segment/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/segment/basic/angular/example_component_ts.md rename static/usage/v7/segment/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/segment/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v7/segment/theming/css-properties/angular/example_component_ts.md rename static/usage/v7/select/basic/multiple-selection/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/select/basic/multiple-selection/angular/example_component_ts.md rename static/usage/v7/select/basic/single-selection/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/select/basic/single-selection/angular/example_component_ts.md rename static/usage/v7/select/customization/button-text/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/select/customization/button-text/angular/example_component_ts.md rename static/usage/v7/select/customization/custom-toggle-icons/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/angular/example_component_ts.md rename static/usage/v7/select/fill/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/select/fill/angular/example_component_ts.md rename static/usage/v7/select/interfaces/action-sheet/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/select/interfaces/action-sheet/angular/example_component_ts.md rename static/usage/v7/select/interfaces/popover/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/select/interfaces/popover/angular/example_component_ts.md rename static/usage/v7/select/justify/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/select/justify/angular/example_component_ts.md rename static/usage/v7/select/label-placement/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/select/label-placement/angular/example_component_ts.md rename static/usage/v7/select/label-slot/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/select/label-slot/angular/example_component_ts.md rename static/usage/v7/select/no-visible-label/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/select/no-visible-label/angular/example_component_ts.md delete mode 100644 static/usage/v7/select/typeahead/angular/app_module_ts.md rename static/usage/v7/select/typeahead/angular/{modal-example_component_html.md => typeahead_component_html.md} (90%) rename static/usage/{v8/select/typeahead/angular/modal-example_component_ts.md => v7/select/typeahead/angular/typeahead_component_ts.md} (67%) create mode 100644 static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_ts.md rename static/usage/v7/spinner/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/spinner/basic/angular/example_component_ts.md rename static/usage/v7/spinner/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/spinner/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v7/spinner/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v7/spinner/theming/resizing/angular/example_component_ts.md rename static/usage/v7/split-pane/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/split-pane/basic/angular/example_component_ts.md create mode 100644 static/usage/v7/split-pane/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v7/tabs/router/angular/app_component_ts.md delete mode 100644 static/usage/v7/tabs/router/angular/app_module_ts.md create mode 100644 static/usage/v7/tabs/router/angular/app_routes_ts.md delete mode 100644 static/usage/v7/tabs/router/angular/app_routing_module_ts.md delete mode 100644 static/usage/v7/tabs/router/angular/home_page_module_ts.md delete mode 100644 static/usage/v7/tabs/router/angular/library_page_module_ts.md delete mode 100644 static/usage/v7/tabs/router/angular/radio_page_module_ts.md delete mode 100644 static/usage/v7/tabs/router/angular/search_page_module_ts.md rename static/usage/v7/textarea/autogrow/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/textarea/autogrow/angular/example_component_ts.md rename static/usage/v7/textarea/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/textarea/basic/angular/example_component_ts.md rename static/usage/v7/textarea/clear-on-edit/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/textarea/clear-on-edit/angular/example_component_ts.md rename static/usage/v7/textarea/fill/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/textarea/fill/angular/example_component_ts.md rename static/usage/v7/textarea/helper-error/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/textarea/helper-error/angular/example_component_ts.md rename static/usage/v7/textarea/label-placement/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/textarea/label-placement/angular/example_component_ts.md rename static/usage/v7/textarea/label-slot/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/textarea/label-slot/angular/example_component_ts.md rename static/usage/v7/textarea/no-visible-label/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/textarea/no-visible-label/angular/example_component_ts.md create mode 100644 static/usage/v7/textarea/theming/angular/example_component_ts.md rename static/usage/v7/thumbnail/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/thumbnail/basic/angular/example_component_ts.md rename static/usage/v7/thumbnail/item/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/thumbnail/item/angular/example_component_ts.md create mode 100644 static/usage/v7/thumbnail/theming/css-properties/angular/example_component_ts.md rename static/usage/v7/title/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/title/basic/angular/example_component_ts.md rename static/usage/v7/title/collapsible-large-title/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/title/collapsible-large-title/basic/angular/example_component_ts.md rename static/usage/v7/title/collapsible-large-title/buttons/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/title/collapsible-large-title/buttons/angular/example_component_ts.md create mode 100644 static/usage/v7/title/theming/css-properties/angular/example_component_ts.md rename static/usage/v7/toast/icon/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/toast/icon/angular/example_component_ts.md rename static/usage/v7/toast/inline/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/toast/inline/basic/angular/example_component_ts.md rename static/usage/v7/toast/position-anchor/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/toast/position-anchor/angular/example_component_ts.md rename static/usage/v7/toast/swipe-gesture/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/toast/swipe-gesture/angular/example_component_ts.md rename static/usage/v7/toggle/alignment/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/toggle/alignment/angular/example_component_ts.md rename static/usage/v7/toggle/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/toggle/basic/angular/example_component_ts.md rename static/usage/v7/toggle/justify/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/toggle/justify/angular/example_component_ts.md rename static/usage/v7/toggle/label-placement/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/toggle/label-placement/angular/example_component_ts.md rename static/usage/v7/toggle/list/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/toggle/list/angular/example_component_ts.md rename static/usage/v7/toggle/on-off/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/toggle/on-off/angular/example_component_ts.md rename static/usage/v7/toggle/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/toggle/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v7/toggle/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_ts.md rename static/usage/v7/toolbar/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/toolbar/basic/angular/example_component_ts.md rename static/usage/v7/toolbar/progress-bars/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/toolbar/progress-bars/angular/example_component_ts.md rename static/usage/v7/toolbar/searchbars/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/toolbar/searchbars/angular/example_component_ts.md rename static/usage/v7/toolbar/segments/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/toolbar/segments/angular/example_component_ts.md rename static/usage/v7/toolbar/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v7/toolbar/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v7/toolbar/theming/css-properties/angular/example_component_ts.md rename static/usage/v8/accordion/accessibility/animations/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/accordion/accessibility/animations/angular/example_component_ts.md rename static/usage/v8/accordion/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/accordion/basic/angular/example_component_ts.md rename static/usage/v8/accordion/customization/expansion-styles/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/accordion/customization/expansion-styles/angular/example_component_ts.md rename static/usage/v8/accordion/customization/icons/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/accordion/customization/icons/angular/example_component_ts.md create mode 100644 static/usage/v8/accordion/customization/theming/angular/example_component_ts.md delete mode 100644 static/usage/v8/accordion/disable-group/angular.md delete mode 100644 static/usage/v8/accordion/disable-group/demo.html delete mode 100644 static/usage/v8/accordion/disable-group/index.md delete mode 100644 static/usage/v8/accordion/disable-group/javascript.md delete mode 100644 static/usage/v8/accordion/disable-group/react.md delete mode 100644 static/usage/v8/accordion/disable-group/vue.md delete mode 100644 static/usage/v8/accordion/disable/group/angular.md rename static/usage/{v7/accordion/disable/group/angular.md => v8/accordion/disable/group/angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/accordion/disable/group/angular/example_component_ts.md rename static/usage/v8/accordion/disable/individual/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/accordion/disable/individual/angular/example_component_ts.md rename static/usage/v8/accordion/multiple/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/accordion/multiple/angular/example_component_ts.md rename static/usage/v8/accordion/readonly/group/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/accordion/readonly/group/angular/example_component_ts.md rename static/usage/v8/accordion/readonly/individual/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/accordion/readonly/individual/angular/example_component_ts.md rename static/usage/v8/avatar/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/avatar/basic/angular/example_component_ts.md rename static/usage/v8/avatar/chip/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/avatar/chip/angular/example_component_ts.md rename static/usage/v8/avatar/item/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/avatar/item/angular/example_component_ts.md create mode 100644 static/usage/v8/avatar/theming/css-properties/angular/example_component_ts.md delete mode 100644 static/usage/v8/back-button/basic/angular/app_module_ts.md delete mode 100644 static/usage/v8/back-button/custom/angular/app_module_ts.md create mode 100644 static/usage/v8/backdrop/basic/angular/example_component_ts.md create mode 100644 static/usage/v8/backdrop/styling/angular/example_component_ts.md rename static/usage/v8/badge/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/badge/basic/angular/example_component_ts.md rename static/usage/v8/badge/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/badge/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/badge/theming/css-properties/angular/example_component_ts.md rename static/usage/v8/breadcrumbs/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/breadcrumbs/basic/angular/example_component_ts.md rename static/usage/v8/breadcrumbs/collapsing-items/items-before-after/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular/example_component_ts.md rename static/usage/v8/breadcrumbs/collapsing-items/max-items/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/max-items/angular/example_component_ts.md rename static/usage/v8/breadcrumbs/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/breadcrumbs/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_ts.md rename static/usage/v8/button/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/button/basic/angular/example_component_ts.md rename static/usage/v8/button/expand/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/button/expand/angular/example_component_ts.md rename static/usage/v8/button/fill/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/button/fill/angular/example_component_ts.md rename static/usage/v8/button/size/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/button/size/angular/example_component_ts.md rename static/usage/v8/button/text-wrapping/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/button/text-wrapping/angular/example_component_ts.md rename static/usage/v8/button/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/button/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/button/theming/css-properties/angular/example_component_ts.md rename static/usage/v8/buttons/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/buttons/basic/angular/example_component_ts.md rename static/usage/v8/buttons/placement/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/buttons/placement/angular/example_component_ts.md rename static/usage/v8/card/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/card/basic/angular/example_component_ts.md rename static/usage/v8/card/buttons/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/card/buttons/angular/example_component_ts.md create mode 100644 static/usage/v8/card/list/angular/example_component_ts.md rename static/usage/v8/card/media/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/card/media/angular/example_component_ts.md rename static/usage/v8/card/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/card/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/card/theming/css-properties/angular/example_component_ts.md rename static/usage/v8/checkbox/alignment/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/checkbox/alignment/angular/example_component_ts.md rename static/usage/v8/checkbox/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/checkbox/basic/angular/example_component_ts.md rename static/usage/v8/checkbox/indeterminate/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/checkbox/indeterminate/angular/example_component_ts.md rename static/usage/v8/checkbox/justify/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/checkbox/justify/angular/example_component_ts.md rename static/usage/v8/checkbox/label-link/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/checkbox/label-link/angular/example_component_ts.md rename static/usage/v8/checkbox/label-placement/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/checkbox/label-placement/angular/example_component_ts.md create mode 100644 static/usage/v8/checkbox/theming/css-properties/angular/example_component_ts.md rename static/usage/v8/chip/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/chip/basic/angular/example_component_ts.md rename static/usage/v8/chip/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/chip/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/chip/theming/css-properties/angular/example_component_ts.md rename static/usage/v8/content/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/content/basic/angular/example_component_ts.md delete mode 100644 static/usage/v8/content/fixed/angular.md create mode 100644 static/usage/v8/content/fixed/angular/example_component_ts.md delete mode 100644 static/usage/v8/content/fixed/react.md create mode 100644 static/usage/v8/content/fullscreen/angular/example_component_ts.md rename static/usage/v8/content/header-footer/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/content/header-footer/angular/example_component_ts.md rename static/usage/v8/content/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/content/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/content/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v8/content/theming/css-shadow-parts/angular/example_component_ts.md create mode 100644 static/usage/v8/content/theming/safe-area/angular/example_component_ts.md rename static/usage/v8/datetime-button/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime-button/basic/angular/example_component_ts.md rename static/usage/v8/datetime-button/format-options/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime-button/format-options/angular/example_component_ts.md rename static/usage/v8/datetime/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime/basic/angular/example_component_ts.md rename static/usage/v8/datetime/buttons/customizing-button-texts/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime/buttons/customizing-button-texts/angular/example_component_ts.md rename static/usage/v8/datetime/buttons/customizing-buttons/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime/buttons/customizing-buttons/angular/example_component_ts.md rename static/usage/v8/datetime/buttons/showing-confirmation-buttons/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md rename static/usage/v8/datetime/date-constraints/max-min/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime/date-constraints/max-min/angular/example_component_ts.md rename static/usage/v8/datetime/date-constraints/values/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime/date-constraints/values/angular/example_component_ts.md rename static/usage/v8/datetime/format-options/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime/format-options/angular/example_component_ts.md rename static/usage/v8/datetime/localization/custom-locale/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime/localization/custom-locale/angular/example_component_ts.md rename static/usage/v8/datetime/localization/first-day-of-week/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime/localization/first-day-of-week/angular/example_component_ts.md rename static/usage/v8/datetime/localization/hour-cycle/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime/localization/hour-cycle/angular/example_component_ts.md rename static/usage/v8/datetime/localization/locale-extension-tags/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime/localization/locale-extension-tags/angular/example_component_ts.md rename static/usage/v8/datetime/localization/time-label/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime/localization/time-label/angular/example_component_ts.md rename static/usage/v8/datetime/multiple/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime/multiple/angular/example_component_ts.md rename static/usage/v8/datetime/presentation/date/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime/presentation/date/angular/example_component_ts.md rename static/usage/v8/datetime/presentation/month-and-year/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime/presentation/month-and-year/angular/example_component_ts.md rename static/usage/v8/datetime/presentation/time/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime/presentation/time/angular/example_component_ts.md rename static/usage/v8/datetime/presentation/wheel/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime/presentation/wheel/angular/example_component_ts.md create mode 100644 static/usage/v8/datetime/styling/global-theming/angular/example_component_ts.md rename static/usage/v8/datetime/title/customizing-title/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime/title/customizing-title/angular/example_component_ts.md rename static/usage/v8/datetime/title/showing-default-title/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/datetime/title/showing-default-title/angular/example_component_ts.md rename static/usage/v8/footer/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/footer/basic/angular/example_component_ts.md create mode 100644 static/usage/v8/footer/custom-scroll-target/angular/example_component_ts.md rename static/usage/v8/footer/fade/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/footer/fade/angular/example_component_ts.md rename static/usage/v8/footer/no-border/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/footer/no-border/angular/example_component_ts.md rename static/usage/v8/footer/translucent/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/footer/translucent/angular/example_component_ts.md create mode 100644 static/usage/v8/grid/basic/angular/example_component_ts.md create mode 100644 static/usage/v8/grid/customizing/column-number/angular/example_component_ts.md create mode 100644 static/usage/v8/grid/customizing/padding/angular/example_component_ts.md create mode 100644 static/usage/v8/grid/customizing/width/angular/example_component_ts.md create mode 100644 static/usage/v8/grid/fixed/angular/example_component_ts.md create mode 100644 static/usage/v8/grid/horizontal-alignment/angular/example_component_ts.md create mode 100644 static/usage/v8/grid/offset-responsive/angular/example_component_ts.md create mode 100644 static/usage/v8/grid/offset/angular/example_component_ts.md create mode 100644 static/usage/v8/grid/push-pull-responsive/angular/example_component_ts.md create mode 100644 static/usage/v8/grid/push-pull/angular/example_component_ts.md create mode 100644 static/usage/v8/grid/size-auto/angular/example_component_ts.md create mode 100644 static/usage/v8/grid/size-responsive/angular/example_component_ts.md create mode 100644 static/usage/v8/grid/size/angular/example_component_ts.md create mode 100644 static/usage/v8/grid/vertical-alignment/angular/example_component_ts.md rename static/usage/v8/header/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/header/basic/angular/example_component_ts.md rename static/usage/v8/header/condense/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/header/condense/angular/example_component_ts.md create mode 100644 static/usage/v8/header/custom-scroll-target/angular/example_component_ts.md rename static/usage/v8/header/fade/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/header/fade/angular/example_component_ts.md rename static/usage/v8/header/no-border/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/header/no-border/angular/example_component_ts.md rename static/usage/v8/header/translucent/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/header/translucent/angular/example_component_ts.md delete mode 100644 static/usage/v8/icon/basic/angular.md rename static/usage/v8/img/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/img/basic/angular/example_component_ts.md rename static/usage/v8/input-password-toggle/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/input-password-toggle/basic/angular/example_component_ts.md rename static/usage/v8/input/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/input/basic/angular/example_component_ts.md rename static/usage/v8/input/clear/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/input/clear/angular/example_component_ts.md rename static/usage/v8/input/counter-alignment/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/input/counter-alignment/angular/example_component_ts.md rename static/usage/v8/input/fill/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/input/fill/angular/example_component_ts.md rename static/usage/v8/input/helper-error/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/input/helper-error/angular/example_component_ts.md rename static/usage/v8/input/label-placement/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/input/label-placement/angular/example_component_ts.md rename static/usage/v8/input/label-slot/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/input/label-slot/angular/example_component_ts.md delete mode 100644 static/usage/v8/input/mask/angular/app_module_ts.md rename static/usage/v8/input/no-visible-label/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/input/no-visible-label/angular/example_component_ts.md rename static/usage/v8/input/set-focus/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/input/set-focus/angular/example_component_ts.md rename static/usage/v8/input/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/input/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/input/theming/css-properties/angular/example_component_ts.md rename static/usage/v8/input/types/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/input/types/angular/example_component_ts.md rename static/usage/v8/item-divider/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/item-divider/basic/angular/example_component_ts.md rename static/usage/v8/item-divider/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/item-divider/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/item-divider/theming/css-properties/angular/example_component_ts.md rename static/usage/v8/item-group/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/item-group/basic/angular/example_component_ts.md rename static/usage/v8/item-group/sliding-items/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/item-group/sliding-items/angular/example_component_ts.md rename static/usage/v8/item-sliding/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/item-sliding/basic/angular/example_component_ts.md rename static/usage/v8/item-sliding/expandable/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/item-sliding/expandable/angular/example_component_ts.md rename static/usage/v8/item/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/item/basic/angular/example_component_ts.md rename static/usage/v8/item/clickable/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/item/clickable/angular/example_component_ts.md rename static/usage/v8/item/content-types/controls/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/item/content-types/controls/angular/example_component_ts.md create mode 100644 static/usage/v8/item/content-types/text/angular/example_component_ts.md rename static/usage/v8/item/detail-arrows/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/item/detail-arrows/angular/example_component_ts.md rename static/usage/v8/item/inputs/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/item/inputs/angular/example_component_ts.md rename static/usage/v8/item/media/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/item/media/angular/example_component_ts.md rename static/usage/v8/item/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/item/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/item/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v8/item/theming/css-shadow-parts/angular/example_component_ts.md create mode 100644 static/usage/v8/item/theming/input-highlight/angular/example_component_ts.md rename static/usage/v8/keyboard/enterkeyhint/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/keyboard/enterkeyhint/angular/example_component_ts.md rename static/usage/v8/keyboard/inputmode/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/keyboard/inputmode/angular/example_component_ts.md rename static/usage/v8/label/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/label/basic/angular/example_component_ts.md rename static/usage/v8/label/input/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/label/input/angular/example_component_ts.md rename static/usage/v8/label/item/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/label/item/angular/example_component_ts.md rename static/usage/v8/label/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/label/theming/colors/angular/example_component_ts.md rename static/usage/v8/list-header/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/list-header/basic/angular/example_component_ts.md rename static/usage/v8/list-header/buttons/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/list-header/buttons/angular/example_component_ts.md rename static/usage/v8/list-header/lines/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/list-header/lines/angular/example_component_ts.md rename static/usage/v8/list-header/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/list-header/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/list-header/theming/css-properties/angular/example_component_ts.md rename static/usage/v8/list/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/list/basic/angular/example_component_ts.md rename static/usage/v8/list/inset/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/list/inset/angular/example_component_ts.md rename static/usage/v8/list/lines/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/list/lines/angular/example_component_ts.md rename static/usage/v8/loading/inline/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/loading/inline/angular/example_component_ts.md rename static/usage/v8/loading/spinners/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/loading/spinners/angular/example_component_ts.md create mode 100644 static/usage/v8/loading/theming/angular/example_component_ts.md rename static/usage/v8/menu/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/menu/basic/angular/example_component_ts.md rename static/usage/v8/menu/sides/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/menu/sides/angular/example_component_ts.md create mode 100644 static/usage/v8/menu/theming/angular/example_component_ts.md rename static/usage/v8/menu/toggle/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/menu/toggle/angular/example_component_ts.md delete mode 100644 static/usage/v8/modal/can-dismiss/child-state/angular/app_module_ts.md delete mode 100644 static/usage/v8/modal/controller/angular/app_module_ts.md rename static/usage/v8/modal/performance/mount/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/modal/performance/mount/angular/example_component_ts.md create mode 100644 static/usage/v8/modal/sheet/auto-height/angular/example_component_ts.md rename static/usage/v8/modal/sheet/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/modal/sheet/basic/angular/example_component_ts.md rename static/usage/v8/modal/sheet/handle-behavior/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/modal/sheet/handle-behavior/angular/example_component_ts.md create mode 100644 static/usage/v8/modal/styling/theming/angular/example_component_ts.md delete mode 100644 static/usage/v8/nav/modal-navigation/angular/app_module_ts.md delete mode 100644 static/usage/v8/nav/nav-link/angular/app_module_ts.md rename static/usage/v8/note/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/note/basic/angular/example_component_ts.md rename static/usage/v8/note/item/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/note/item/angular/example_component_ts.md rename static/usage/v8/note/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/note/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/note/theming/css-properties/angular/example_component_ts.md rename static/usage/v8/picker/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/picker/basic/angular/example_component_ts.md rename static/usage/v8/picker/prefix-suffix/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/picker/prefix-suffix/angular/example_component_ts.md create mode 100644 static/usage/v8/picker/theming/css-properties/angular/example_component_ts.md rename static/usage/v8/popover/customization/sizing/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/popover/customization/sizing/angular/example_component_ts.md create mode 100644 static/usage/v8/popover/customization/styling/angular/example_component_ts.md rename static/usage/v8/popover/nested/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/popover/nested/angular/example_component_ts.md rename static/usage/v8/popover/performance/mount/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/popover/performance/mount/angular/example_component_ts.md delete mode 100644 static/usage/v8/popover/presenting/controller/angular/app_module_ts.md rename static/usage/v8/popover/presenting/inline-trigger/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/popover/presenting/inline-trigger/angular/example_component_ts.md rename static/usage/v8/progress-bar/indeterminate/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/progress-bar/indeterminate/angular/example_component_ts.md rename static/usage/v8/progress-bar/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/progress-bar/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/progress-bar/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v8/progress-bar/theming/css-shadow-parts/angular/example_component_ts.md rename static/usage/v8/radio/alignment/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/radio/alignment/angular/example_component_ts.md rename static/usage/v8/radio/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/radio/basic/angular/example_component_ts.md rename static/usage/v8/radio/empty-selection/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/radio/empty-selection/angular/example_component_ts.md rename static/usage/v8/radio/justify/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/radio/justify/angular/example_component_ts.md rename static/usage/v8/radio/label-placement/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/radio/label-placement/angular/example_component_ts.md rename static/usage/v8/radio/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/radio/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/radio/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v8/radio/theming/css-shadow-parts/angular/example_component_ts.md rename static/usage/v8/range/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/range/basic/angular/example_component_ts.md rename static/usage/v8/range/dual-knobs/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/range/dual-knobs/angular/example_component_ts.md rename static/usage/v8/range/label-slot/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/range/label-slot/angular/example_component_ts.md rename static/usage/v8/range/labels/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/range/labels/angular/example_component_ts.md rename static/usage/v8/range/no-visible-label/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/range/no-visible-label/angular/example_component_ts.md rename static/usage/v8/range/snapping-ticks/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/range/snapping-ticks/angular/example_component_ts.md create mode 100644 static/usage/v8/range/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v8/range/theming/css-shadow-parts/angular/example_component_ts.md create mode 100644 static/usage/v8/ripple-effect/basic/angular/example_component_ts.md create mode 100644 static/usage/v8/ripple-effect/customizing/angular/example_component_ts.md create mode 100644 static/usage/v8/ripple-effect/type/angular/example_component_ts.md rename static/usage/v8/searchbar/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/searchbar/basic/angular/example_component_ts.md rename static/usage/v8/searchbar/cancel-button/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/searchbar/cancel-button/angular/example_component_ts.md rename static/usage/v8/searchbar/clear-button/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/searchbar/clear-button/angular/example_component_ts.md rename static/usage/v8/searchbar/search-icon/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/searchbar/search-icon/angular/example_component_ts.md rename static/usage/v8/searchbar/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/searchbar/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/searchbar/theming/css-properties/angular/example_component_ts.md rename static/usage/v8/segment-button/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/segment-button/basic/angular/example_component_ts.md create mode 100644 static/usage/v8/segment-button/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v8/segment-button/theming/css-shadow-parts/angular/example_component_ts.md rename static/usage/v8/segment/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/segment/basic/angular/example_component_ts.md rename static/usage/v8/segment/swipeable/angular/{angular_css.md => example_component_css.md} (100%) rename static/usage/v8/segment/swipeable/angular/{angular_html.md => example_component_html.md} (100%) create mode 100644 static/usage/v8/segment/swipeable/angular/example_component_ts.md rename static/usage/v8/segment/swipeable/react/{react_css.md => main_css.md} (100%) rename static/usage/v8/segment/swipeable/react/{react_tsx.md => main_tsx.md} (100%) rename static/usage/v8/segment/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/segment/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/segment/theming/css-properties/angular/example_component_ts.md rename static/usage/v8/select/basic/multiple-selection/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/select/basic/multiple-selection/angular/example_component_ts.md rename static/usage/v8/select/basic/single-selection/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/select/basic/single-selection/angular/example_component_ts.md rename static/usage/v8/select/customization/button-text/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/select/customization/button-text/angular/example_component_ts.md rename static/usage/v8/select/customization/custom-toggle-icons/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/select/customization/custom-toggle-icons/angular/example_component_ts.md rename static/usage/v8/select/fill/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/select/fill/angular/example_component_ts.md rename static/usage/v8/select/interfaces/action-sheet/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/select/interfaces/action-sheet/angular/example_component_ts.md rename static/usage/v8/select/interfaces/modal/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/select/interfaces/modal/angular/example_component_ts.md rename static/usage/v8/select/interfaces/popover/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/select/interfaces/popover/angular/example_component_ts.md rename static/usage/v8/select/justify/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/select/justify/angular/example_component_ts.md rename static/usage/v8/select/label-placement/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/select/label-placement/angular/example_component_ts.md rename static/usage/v8/select/label-slot/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/select/label-slot/angular/example_component_ts.md rename static/usage/v8/select/no-visible-label/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/select/no-visible-label/angular/example_component_ts.md delete mode 100644 static/usage/v8/select/typeahead/angular/app_module_ts.md rename static/usage/v8/select/typeahead/angular/{modal-example_component_html.md => typeahead_component_html.md} (90%) rename static/usage/{v7/select/typeahead/angular/modal-example_component_ts.md => v8/select/typeahead/angular/typeahead_component_ts.md} (67%) create mode 100644 static/usage/v8/skeleton-text/theming/css-properties/angular/example_component_ts.md rename static/usage/v8/spinner/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/spinner/basic/angular/example_component_ts.md rename static/usage/v8/spinner/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/spinner/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/spinner/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v8/spinner/theming/resizing/angular/example_component_ts.md rename static/usage/v8/split-pane/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/split-pane/basic/angular/example_component_ts.md create mode 100644 static/usage/v8/split-pane/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v8/tabs/router/angular/app_component_ts.md delete mode 100644 static/usage/v8/tabs/router/angular/app_module_ts.md create mode 100644 static/usage/v8/tabs/router/angular/app_routes_ts.md delete mode 100644 static/usage/v8/tabs/router/angular/app_routing_module_ts.md delete mode 100644 static/usage/v8/tabs/router/angular/home_page_module_ts.md delete mode 100644 static/usage/v8/tabs/router/angular/library_page_module_ts.md delete mode 100644 static/usage/v8/tabs/router/angular/radio_page_module_ts.md delete mode 100644 static/usage/v8/tabs/router/angular/search_page_module_ts.md rename static/usage/v8/textarea/autogrow/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/textarea/autogrow/angular/example_component_ts.md rename static/usage/v8/textarea/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/textarea/basic/angular/example_component_ts.md rename static/usage/v8/textarea/clear-on-edit/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/textarea/clear-on-edit/angular/example_component_ts.md rename static/usage/v8/textarea/fill/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/textarea/fill/angular/example_component_ts.md rename static/usage/v8/textarea/helper-error/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/textarea/helper-error/angular/example_component_ts.md rename static/usage/v8/textarea/label-placement/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/textarea/label-placement/angular/example_component_ts.md rename static/usage/v8/textarea/label-slot/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/textarea/label-slot/angular/example_component_ts.md rename static/usage/v8/textarea/no-visible-label/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/textarea/no-visible-label/angular/example_component_ts.md create mode 100644 static/usage/v8/textarea/theming/angular/example_component_ts.md rename static/usage/v8/thumbnail/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/thumbnail/basic/angular/example_component_ts.md rename static/usage/v8/thumbnail/item/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/thumbnail/item/angular/example_component_ts.md create mode 100644 static/usage/v8/thumbnail/theming/css-properties/angular/example_component_ts.md rename static/usage/v8/title/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/title/basic/angular/example_component_ts.md rename static/usage/v8/title/collapsible-large-title/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/title/collapsible-large-title/basic/angular/example_component_ts.md rename static/usage/v8/title/collapsible-large-title/buttons/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/title/collapsible-large-title/buttons/angular/example_component_ts.md create mode 100644 static/usage/v8/title/theming/css-properties/angular/example_component_ts.md rename static/usage/v8/toast/icon/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/toast/icon/angular/example_component_ts.md rename static/usage/v8/toast/inline/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/toast/inline/basic/angular/example_component_ts.md rename static/usage/v8/toast/position-anchor/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/toast/position-anchor/angular/example_component_ts.md rename static/usage/v8/toast/swipe-gesture/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/toast/swipe-gesture/angular/example_component_ts.md rename static/usage/v8/toggle/alignment/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/toggle/alignment/angular/example_component_ts.md rename static/usage/v8/toggle/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/toggle/basic/angular/example_component_ts.md rename static/usage/v8/toggle/justify/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/toggle/justify/angular/example_component_ts.md rename static/usage/v8/toggle/label-placement/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/toggle/label-placement/angular/example_component_ts.md rename static/usage/v8/toggle/list/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/toggle/list/angular/example_component_ts.md rename static/usage/v8/toggle/on-off/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/toggle/on-off/angular/example_component_ts.md rename static/usage/v8/toggle/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/toggle/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/toggle/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v8/toggle/theming/css-shadow-parts/angular/example_component_ts.md rename static/usage/v8/toolbar/basic/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/toolbar/basic/angular/example_component_ts.md rename static/usage/v8/toolbar/progress-bars/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/toolbar/progress-bars/angular/example_component_ts.md rename static/usage/v8/toolbar/searchbars/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/toolbar/searchbars/angular/example_component_ts.md rename static/usage/v8/toolbar/segments/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/toolbar/segments/angular/example_component_ts.md rename static/usage/v8/toolbar/theming/colors/{angular.md => angular/example_component_html.md} (100%) create mode 100644 static/usage/v8/toolbar/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/toolbar/theming/css-properties/angular/example_component_ts.md diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.md index dba1892780..5a8d29dc83 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 dd9e3c0f4e..ad07a4290e 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 4406da5011..64e019af93 100644 --- a/src/components/global/Playground/stackblitz.utils.ts +++ b/src/components/global/Playground/stackblitz.utils.ts @@ -153,7 +153,6 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => { 'src/global.css': defaultFiles[12], 'src/theme/variables.css': defaultFiles[13], ...options?.files, - ...options?.dependencies, }; files[main] = files[main].replace('provideIonicAngular()', `provideIonicAngular({ mode: '${options?.mode}' })`); 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 0000000000..b1a1813cc1 --- /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 867276f88f..d0c8c431f1 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 0000000000..b1a1813cc1 --- /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 36bb76371e..1b29e600d1 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 204508c6b3..0000000000 --- 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 163641a544..0000000000 --- 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 b2ff09b5fe..0000000000 --- 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 6c9e356784..0000000000 --- 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 0000000000..b1a1813cc1 --- /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 c564a2d16b..32a10a6cf9 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 0000000000..b1a1813cc1 --- /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 28172bca32..da216e2c64 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 0000000000..b1a1813cc1 --- /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 868eaaa7c1..b63360d76c 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 bdcac1d862..3afda996a1 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 c7ecc27266..7257bcb45e 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 78d9ddf05c..df6c89aabe 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 f991151c4a..082f779fe1 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 a38c0b9230..f0f7fcc8d5 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 d9714abb66..709135c1c1 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 d9714abb66..709135c1c1 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 20858d60e4..55be132d67 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 51552ff985..ebfd969430 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 34f44b288d..56ca5fedeb 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 713dc9067f..ae2c39e616 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 6fdd69c7f6..baf0999fd3 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 82d1f17e45..e2f5ccac60 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 9526ebdde8..7d7adf11d2 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 e8a1dae1af..117dd07dcb 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 36a7e22081..32c5089fdc 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 6c6acbef99..cb81d2e30d 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 7b9aadccf5..49bb9e92f6 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 63f7a7b2f7..607b9e9cdc 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 4ee04bea42..88bc548bd6 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 b1fe997c1d..85a6a5f9b3 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 c0e383d5ec..98b3a8d411 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 0000000000..effe558024 --- /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 8c51fa21d0..e77c4d5719 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 0000000000..244bc7b789 --- /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 d3a7fc0f6a..1c26e7fff7 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 0000000000..80785adaf8 --- /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 52814ca5af..dd14f3df10 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 0000000000..effe558024 --- /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 38bc99f7e8..a030f931d0 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 b2cda11d2a..55048bd7b2 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 27c7d6b0c0..e1fc97ab64 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 3c20b51144..0000000000 --- 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 b123a4858c..4c364e7234 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 d181c5a526..2f9b78ab16 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 05a1bd64d7..b0fb5a01ec 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 d90a901513..61c3038ecf 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 0000000000..c4809eb965 --- /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 491b5eec6e..f42ba8c6fc 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 0000000000..73c490c224 --- /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 1b640d0675..24e4c35568 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 0000000000..73c490c224 --- /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 3fdf7e333a..427b06d533 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 8ae69af72a..269836b83d 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 0000000000..6b8add8610 --- /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 3df433d189..6966fcca9b 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 0000000000..6b8add8610 --- /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 48e8a4ed82..78ec179e69 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 e3c0462a14..abd91bba07 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 aabfb29a82..17d100420d 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 072f2c1090..2634a7a252 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 ccc9439a38..474da49689 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 0000000000..6b8add8610 --- /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 c100fffe65..647ec6cc98 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 0000000000..6b8add8610 --- /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 d808d24927..c9ce8d95c7 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 0000000000..403e44caae --- /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 6bf7c9907f..e93387cdcc 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 0000000000..403e44caae --- /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 db05b92b34..1d97a1bbbd 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 90bc1d24d3..b852f87302 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 0000000000..403e44caae --- /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 cc5417f8d5..2e5fa3e0a3 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 0000000000..403e44caae --- /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 e59a99edb6..b7ff7457aa 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 0000000000..403e44caae --- /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 7696d79885..508d80714b 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 0000000000..403e44caae --- /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 88cb6539a8..4c7697f018 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 0000000000..403e44caae --- /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 32f67b6f00..d2c079e37c 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 0000000000..dd7b99299d --- /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 9d2fd3dcfe..38e38bc256 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 7af150bd16..94e3d6ef6f 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 0000000000..d35351dd78 --- /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 6c090f394b..acb83e4969 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 0000000000..74ee512cb4 --- /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 c19055f3a7..2d837481db 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 0000000000..204d500d31 --- /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 3cc353476b..6acc2c4d2a 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 0000000000..d35351dd78 --- /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 30ce310e99..69f6a1a5d0 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 0000000000..d35351dd78 --- /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 cc473c03d3..2770079f8b 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 0000000000..0d67119a86 --- /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 e238ae9c63..ec6feae0a2 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 0000000000..0d67119a86 --- /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 bcc02a761e..d28dabb4d3 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 0000000000..b6b56f82f5 --- /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 1128d74a9f..c27af62666 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 0000000000..0d67119a86 --- /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 1e34eef699..3c7ff7673d 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 0000000000..0d67119a86 --- /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 2534249529..96474facc2 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 0000000000..0d67119a86 --- /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 51d619f8cc..d6ae616fd9 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 6b388ef38d..5edb3cd886 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 0000000000..0cfbf3e1a7 --- /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 08aba14cac..1fef347970 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 0000000000..0cfbf3e1a7 --- /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 2ce8f542f9..29019aac70 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 0000000000..38a7b14090 --- /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 6ff6db1f65..e389cbcc2c 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 0000000000..5180063af5 --- /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 cc20ddf507..20d142fbd0 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 0000000000..777f7fe66a --- /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 482629caa3..28df6cbc5e 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 0000000000..64d541cb04 --- /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 99e893af49..7c9181c434 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 0000000000..64d541cb04 --- /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 7b03b2ff8f..ac1d29dc5a 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 0000000000..9a2b1795d6 --- /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 4224357f52..a133ce5eac 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 0000000000..64d541cb04 --- /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 2510a15e89..77ad7161e8 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 3021390e18..37d9936a82 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 0000000000..64d541cb04 --- /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 808fa7bf75..13219e583f 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 0000000000..64d541cb04 --- /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 dc33ed9ac8..57b17c21e2 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 0000000000..d762802859 --- /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 f12a9dc3bd..bb5c3770fe 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 4ca93b85f4..1382b5db0e 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 60f9c700d0..b877e31c7e 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 0000000000..64d541cb04 --- /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 566363cc08..ecbef0b093 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 0000000000..64d541cb04 --- /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 389010b430..eab3232865 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 0000000000..64d541cb04 --- /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 5ffaf29bb4..b03b4360a2 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 0000000000..64d541cb04 --- /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 33c92262f9..1355a44347 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 0000000000..64d541cb04 --- /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 e35108abac..3841888f4f 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 0000000000..64d541cb04 --- /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 84405fb740..250303f71b 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 0000000000..64d541cb04 --- /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 9778082726..182b1d07ae 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 0000000000..64d541cb04 --- /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 524545fb03..b1f841692e 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 0000000000..64d541cb04 --- /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 9423cfba0f..c2482e6f00 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 0000000000..64d541cb04 --- /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 47e4923bba..8305adfc58 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 56c95d0ba0..20df0e860f 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 0000000000..64d541cb04 --- /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 4ec3d3ecdf..08a64bf203 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 f8824304f0..d566af6e99 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 0000000000..64d541cb04 --- /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 c0efd60dc1..192f93026b 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 f881c10c61..29c5aeb300 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 403209255c..d852445f1d 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 bc62ad83c7..7a2109d0c2 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 4fed5b64b8..11dac9f8e3 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 f881c10c61..29c5aeb300 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 bc62ad83c7..7a2109d0c2 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 403209255c..d852445f1d 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 403209255c..d852445f1d 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 0000000000..bcdf570e97 --- /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 d9abf47d78..c63e64ffa3 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 0815962155..8c963786c1 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 0000000000..993d724b88 --- /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 6945d9ba91..69b6f42c8e 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 55469ab3c5..962be4924a 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 390ba6b75f..7c35aba213 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 60c02b86ea..fb41f8761c 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 415ed5dba8..e7a9c133f1 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 2e23e35925..d73da98943 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 415ed5dba8..e670c8c322 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 0000000000..fbf2fdf258 --- /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 ed54a84366..bd7cb7c7a4 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 0000000000..fbf2fdf258 --- /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 eecea0ba6c..6694366054 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 0000000000..fbf2fdf258 --- /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 c590c8a24c..f6e28f7b89 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 2c08dc06fc..2392e6cd2d 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 0000000000..9dc150bb9c --- /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 7a702b37d0..044fa65dca 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 0000000000..39bae8be84 --- /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 5161508076..74fa89cb4f 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 7eb78206d7..0000000000 --- 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 c7f0c89801..a118f6faa7 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 68e8194ca7..30609f6f16 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 0000000000..fbf2fdf258 --- /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 715c46e475..930cb9b462 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 0000000000..f950296880 --- /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 4728673f04..6d06e405f1 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 899f7a826a..2a33933595 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 0000000000..9dc150bb9c --- /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 17c29f994c..84623a174b 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 0000000000..9dc150bb9c --- /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 b87bfe5194..5861fbac21 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 0000000000..1d2ea0f0db --- /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 9c8a9e292b..1415cd6805 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 0000000000..11c0c268eb --- /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 a728b84c5d..0e3629f0d4 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 0000000000..11c0c268eb --- /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 f425706d75..7ee7eda8a5 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 0000000000..5c823eabc6 --- /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 39983e2a9b..1c23e3b9e2 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 0000000000..e06ea993f9 --- /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 a75eff57b6..5f2438a5d2 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 0000000000..e06ea993f9 --- /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 f794264ce0..3920ea07be 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 5f32e92459..a3169b9226 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 0000000000..f3dbc76461 --- /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 f5c330d7b4..095abe32ac 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 5f8f10b788..6d056d6d71 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 0000000000..f3dbc76461 --- /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 11fe249d0c..16fb201599 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 019d31f99f..5944353da3 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 0000000000..18cbb2e592 --- /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 8c878934a0..22248a9414 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 0000000000..e42eafb824 --- /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 1925824c43..6e81dc877a 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 3122a1f730..06597ba96c 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 0000000000..d8cb142b8f --- /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 c8c7d6e309..a073a87227 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 0000000000..f3dbc76461 --- /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 9973f9daa3..ff8d9aa25c 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 0000000000..f3dbc76461 --- /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 f3d49f6332..bbd5334bd9 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 0000000000..fbf2fdf258 --- /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 44379c3901..b52747c514 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 0000000000..5a7fdcebe2 --- /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 b9365587f5..fd1b9312fd 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 0000000000..88e481153b --- /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 a1e95d3ab9..72d429fd52 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 0000000000..f3dbc76461 --- /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 2c712e8218..4cdbf40692 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 0000000000..5a7fdcebe2 --- /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 45363df63a..9abf731610 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 4e45ccc667..d5a2831627 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 0000000000..dd5f0b5005 --- /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 79b5b31a75..771693f735 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 0000000000..a608c44a22 --- /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 5c724b1a8f..c4668f07f0 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 0000000000..dd5f0b5005 --- /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 a8e84eddf7..1ec366f734 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 0000000000..3a455a0c90 --- /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 13af9007f8..2a04d1f6ae 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 0000000000..3a455a0c90 --- /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 e273cdb2b9..e5ec0bbf4c 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 0000000000..0ebeec81ff --- /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 db7339d24e..5ecc37224d 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 bd4b86eef2..cec468c627 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 0000000000..1807657477 --- /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 e4038ad027..25ef6e6463 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 0000000000..1807657477 --- /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 c9aa963a5f..99b1adcad2 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 0000000000..1807657477 --- /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 f0a5a37959..0a36d4cd6e 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 19544ec574..1f1f3fd5e5 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 d213d28366..d77ccf9032 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 5b1b70c347..03f298b15a 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 0cd5713c06..769b0bc9bd 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 73ce3215f6..7e443a6d98 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 d3b8b44f6c..0000000000 --- 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 b123a4858c..4c364e7234 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 06c42b342c..b6a83169e1 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 d9e95ed721..4cc4fc01be 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 d6edd90a59..d1986f19a9 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 de4e4e0156..0456c3ca67 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 0000000000..38db87894b --- /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 c1ff54b6c7..d319a0ad69 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 0000000000..56ed0d0187 --- /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 5c32457e00..6090fc71c4 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 0000000000..38db87894b --- /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 daadf060f1..f1e9be4095 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 0000000000..38db87894b --- /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 07c1802c04..d7374e0c94 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 7a638c6096..3af371232c 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 6f252e19dc..f2e223ccef 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 4db53a836a..3d0ceecf83 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 0000000000..3d0ceecf83 --- /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 3eb127648d..dd1f84ade4 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 0000000000..3d0ceecf83 --- /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 658ef72d45..4bf193fb78 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 0000000000..3d0ceecf83 --- /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 9c846cc784..4e995fa375 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 a876a37620..fbf879f8d3 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 971d3d92ed..383264f58d 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 0000000000..5d74447ede --- /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 db428ba587..ab84f691c3 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 0000000000..5d74447ede --- /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 7e6638a7e7..597a47e552 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 0000000000..5d74447ede --- /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 5d6c694d10..d775905c2d 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 0000000000..f5bf20e746 --- /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 25f829a31f..b1b5522da8 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 0000000000..f5bf20e746 --- /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 2223f07657..31b149c9f3 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 0000000000..151a9f44f8 --- /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 3105943de6..62930c29a8 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 0000000000..f5bf20e746 --- /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 24df0d8ca2..5098f50aa8 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 0000000000..f5bf20e746 --- /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 3cd9a87cdb..b8dbd61631 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 0000000000..f5bf20e746 --- /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 032b2ee66c..8669ba8cd0 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 d7f803aea0..1158167fc1 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 0000000000..24ea50045a --- /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 49aed4c5b4..c8dfeaf033 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 0000000000..24ea50045a --- /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 ead42b93ad..66d3a06fe2 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 377ccd2dc2..e150234409 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 e1b920f66d..b13b84b308 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 0000000000..2c58b35ac6 --- /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 f885a98ce7..f778ab0d51 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 0000000000..24ea50045a --- /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 0a450c0c60..6980824fbe 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 0000000000..24ea50045a --- /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 f23fc3fd99..38c3f06b37 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 8dc875e1bd..fdae87ebf9 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 f61ba54a33..3ada922624 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 0000000000..24ea50045a --- /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 0fc7d22e2e..f7f4bb1e51 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 0000000000..24ea50045a --- /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 380bd5204d..5dd2a606e5 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 9d1f3a5f19..db6bd8d609 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 74304953d4..8edb4e4dc1 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 74304953d4..8edb4e4dc1 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 a5ac7eaaa9..8edb4e4dc1 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 74304953d4..8edb4e4dc1 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 7a5c867f79..a0e47f6b8b 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 17e7d981c8..d4f3cc02ac 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 2cd3dd6674..4ebfef05c5 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 af0ff643b2..0914b726e0 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 2485a55824..873daed0e9 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 920f5f81e3..bab1ace34d 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 7a5c867f79..a0e47f6b8b 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 0000000000..55c14aafc0 --- /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 56050b2e4d..2a95bb0901 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 0000000000..4069269cd0 --- /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 c1f4e1977c..898cb36579 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 0000000000..b93e2ab390 --- /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 1d5212a124..b5c5a84477 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 4e69a17914..f0ee9b81eb 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 9a88f1c135..6a97ecbba5 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 0000000000..1339bfebf8 --- /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 951485a080..90f4e93ced 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 0000000000..2ea2b2e4cf --- /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 670a3db203..20cecd3ae2 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 0000000000..2ea2b2e4cf --- /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 65e3fca530..ad19f95488 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 8540f8ec1b..d974333e9a 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 0000000000..d51cbc123a --- /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 66e2e50f58..2895629cf0 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 807b3ff612..fb95a4ea91 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 0000000000..d51cbc123a --- /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 bdcf06a9de..6942380586 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 0000000000..d51cbc123a --- /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 da21c55735..ecc038e1c3 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 fb51c040a2..fb988662d5 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 0000000000..efa11c163f --- /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 1fc60d79fe..22f6b1f770 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 0000000000..efa11c163f --- /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 9e1a07063f..c5a6fc0923 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 0000000000..61e221a24b --- /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 0617a54da7..86f22e705f 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 4db53a836a..d85d416636 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 c3f34d0ada..2ab0bd1d62 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 4db53a836a..1b377b7721 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 0000000000..1b377b7721 --- /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 393a8af448..16a2819974 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 0000000000..efa11c163f --- /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 ae4fa7b752..4519e559ec 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 0000000000..edeb5fb217 --- /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 17356a8466..1142c6f8dc 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 0000000000..efa11c163f --- /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 b0464726fb..ceeb3cf665 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 0000000000..a8cb5c497c --- /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 1b25e6b83f..cefb2b96fd 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 0000000000..efa11c163f --- /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 214708de57..2fc29ce267 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 af00be1957..361cfbad1b 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 c33570deec..976de91ea5 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 7354647f22..808a9743cc 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 20d05fa847..e984a6f654 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 f7717b55dc..4cdf6bc2b3 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 0fa5803771..0000000000 --- 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 ded6fa60b0..9276b8b13e 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/v7/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/v7/select/typeahead/angular/modal-example_component_html.md rename to static/usage/v7/select/typeahead/angular/typeahead_component_html.md index 64da05a7a9..ed147c6425 100644 --- a/static/usage/v7/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 9bd21f1b40..f9de32444d 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 e81d8b0aa5..86565f3370 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 c74fbd4855..1a2f83bccc 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 0000000000..d4e5d48be6 --- /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 c131f6dbe1..a0c8f88ff5 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 0000000000..776380a663 --- /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 ee82596cc0..07a90f122d 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 0000000000..776380a663 --- /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 22b93f802b..1a2f60f7b8 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 0000000000..1e20f96fbf --- /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 336074baaa..a89d6e8305 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 0000000000..69438d5bb0 --- /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 e36b8c6316..0000000000 --- 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 0000000000..fd959555b2 --- /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 7ff1067030..0000000000 --- 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 7762322ce9..84c7d490b4 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 9e2ef0a3e8..7d3d344681 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 2a1fb15b46..0000000000 --- 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 f5a92a4868..072cd0a779 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 8e2ab48cf3..0000000000 --- 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 d29209c00d..63273c0280 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 f50a008863..0000000000 --- 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 bd6e723d33..00eb12be82 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 a1d599c5d9..0000000000 --- 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 072832ae97..c11fd49969 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 122ee98dfb..b49066098d 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 0000000000..a407eaef3b --- /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 9dd79cbd7c..043d89b9f4 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 0000000000..5e8570222d --- /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 3070fbea85..181f202fdc 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 0000000000..ddae482aec --- /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 cc1e09366e..d69f619b8b 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 2c08dc06fc..2b46bbe6da 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 0000000000..ddae482aec --- /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 bfc5b54da5..50cb3a6227 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 0000000000..ddae482aec --- /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 5d4ca92e48..c8b578ce9c 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 0000000000..874d21ed01 --- /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 a9f9136612..824120c838 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 0000000000..5e8570222d --- /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 411fc52d50..0928d01334 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 899f7a826a..c110f8c159 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 0000000000..ddae482aec --- /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 3a50362dce..f128fc8e77 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 0000000000..fd6269b877 --- /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 89a2a19fb8..87dd7e8cac 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 0000000000..a82583c287 --- /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 36674cc72c..905f7a2555 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 0000000000..4e602aa671 --- /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 aa61cab896..73f11ad210 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 0000000000..7bcffbfd88 --- /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 565b56f559..a161ca4746 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 0000000000..80a17959d0 --- /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 63ae27756f..d8ed39bb74 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 0000000000..7bcffbfd88 --- /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 160f05db92..61da485809 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 0000000000..80a17959d0 --- /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 ad3aef2e12..91f18ff10d 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 0000000000..7bcffbfd88 --- /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 00a4e4800a..f7660455a4 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 0000000000..7bcffbfd88 --- /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 e67d2cf069..af9aa6700f 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 0000000000..7bcffbfd88 --- /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 b7f767691f..fceacaf000 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 0000000000..680c14e048 --- /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 9ca22f52d0..1e7377339c 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 0000000000..b1a1813cc1 --- /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 2f68543883..8e59be8724 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 2b9dd56626..0000000000 --- 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 8b7c022593..0000000000 --- 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 163641a544..0000000000 --- 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 b2ff09b5fe..0000000000 --- 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 6c9e356784..0000000000 --- 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 5c4cf3b51b..0000000000 --- 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 0000000000..b1a1813cc1 --- /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 df2ebb1afc..a19686a17f 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 0000000000..b1a1813cc1 --- /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 34e3110805..710beaa836 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 0000000000..b1a1813cc1 --- /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 0e1104ea9a..444b3bab7c 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 bdcac1d862..3afda996a1 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 c7ecc27266..7257bcb45e 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 78d9ddf05c..df6c89aabe 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 f991151c4a..082f779fe1 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 a38c0b9230..f0f7fcc8d5 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 d9714abb66..709135c1c1 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 d9714abb66..709135c1c1 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 20858d60e4..55be132d67 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 51552ff985..ebfd969430 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 34f44b288d..56ca5fedeb 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 713dc9067f..ae2c39e616 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 6fdd69c7f6..baf0999fd3 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 82d1f17e45..e2f5ccac60 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 9526ebdde8..7d7adf11d2 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 e8a1dae1af..eef9ba4482 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 36a7e22081..84ca1f2a47 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 6c6acbef99..ac8959f5fa 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 7b9aadccf5..49bb9e92f6 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 63f7a7b2f7..a75e3041da 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 4ee04bea42..d6739439d9 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 b1fe997c1d..21dd0d187c 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 c0e383d5ec..40e672d585 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 9970bf3e4d..9c836bc842 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 0000000000..effe558024 --- /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 6655efc656..c3a0a19015 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 0000000000..244bc7b789 --- /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 21c571e6c2..b46cf0896e 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 0000000000..80785adaf8 --- /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 ef0b525815..801c0ba268 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 0000000000..effe558024 --- /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 3e4dfeb4f1..bad5605bc4 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 b2cda11d2a..55048bd7b2 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 f3d4197adc..0031b6eadd 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 3c20b51144..0000000000 --- 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 b123a4858c..4c364e7234 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 d181c5a526..2f9b78ab16 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 05a1bd64d7..b0fb5a01ec 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 43614d4b44..80141c28ca 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 0000000000..c4809eb965 --- /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 fd85d2b411..553124f646 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 0000000000..73c490c224 --- /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 dedf7570d7..ebb93bc7a1 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 0000000000..73c490c224 --- /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 f52a73262c..73f088f4aa 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 8ae69af72a..269836b83d 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 0000000000..6b8add8610 --- /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 cdceec0621..0661fe7a68 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 0000000000..6b8add8610 --- /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 1b8e19f586..cbdd3270f5 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 e3c0462a14..abd91bba07 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 aabfb29a82..17d100420d 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 072f2c1090..2634a7a252 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 ccc9439a38..474da49689 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 0000000000..6b8add8610 --- /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 df68242f93..0974c00303 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 0000000000..6b8add8610 --- /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 45726c2da9..a9e9deb311 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 0000000000..403e44caae --- /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 3bf460ada3..8fa9447fd2 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 0000000000..403e44caae --- /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 b34226a0d1..8418e46d1a 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 ecbdde79de..3987b3b09a 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 6e815b2531..74c70c218a 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 0000000000..403e44caae --- /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 8f25ec4464..2c0b97b223 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 0000000000..403e44caae --- /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 5ca882379b..9afe281724 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 0000000000..403e44caae --- /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 21ab85f8eb..f5cb7f1158 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 0000000000..403e44caae --- /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 0cc6adf46c..7a03fb574b 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 0000000000..dd7b99299d --- /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 3420c56408..bdb882d7bf 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 7af150bd16..94e3d6ef6f 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 0000000000..d35351dd78 --- /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 1f6c20f270..dbd09a796c 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 0000000000..74ee512cb4 --- /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 46e17cf4b1..32789fcccb 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 0000000000..204d500d31 --- /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 b20109f53b..76ad0a14e5 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 0000000000..d35351dd78 --- /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 385e21c7c6..5afcf9e560 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 0000000000..d35351dd78 --- /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 1181a8e4f6..009a7bcddf 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 0000000000..0d67119a86 --- /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 7eac2e6b12..686e082798 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 0000000000..0d67119a86 --- /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 5ab8784522..43514e0b2d 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 0000000000..b6b56f82f5 --- /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 2e08aaf0b7..1df7c12e5d 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 0000000000..0d67119a86 --- /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 c368f3c374..c6b6e82a83 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 0000000000..0d67119a86 --- /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 90a28f0669..70e3ed29e3 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 0000000000..0d67119a86 --- /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 b4a4e04917..b64b47485a 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 6b388ef38d..5edb3cd886 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 0000000000..0cfbf3e1a7 --- /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 e0e5188b2f..0be46b82fc 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 0000000000..0cfbf3e1a7 --- /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 5ddfdd87f3..26a973eb23 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 0000000000..38a7b14090 --- /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 700fc713ec..053c95f17f 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 0000000000..5180063af5 --- /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 82db6d82b0..db5a804ac7 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 0000000000..9a422284c2 --- /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 ff54ee7260..681f449123 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 0000000000..64d541cb04 --- /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 4d9429d305..62ae8d73b9 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 0000000000..64d541cb04 --- /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 8f8e886ca0..641ef62190 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 0000000000..9a2b1795d6 --- /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 8c8dd6234a..0e87041120 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 0000000000..64d541cb04 --- /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 209eb126ef..ea89976eaa 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 3021390e18..37d9936a82 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 0000000000..64d541cb04 --- /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 d10c588560..4c43fcb3fe 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 0000000000..64d541cb04 --- /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 3695e380fa..8e4964da78 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 0000000000..64d541cb04 --- /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 d6e6eb0ca4..c4321c5933 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 4ca93b85f4..1382b5db0e 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 60f9c700d0..b877e31c7e 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 0000000000..64d541cb04 --- /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 330a1e415b..b45ae547fe 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 0000000000..64d541cb04 --- /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 4cc8b4b7bd..0b725341ad 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 0000000000..64d541cb04 --- /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 0e15b22a68..1fa52bc59c 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 0000000000..64d541cb04 --- /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 0013edd6d6..e7c706b453 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 0000000000..64d541cb04 --- /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 6586c762c0..d2baad0940 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 0000000000..64d541cb04 --- /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 b0542b8b8f..8b9749c748 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 0000000000..64d541cb04 --- /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 7cb18100bd..569e249c60 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 0000000000..64d541cb04 --- /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 d8cb4417e6..68d952f04a 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 0000000000..64d541cb04 --- /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 0dd5b55363..2941c9aff9 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 0000000000..64d541cb04 --- /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 0561288d93..c0c0b53a30 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 56c95d0ba0..20df0e860f 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 0000000000..64d541cb04 --- /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 f87d6e8fad..a8cc488ac3 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 39bac10093..6541627176 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 0000000000..64d541cb04 --- /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 248c0b86ba..3c1ca1c82f 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 0000000000..64d541cb04 --- /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 c053667913..237eccc68b 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 f881c10c61..29c5aeb300 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 494d73158e..ea987ff790 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 b5b93c657d..f77b218949 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 403209255c..d852445f1d 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 bc62ad83c7..7a2109d0c2 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 4fed5b64b8..11dac9f8e3 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 f881c10c61..29c5aeb300 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 bc62ad83c7..7a2109d0c2 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 403209255c..d852445f1d 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 403209255c..d852445f1d 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 0000000000..bcdf570e97 --- /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 618e037761..af3b571296 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 0815962155..8c963786c1 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 0000000000..993d724b88 --- /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 d438994ef4..ddc0d2f680 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 48b43c838c..b666e57911 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 0000000000..bec3c992a7 --- /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 3e14666bad..ca4bb366ba 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 55469ab3c5..962be4924a 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 390ba6b75f..7c35aba213 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 60c02b86ea..fb41f8761c 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 415ed5dba8..e7a9c133f1 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 2e23e35925..d73da98943 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 415ed5dba8..e670c8c322 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 0000000000..5257544984 --- /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 037fec4f19..16f73c76ca 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 0000000000..fbf2fdf258 --- /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 bf35523196..5c98ee52a5 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 0000000000..fbf2fdf258 --- /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 f3763e6024..61e82d72c7 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 0000000000..fbf2fdf258 --- /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 b0192c1909..351aa301f7 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 2c08dc06fc..2392e6cd2d 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 0000000000..9dc150bb9c --- /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 d640ed691b..8d19505db2 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 0000000000..39bae8be84 --- /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 cac5c19451..7aa9df2a4e 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 7eb78206d7..0000000000 --- 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 c7f0c89801..a118f6faa7 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 72e2d24952..7e6f892601 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 0000000000..fbf2fdf258 --- /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 80b5364459..4213294c18 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 0000000000..f950296880 --- /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 1191f5f2bf..4106a08175 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 899f7a826a..2a33933595 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 0000000000..9dc150bb9c --- /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 127bcfdb2f..c08352f5b2 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 0000000000..9dc150bb9c --- /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 77a33b0d8e..32156fbeb3 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 0000000000..1d2ea0f0db --- /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 be308e5e36..ae41cc694f 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 0000000000..11c0c268eb --- /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 95d2d7db31..14b4143f7a 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 0000000000..11c0c268eb --- /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 a275698ebe..d41b02daf2 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 0000000000..5c823eabc6 --- /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 4a960f1ad8..fff3725257 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 0000000000..e06ea993f9 --- /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 5d7c11952f..85ac79f71d 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 0000000000..e06ea993f9 --- /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 388b679d08..025987e137 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 5f32e92459..a3169b9226 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 0000000000..f3dbc76461 --- /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 6c8369fb44..fe339cd3dc 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 5f8f10b788..6d056d6d71 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 0000000000..f3dbc76461 --- /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 02770dea62..f65face9b2 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 019d31f99f..5944353da3 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 0000000000..18cbb2e592 --- /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 e199217886..4d76397496 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 0000000000..e42eafb824 --- /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 fd0da581a1..21307b1151 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 3122a1f730..06597ba96c 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 0000000000..d8cb142b8f --- /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 58ff650da2..5bbd16b0f7 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 0000000000..f3dbc76461 --- /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 a58e153f5a..05e86f7525 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 0000000000..f3dbc76461 --- /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 0e6793de31..752dee16ad 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 0000000000..fbf2fdf258 --- /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 1d80ba8703..fca0fd02bc 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 0000000000..5a7fdcebe2 --- /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 09def9afbe..32c8857bf2 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 0000000000..88e481153b --- /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 35375f7375..4e9f2a35b8 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 0000000000..f3dbc76461 --- /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 4e872990d1..d06297eb34 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 0000000000..5a7fdcebe2 --- /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 bf94e2a9a3..840dfd5137 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 4e45ccc667..d5a2831627 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 0000000000..dd5f0b5005 --- /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 b54ef34c48..487e450de8 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 0000000000..a608c44a22 --- /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 2acfe8959d..ca9d287927 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 0000000000..dd5f0b5005 --- /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 9985549920..06db229478 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 0000000000..3a455a0c90 --- /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 eddf36b82d..0ef8168a62 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 0000000000..3a455a0c90 --- /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 c04c154d6e..2602475525 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 0000000000..0ebeec81ff --- /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 9d6ecb1fc1..50e48fd5af 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 bd4b86eef2..cec468c627 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 0000000000..1807657477 --- /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 2ca1e9b78d..16ec10fcab 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 0000000000..1807657477 --- /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 d2d4ec70db..f340c1500f 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 0000000000..1807657477 --- /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 d2ed15da29..e2b3d52073 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 19544ec574..1f1f3fd5e5 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 75821bfd69..786aff9a00 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 5b1b70c347..03f298b15a 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 0cd5713c06..769b0bc9bd 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 3a6a6ab314..e2e7320fe4 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 d3b8b44f6c..0000000000 --- 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 b123a4858c..4c364e7234 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 06c42b342c..b6a83169e1 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 d9e95ed721..4cc4fc01be 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 d6edd90a59..d1986f19a9 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 eed4ca22d8..07a944aefd 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 0000000000..38db87894b --- /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 80679ac212..1561441d32 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 0000000000..56ed0d0187 --- /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 ff7e768cc2..9a07139ebc 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 0000000000..38db87894b --- /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 7901852131..6ab9f4a430 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 0000000000..38db87894b --- /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 c0b40585c5..434c963d63 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 7a638c6096..31eb752d4a 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 6f252e19dc..5ac50ceecf 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 0000000000..a2519198b5 --- /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 ded2d4fe4b..57c99c522c 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 406b87a5af..72ecb6a854 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 0000000000..a2519198b5 --- /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 af398fd03a..0b50e1e63a 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 0000000000..a2519198b5 --- /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 29f6db3c1c..1c5abe2894 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 4db53a836a..3d0ceecf83 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 0000000000..3d0ceecf83 --- /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 1d79e113da..5848dbfe32 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 0000000000..3d0ceecf83 --- /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 4e9429b2f2..6434328a3c 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 0000000000..3d0ceecf83 --- /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 b6b291a703..ea6103db4f 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 a876a37620..fbf879f8d3 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 971d3d92ed..383264f58d 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 0000000000..5d74447ede --- /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 e99ce0cc14..68d830442d 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 0000000000..5d74447ede --- /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 05b08cb194..c5dcbfb086 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 0000000000..5d74447ede --- /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 3bf29e18b5..b5fbd39209 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 0000000000..f5bf20e746 --- /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 1a1d7367b6..b82637e4ce 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 0000000000..f5bf20e746 --- /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 a744c25de4..3bf64f07cd 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 0000000000..151a9f44f8 --- /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 250bf8b59d..127c1c10b9 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 0000000000..f5bf20e746 --- /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 3e0c513c00..8d07ec15d5 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 0000000000..f5bf20e746 --- /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 df88b57f34..747f24c897 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 0000000000..f5bf20e746 --- /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 d648dca7b0..c5593d5871 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 d7f803aea0..1158167fc1 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 0000000000..24ea50045a --- /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 c9d1d3d6e9..83ca81ad71 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 0000000000..24ea50045a --- /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 06466b2eca..aeb799f755 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 377ccd2dc2..e150234409 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 e1b920f66d..b13b84b308 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 0000000000..2c58b35ac6 --- /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 53c51cddf6..57691d79b1 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 0000000000..24ea50045a --- /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 4d1d0e54e6..428ffeb3af 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 0000000000..24ea50045a --- /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 5be64329c2..9a5e48175e 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 8dc875e1bd..fdae87ebf9 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 f61ba54a33..3ada922624 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 0000000000..24ea50045a --- /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 a1d4bc07bd..2f0bf2cd27 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 0000000000..24ea50045a --- /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 7d1361b30d..ade08cf28b 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 9d1f3a5f19..db6bd8d609 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 74304953d4..8edb4e4dc1 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 74304953d4..8edb4e4dc1 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 a5ac7eaaa9..8edb4e4dc1 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 74304953d4..8edb4e4dc1 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 7a5c867f79..a0e47f6b8b 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 17e7d981c8..d4f3cc02ac 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 2cd3dd6674..4ebfef05c5 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 af0ff643b2..0914b726e0 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 2485a55824..873daed0e9 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 920f5f81e3..bab1ace34d 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 7a5c867f79..a0e47f6b8b 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 0000000000..55c14aafc0 --- /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 9a0ad84ac8..96c3c3228b 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 0000000000..4069269cd0 --- /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 c126924200..bbd08611b6 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 0000000000..b93e2ab390 --- /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 2c1df11554..925c5b3be1 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 4e69a17914..f0ee9b81eb 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 9a88f1c135..6a97ecbba5 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 0000000000..1339bfebf8 --- /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 8168ac8223..48c1c748ce 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 0000000000..2ea2b2e4cf --- /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 7525982508..0ceee8d08b 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 0000000000..2ea2b2e4cf --- /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 3aa1b04c39..4c92987e23 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 8540f8ec1b..d974333e9a 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 0000000000..d51cbc123a --- /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 45c01ea915..39d7ff5253 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 807b3ff612..fb95a4ea91 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 0000000000..6ccef810d4 --- /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 e19de64f78..4ac4971f6b 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 0000000000..d51cbc123a --- /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 2ca6610b54..9c440653c4 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 fb51c040a2..fb988662d5 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 0000000000..efa11c163f --- /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 820ab1cccf..14036fc96a 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 0000000000..efa11c163f --- /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 cc9d2417ca..be21f778b8 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 0000000000..61e221a24b --- /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 228945fc15..90b1f857c2 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 4db53a836a..d85d416636 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 5f8bc6929c..ad2e2a9b6b 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 4db53a836a..1b377b7721 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 0000000000..1b377b7721 --- /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 9666f49d0d..edf11822c4 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 0000000000..efa11c163f --- /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 9f79261c28..4920aab389 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 0000000000..efa11c163f --- /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 b33bd96e53..167e36dee4 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 0000000000..edeb5fb217 --- /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 751948aa47..b1be55c0ba 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 0000000000..efa11c163f --- /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 694b6b3f4e..49800fb053 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 0000000000..a8cb5c497c --- /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 c7d0382d14..a9269a7e26 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 0000000000..efa11c163f --- /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 f09ead1ad1..09dea4d4c0 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 af00be1957..361cfbad1b 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 c33570deec..976de91ea5 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 7354647f22..808a9743cc 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 20d05fa847..e984a6f654 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 f7717b55dc..4cdf6bc2b3 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 0fa5803771..0000000000 --- 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 ded6fa60b0..9276b8b13e 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/v8/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/v8/select/typeahead/angular/modal-example_component_html.md rename to static/usage/v8/select/typeahead/angular/typeahead_component_html.md index 64da05a7a9..ed147c6425 100644 --- a/static/usage/v8/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 9bd21f1b40..f9de32444d 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 c7978e1819..7ce89c665a 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 c74fbd4855..1a2f83bccc 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 0000000000..d4e5d48be6 --- /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 70081b66ce..5c9ff39c0f 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 0000000000..776380a663 --- /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 111ac08a53..83bfc27c81 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 0000000000..776380a663 --- /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 cdfc38fc2e..d35cdee00d 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 0000000000..1e20f96fbf --- /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 330361b8fd..fb44ca91cf 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 0000000000..69438d5bb0 --- /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 e36b8c6316..0000000000 --- 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 0000000000..fd959555b2 --- /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 7ff1067030..0000000000 --- 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 7762322ce9..84c7d490b4 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 9e2ef0a3e8..7d3d344681 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 2a1fb15b46..0000000000 --- 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 f5a92a4868..072cd0a779 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 8e2ab48cf3..0000000000 --- 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 d29209c00d..63273c0280 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 f50a008863..0000000000 --- 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 bd6e723d33..00eb12be82 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 a1d599c5d9..0000000000 --- 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 90700816ab..fabae4f6cd 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 122ee98dfb..b49066098d 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 0000000000..a407eaef3b --- /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 d4288d0da5..f1a7eea056 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 0000000000..5e8570222d --- /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 61d4251c86..5e5fa9afb7 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 0000000000..ddae482aec --- /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 5f2d928b21..9f617c997a 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 2c08dc06fc..2b46bbe6da 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 0000000000..ddae482aec --- /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 73d6beae80..e3ebf6621d 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 0000000000..ddae482aec --- /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 2a0d896e83..b6d3e084d0 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 0000000000..874d21ed01 --- /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 baf22ad55b..64d7ff6cb0 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 0000000000..5e8570222d --- /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 7274f4734f..626f04e63e 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 899f7a826a..c110f8c159 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 0000000000..ddae482aec --- /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 76004eb4ed..97747123dd 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 0000000000..fd6269b877 --- /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 d12e29ff95..0aa457bef7 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 0000000000..a82583c287 --- /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 60473043c8..0596691aef 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 0000000000..4e602aa671 --- /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 c256cb1c73..fa9937e185 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 0000000000..7bcffbfd88 --- /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 8a7695a62b..58494462ad 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 0000000000..80a17959d0 --- /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 92432d33f7..1784ddadf9 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 0000000000..7bcffbfd88 --- /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 7a5204f2f9..023b15fc38 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 0000000000..80a17959d0 --- /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 66a8b51a02..f9f3bc75c5 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 0000000000..7bcffbfd88 --- /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 ff1d95d2f8..e54975f66b 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 0000000000..7bcffbfd88 --- /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 44fc0a52e8..bf0a1e5ca4 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 0000000000..7bcffbfd88 --- /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 a136177ef9..553ef9c1fe 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 0000000000..680c14e048 --- /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 72e5c8117f..a277fcb21c 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 2c17d05f6b..5195dc19ef 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 25308e1fe2..c470a326ed 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 0fe49c8b7d..8d5e7ef6aa 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';