diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx index 9d7f033b445..3489ae7840b 100644 --- a/src/components/global/Playground/index.tsx +++ b/src/components/global/Playground/index.tsx @@ -153,7 +153,7 @@ export default function Playground({ * The major version of Ionic to use in the generated StackBlitz examples. * This will also load assets for StackBlitz from the specified version directory. */ - version: number; + version: string; }) { if (!code || Object.keys(code).length === 0) { console.warn('No code usage examples provided for this Playground example.'); diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts index 2adb362df0d..a9461afc6d2 100644 --- a/src/components/global/Playground/stackblitz.utils.ts +++ b/src/components/global/Playground/stackblitz.utils.ts @@ -38,10 +38,10 @@ export interface EditorOptions { */ mode?: string; - version?: number; + version?: string; } -const loadSourceFiles = async (files: string[], version: number) => { +const loadSourceFiles = async (files: string[], version: string) => { const versionDir = `v${version}`; const sourceFiles = await Promise.all(files.map((f) => fetch(`/docs/code/stackblitz/${versionDir}/${f}`))); return await Promise.all(sourceFiles.map((res) => res.text())); @@ -155,7 +155,14 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => { ...options?.files, }; - files[main] = files[main].replace('provideIonicAngular()', `provideIonicAngular({ mode: '${options?.mode}' })`); + if (options?.version === '6') { + files[main] = files[main].replace( + 'importProvidersFrom(IonicModule.forRoot({ }))', + `importProvidersFrom(IonicModule.forRoot({ mode: '${options?.mode}' }))` + ); + } else { + files[main] = files[main].replace('provideIonicAngular()', `provideIonicAngular({ mode: '${options?.mode}' })`); + } sdk.openProject({ template: 'node', diff --git a/static/code/stackblitz/v6/angular/angular.json b/static/code/stackblitz/v6/angular/angular.json index 811624f69b5..167ced0d882 100644 --- a/static/code/stackblitz/v6/angular/angular.json +++ b/static/code/stackblitz/v6/angular/angular.json @@ -4,11 +4,10 @@ "newProjectRoot": "projects", "projects": { "app": { + "projectType": "application", "root": "", "sourceRoot": "src", - "projectType": "application", "prefix": "app", - "schematics": {}, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", @@ -16,38 +15,53 @@ "outputPath": "dist", "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": [] }, "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", @@ -57,8 +71,15 @@ "configurations": { "production": { "browserTarget": "app:build:production" + }, + "development": { + "browserTarget": "app:build:development" + }, + "ci": { + "progress": false } - } + }, + "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", @@ -73,46 +94,41 @@ "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" + "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/v6/angular/app.component.html b/static/code/stackblitz/v6/angular/app.component.html index 1031647a0e0..3aeab946d20 100644 --- a/static/code/stackblitz/v6/angular/app.component.html +++ b/static/code/stackblitz/v6/angular/app.component.html @@ -1,3 +1,5 @@ - + + + diff --git a/static/code/stackblitz/v6/angular/app.component.ts b/static/code/stackblitz/v6/angular/app.component.ts index ed440084f8f..dabad158164 100644 --- a/static/code/stackblitz/v6/angular/app.component.ts +++ b/static/code/stackblitz/v6/angular/app.component.ts @@ -1,8 +1,13 @@ import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; +import { RouterOutlet } from '@angular/router'; +import { ExampleComponent } from './example.component'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', - styleUrls: ['app.component.css'] + styleUrls: ['app.component.css'], + imports: [IonicModule, ExampleComponent, RouterOutlet], + standalone: true }) export class AppComponent { } diff --git a/static/code/stackblitz/v6/angular/app.component.withContent.html b/static/code/stackblitz/v6/angular/app.component.withContent.html index 96ebf597215..df5c543377f 100644 --- a/static/code/stackblitz/v6/angular/app.component.withContent.html +++ b/static/code/stackblitz/v6/angular/app.component.withContent.html @@ -1,5 +1,7 @@ - + + + diff --git a/static/code/stackblitz/v6/angular/app.component.withContent.ts b/static/code/stackblitz/v6/angular/app.component.withContent.ts new file mode 100644 index 00000000000..2078352ad98 --- /dev/null +++ b/static/code/stackblitz/v6/angular/app.component.withContent.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; +import { RouterOutlet } from '@angular/router'; +import { ExampleComponent } from './example.component'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'], + imports: [IonicModule, ExampleComponent, RouterOutlet], + standalone: true +}) +export class AppComponent { + constructor() {} +} diff --git a/static/code/stackblitz/v6/angular/app.routes.ts b/static/code/stackblitz/v6/angular/app.routes.ts new file mode 100644 index 00000000000..4a49853c7f4 --- /dev/null +++ b/static/code/stackblitz/v6/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', + }, +]; \ No newline at end of file diff --git a/static/code/stackblitz/v6/angular/example.component.ts b/static/code/stackblitz/v6/angular/example.component.ts index 6b67261e0b3..b1cd8b6af79 100644 --- a/static/code/stackblitz/v6/angular/example.component.ts +++ b/static/code/stackblitz/v6/angular/example.component.ts @@ -1,8 +1,11 @@ import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - styleUrls: ['example.component.css'] + styleUrls: ['example.component.css'], + imports: [IonicModule], + standalone: true }) export class ExampleComponent { } diff --git a/static/code/stackblitz/v6/angular/index.html b/static/code/stackblitz/v6/angular/index.html new file mode 100644 index 00000000000..79599e62e32 --- /dev/null +++ b/static/code/stackblitz/v6/angular/index.html @@ -0,0 +1,16 @@ + + + + + + + + Ionic App + + + + + + + + diff --git a/static/code/stackblitz/v6/angular/main.ts b/static/code/stackblitz/v6/angular/main.ts index 518110491b2..13819b6a52c 100644 --- a/static/code/stackblitz/v6/angular/main.ts +++ b/static/code/stackblitz/v6/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, IonicModule } from '@ionic/angular'; +import { importProvidersFrom } from '@angular/core'; +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; -import { AppModule } from './app/app.module'; - -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err: any) => console.error(err)); +bootstrapApplication(AppComponent, { + providers: [ + { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, + importProvidersFrom(IonicModule.forRoot({ })), + provideRouter(routes, withPreloading(PreloadAllModules)), + ], +}) \ No newline at end of file diff --git a/static/code/stackblitz/v6/angular/package.json b/static/code/stackblitz/v6/angular/package.json index 0ecc1227dd5..a80e5d13a5f 100644 --- a/static/code/stackblitz/v6/angular/package.json +++ b/static/code/stackblitz/v6/angular/package.json @@ -1,7 +1,31 @@ { + "name": "angular-starter", + "private": true, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build" + }, "dependencies": { + "@angular/animations": "^15.0.0", + "@angular/common": "^15.0.0", + "@angular/compiler": "^15.0.0", + "@angular/core": "^15.0.0", + "@angular/forms": "^15.0.0", + "@angular/platform-browser": "^15.0.0", + "@angular/platform-browser-dynamic": "^15.0.0", + "@angular/router": "^15.0.0", + "rxjs": "~7.8.0", + "tslib": "^2.3.0", + "zone.js": "~0.12.0", "@ionic/angular": "^6.0.0", "@ionic/core": "^6.0.0", - "@angular/platform-browser-dynamic": "17.3.2" + "ionicons": "8.0.13" + }, + "devDependencies": { + "@angular-devkit/build-angular": "^15.0.0", + "@angular/cli": "^15.0.0", + "@angular/compiler-cli": "^15.0.0", + "typescript": "~4.9.4" } } diff --git a/static/code/stackblitz/v6/angular/tsconfig.app.json b/static/code/stackblitz/v6/angular/tsconfig.app.json new file mode 100644 index 00000000000..f69a169a56e --- /dev/null +++ b/static/code/stackblitz/v6/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/v6/html/index.html b/static/code/stackblitz/v6/html/index.html index 8a59c2afc0f..fb14e96ba98 100644 --- a/static/code/stackblitz/v6/html/index.html +++ b/static/code/stackblitz/v6/html/index.html @@ -1,14 +1,19 @@ - + + - - + + + + Ionic App {{ TEMPLATE }} + + diff --git a/static/code/stackblitz/v6/html/index.withContent.html b/static/code/stackblitz/v6/html/index.withContent.html index 3cd31834675..404344868cd 100644 --- a/static/code/stackblitz/v6/html/index.withContent.html +++ b/static/code/stackblitz/v6/html/index.withContent.html @@ -1,8 +1,11 @@ - + + - - + + + + Ionic App @@ -11,6 +14,8 @@ {{ TEMPLATE }} + + diff --git a/static/code/stackblitz/v6/html/package.json b/static/code/stackblitz/v6/html/package.json index b6dbee21fd0..113d2325e30 100644 --- a/static/code/stackblitz/v6/html/package.json +++ b/static/code/stackblitz/v6/html/package.json @@ -1,5 +1,20 @@ { + "name": "html-starter", + "private": true, + "type": "module", + "main": "index.ts", + "scripts": { + "dev": "vite", + "build": "vite build", + "start": "vite preview" + }, "dependencies": { - "@ionic/core": "^6.0.0" + "@ionic/core": "^6.0.0", + "ionicons": "8.0.13" + }, + "devDependencies": { + "typescript": "^5.0.0", + "vite": "^7.0.0", + "vite-plugin-static-copy": "^3.1.0" } } diff --git a/static/code/stackblitz/v6/html/tsconfig.json b/static/code/stackblitz/v6/html/tsconfig.json new file mode 100644 index 00000000000..0b999e71b8e --- /dev/null +++ b/static/code/stackblitz/v6/html/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "baseUrl": "./", + "target": "esnext", + "module": "nodenext", + "moduleResolution": "nodenext", + "outDir": "dist", + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "lib": ["esnext", "dom"], + "resolveJsonModule": true, + "allowSyntheticDefaultImports": true, + "isolatedModules": true, + "types": ["node"] + }, + "include": ["src/**/*.ts"] +} diff --git a/static/code/stackblitz/v6/html/vite.config.ts b/static/code/stackblitz/v6/html/vite.config.ts new file mode 100644 index 00000000000..3e356ac9e72 --- /dev/null +++ b/static/code/stackblitz/v6/html/vite.config.ts @@ -0,0 +1,18 @@ +import { defineConfig } from 'vite'; +import { viteStaticCopy } from 'vite-plugin-static-copy'; + +export default defineConfig({ + optimizeDeps: { + exclude: ['@ionic/core'], + }, + plugins: [ + viteStaticCopy({ + targets: [ + { + src: 'node_modules/ionicons/dist/svg/*', + dest: 'svg' + } + ] + }) + ] +}); diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md index 4db53a836a9..1f697a67f80 100644 --- a/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md +++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md @@ -1,10 +1,13 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonicModule], + standalone: true, }) export class ExampleComponent {} ``` diff --git a/static/usage/v6/accordion/customization/icons/angular.md b/static/usage/v6/accordion/customization/icons/angular/example_component_html.md similarity index 100% rename from static/usage/v6/accordion/customization/icons/angular.md rename to static/usage/v6/accordion/customization/icons/angular/example_component_html.md diff --git a/static/usage/v6/accordion/customization/icons/angular/example_component_ts.md b/static/usage/v6/accordion/customization/icons/angular/example_component_ts.md new file mode 100644 index 00000000000..03ea4c8b466 --- /dev/null +++ b/static/usage/v6/accordion/customization/icons/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { caretDownCircle } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, +}) +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({ caretDownCircle }); + } +} +``` diff --git a/static/usage/v6/accordion/customization/icons/index.md b/static/usage/v6/accordion/customization/icons/index.md index 691d4b933b1..86dfd7e51bf 100644 --- a/static/usage/v6/accordion/customization/icons/index.md +++ b/static/usage/v6/accordion/customization/icons/index.md @@ -1,17 +1,29 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; `, + imports: [IonicModule], + standalone: true, }) export class PageOneComponent { component = PageTwoComponent; diff --git a/static/usage/v6/back-button/basic/angular/page_two_component_ts.md b/static/usage/v6/back-button/basic/angular/page_two_component_ts.md index b2cda11d2a8..8aee8320f42 100644 --- a/static/usage/v6/back-button/basic/angular/page_two_component_ts.md +++ b/static/usage/v6/back-button/basic/angular/page_two_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-page-two', @@ -17,6 +18,8 @@ import { Component } from '@angular/core';

Use the back button to navigate to the previous page.

`, + imports: [IonicModule], + standalone: true, }) export class PageTwoComponent {} ``` diff --git a/static/usage/v6/back-button/basic/index.md b/static/usage/v6/back-button/basic/index.md index 6c29748fe6f..5015c2398fe 100644 --- a/static/usage/v6/back-button/basic/index.md +++ b/static/usage/v6/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/v6/back-button/custom/angular/app_module_ts.md b/static/usage/v6/back-button/custom/angular/app_module_ts.md deleted file mode 100644 index 3c20b511446..00000000000 --- a/static/usage/v6/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/v6/back-button/custom/angular/example_component_ts.md b/static/usage/v6/back-button/custom/angular/example_component_ts.md index b123a4858ce..a19973fd10a 100644 --- a/static/usage/v6/back-button/custom/angular/example_component_ts.md +++ b/static/usage/v6/back-button/custom/angular/example_component_ts.md @@ -1,11 +1,14 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; import { PageOneComponent } from './page-one.component'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { component = PageOneComponent; diff --git a/static/usage/v6/back-button/custom/angular/page_one_component_ts.md b/static/usage/v6/back-button/custom/angular/page_one_component_ts.md index d181c5a5268..14bc20480f7 100644 --- a/static/usage/v6/back-button/custom/angular/page_one_component_ts.md +++ b/static/usage/v6/back-button/custom/angular/page_one_component_ts.md @@ -1,6 +1,6 @@ ```ts import { Component } from '@angular/core'; - +import { IonicModule } from '@ionic/angular'; import { PageTwoComponent } from './page-two.component'; @Component({ @@ -19,6 +19,8 @@ import { PageTwoComponent } from './page-two.component'; `, + imports: [IonicModule], + standalone: true, }) export class PageOneComponent { component = PageTwoComponent; diff --git a/static/usage/v6/back-button/custom/angular/page_two_component_ts.md b/static/usage/v6/back-button/custom/angular/page_two_component_ts.md index 05a1bd64d79..f2025503ad2 100644 --- a/static/usage/v6/back-button/custom/angular/page_two_component_ts.md +++ b/static/usage/v6/back-button/custom/angular/page_two_component_ts.md @@ -1,5 +1,8 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { caretBack } from 'ionicons/icons'; @Component({ selector: 'app-page-two', @@ -17,6 +20,17 @@ import { Component } from '@angular/core';

Use the back button to navigate to the previous page.

`, + imports: [IonicModule], + standalone: true, }) -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/v6/back-button/custom/index.md b/static/usage/v6/back-button/custom/index.md index 30f58541ecb..eb31312d9fe 100644 --- a/static/usage/v6/back-button/custom/index.md +++ b/static/usage/v6/back-button/custom/index.md @@ -1,8 +1,8 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.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'; @@ -19,14 +19,18 @@ import vue_page_two from './vue/page_two_vue.md'; diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/javascript.md b/static/usage/v6/breadcrumbs/icons/custom-separators/javascript/index_html.md similarity index 100% rename from static/usage/v6/breadcrumbs/icons/custom-separators/javascript.md rename to static/usage/v6/breadcrumbs/icons/custom-separators/javascript/index_html.md diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/javascript/index_ts.md b/static/usage/v6/breadcrumbs/icons/custom-separators/javascript/index_ts.md new file mode 100644 index 00000000000..b7e5f1d2a1c --- /dev/null +++ b/static/usage/v6/breadcrumbs/icons/custom-separators/javascript/index_ts.md @@ -0,0 +1,29 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { arrowForwardCircle } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +addIcons({ arrowForwardCircle }); + +defineCustomElements(); +``` diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/angular.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/angular/example_component_html.md similarity index 100% rename from static/usage/v6/breadcrumbs/icons/icons-on-items/angular.md rename to static/usage/v6/breadcrumbs/icons/icons-on-items/angular/example_component_html.md diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md new file mode 100644 index 00000000000..c553dcb693c --- /dev/null +++ b/static/usage/v6/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { home, flash, camera, film } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, +}) +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({ home, flash, camera, film }); + } +} +``` diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md index 0f2e9ac47cc..5349c168953 100644 --- a/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md +++ b/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md @@ -1,13 +1,30 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/javascript/index_html.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/javascript/index_html.md new file mode 100644 index 00000000000..a31d718242d --- /dev/null +++ b/static/usage/v6/breadcrumbs/icons/icons-on-items/javascript/index_html.md @@ -0,0 +1,41 @@ +```html +Icons at Start + + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +Icons at End + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +``` diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/javascript/index_ts.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/javascript/index_ts.md new file mode 100644 index 00000000000..81e2f85f56c --- /dev/null +++ b/static/usage/v6/breadcrumbs/icons/icons-on-items/javascript/index_ts.md @@ -0,0 +1,29 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { home, flash, camera, film } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +addIcons({ home, flash, camera, film }); + +defineCustomElements(); +``` diff --git a/static/usage/v6/buttons/types/angular.md b/static/usage/v6/buttons/types/angular/example_component_html.md similarity index 100% rename from static/usage/v6/buttons/types/angular.md rename to static/usage/v6/buttons/types/angular/example_component_html.md diff --git a/static/usage/v6/buttons/types/angular/example_component_ts.md b/static/usage/v6/buttons/types/angular/example_component_ts.md new file mode 100644 index 00000000000..f962e4d49ce --- /dev/null +++ b/static/usage/v6/buttons/types/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, +}) +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({ personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create }); + } +} +``` diff --git a/static/usage/v6/buttons/types/index.md b/static/usage/v6/buttons/types/index.md index f0bee55af1c..f3059adc7dd 100644 --- a/static/usage/v6/buttons/types/index.md +++ b/static/usage/v6/buttons/types/index.md @@ -1,13 +1,30 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v6/buttons/types/javascript.md b/static/usage/v6/buttons/types/javascript/index_html.md similarity index 100% rename from static/usage/v6/buttons/types/javascript.md rename to static/usage/v6/buttons/types/javascript/index_html.md diff --git a/static/usage/v6/buttons/types/javascript/index_ts.md b/static/usage/v6/buttons/types/javascript/index_ts.md new file mode 100644 index 00000000000..f5fba4b55e8 --- /dev/null +++ b/static/usage/v6/buttons/types/javascript/index_ts.md @@ -0,0 +1,29 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +addIcons({ personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create }); + +defineCustomElements(); +``` diff --git a/static/usage/v6/content/scroll-events/angular/example_component_ts.md b/static/usage/v6/content/scroll-events/angular/example_component_ts.md index 7e3f7625f57..9926796477b 100644 --- a/static/usage/v6/content/scroll-events/angular/example_component_ts.md +++ b/static/usage/v6/content/scroll-events/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; -import { ScrollDetail } from '@ionic/angular'; +import { IonicModule, ScrollDetail } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { handleScrollStart() { diff --git a/static/usage/v6/content/scroll-methods/angular/example_component_ts.md b/static/usage/v6/content/scroll-methods/angular/example_component_ts.md index 1975fe3b341..01a79eec0ce 100644 --- a/static/usage/v6/content/scroll-methods/angular/example_component_ts.md +++ b/static/usage/v6/content/scroll-methods/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component, ViewChild } from '@angular/core'; -import { IonContent } from '@ionic/angular'; +import { IonicModule, IonContent } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { @ViewChild(IonContent) content: IonContent; diff --git a/static/usage/v6/datetime/date-constraints/advanced/angular/example_component_ts.md b/static/usage/v6/datetime/date-constraints/advanced/angular/example_component_ts.md index 3021390e188..af65d2cf671 100644 --- a/static/usage/v6/datetime/date-constraints/advanced/angular/example_component_ts.md +++ b/static/usage/v6/datetime/date-constraints/advanced/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { isWeekday = (dateString: string) => { diff --git a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md index 4ca93b85f44..56dff055f84 100644 --- a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md +++ b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { highlightedDates = [ diff --git a/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md index 60f9c700d05..33986b357d3 100644 --- a/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md +++ b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { highlightedDates = (isoString) => { diff --git a/static/usage/v6/icon/basic/angular.md b/static/usage/v6/icon/basic/angular/example_component_html.md similarity index 100% rename from static/usage/v6/icon/basic/angular.md rename to static/usage/v6/icon/basic/angular/example_component_html.md diff --git a/static/usage/v6/icon/basic/angular/example_component_ts.md b/static/usage/v6/icon/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..c6a25a5dc11 --- /dev/null +++ b/static/usage/v6/icon/basic/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, +}) +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({ logoIonic }); + } +} +``` diff --git a/static/usage/v6/icon/basic/index.md b/static/usage/v6/icon/basic/index.md index 6b3a026b7dc..aa8ae0b3b47 100644 --- a/static/usage/v6/icon/basic/index.md +++ b/static/usage/v6/icon/basic/index.md @@ -1,8 +1,31 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; - + diff --git a/static/usage/v6/icon/basic/javascript.md b/static/usage/v6/icon/basic/javascript/index_html.md similarity index 100% rename from static/usage/v6/icon/basic/javascript.md rename to static/usage/v6/icon/basic/javascript/index_html.md diff --git a/static/usage/v6/icon/basic/javascript/index_ts.md b/static/usage/v6/icon/basic/javascript/index_ts.md new file mode 100644 index 00000000000..b4b3a93f923 --- /dev/null +++ b/static/usage/v6/icon/basic/javascript/index_ts.md @@ -0,0 +1,29 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { logoIonic } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +addIcons({ logoIonic }); + +defineCustomElements(); +``` diff --git a/static/usage/v6/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/v6/infinite-scroll/basic/angular/example_component_ts.md index 390ba6b75f1..934a39abea7 100644 --- a/static/usage/v6/infinite-scroll/basic/angular/example_component_ts.md +++ b/static/usage/v6/infinite-scroll/basic/angular/example_component_ts.md @@ -1,12 +1,13 @@ ```tsx import { Component, OnInit } from '@angular/core'; - -import { InfiniteScrollCustomEvent } from '@ionic/angular'; +import { CommonModule } from '@angular/common'; +import { IonicModule, InfiniteScrollCustomEvent } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - styleUrls: ['example.component.scss'], + imports: [CommonModule, IonicModule], + standalone: true, }) export class ExampleComponent implements OnInit { items = []; diff --git a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md index 415ed5dba8b..40bb589e5bf 100644 --- a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md +++ b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md @@ -1,12 +1,14 @@ ```tsx import { Component, OnInit } from '@angular/core'; - -import { InfiniteScrollCustomEvent } from '@ionic/angular'; +import { CommonModule } from '@angular/common'; +import { IonicModule, InfiniteScrollCustomEvent } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - styleUrls: ['example.component.scss'], + styleUrls: ['example.component.css'], + imports: [CommonModule, IonicModule], + standalone: true, }) export class ExampleComponent implements OnInit { items = []; diff --git a/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md index 415ed5dba8b..2ec1adfcafe 100644 --- a/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md +++ b/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md @@ -1,12 +1,13 @@ ```tsx import { Component, OnInit } from '@angular/core'; - -import { InfiniteScrollCustomEvent } from '@ionic/angular'; +import { CommonModule } from '@angular/common'; +import { IonicModule, InfiniteScrollCustomEvent } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - styleUrls: ['example.component.scss'], + imports: [CommonModule, IonicModule], + standalone: true, }) export class ExampleComponent implements OnInit { items = []; diff --git a/static/usage/v6/input/filtering/angular/example_component_ts.md b/static/usage/v6/input/filtering/angular/example_component_ts.md index b0fc6a3331f..8f083cadfe4 100644 --- a/static/usage/v6/input/filtering/angular/example_component_ts.md +++ b/static/usage/v6/input/filtering/angular/example_component_ts.md @@ -1,10 +1,13 @@ ```ts import { Component, ViewChild } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; import type { IonInput } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { inputModel = ''; diff --git a/static/usage/v6/item/buttons/angular.md b/static/usage/v6/item/buttons/angular/example_component_html.md similarity index 100% rename from static/usage/v6/item/buttons/angular.md rename to static/usage/v6/item/buttons/angular/example_component_html.md diff --git a/static/usage/v6/item/buttons/angular/example_component_ts.md b/static/usage/v6/item/buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..03e8f4a7d5f --- /dev/null +++ b/static/usage/v6/item/buttons/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { home, star, navigate } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, +}) +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({ home, star, navigate }); + } +} +``` diff --git a/static/usage/v6/item/buttons/index.md b/static/usage/v6/item/buttons/index.md index d46337926bc..70652dc8252 100644 --- a/static/usage/v6/item/buttons/index.md +++ b/static/usage/v6/item/buttons/index.md @@ -1,8 +1,30 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; - + diff --git a/static/usage/v6/item/buttons/javascript.md b/static/usage/v6/item/buttons/javascript/index_html.md similarity index 100% rename from static/usage/v6/item/buttons/javascript.md rename to static/usage/v6/item/buttons/javascript/index_html.md diff --git a/static/usage/v6/item/buttons/javascript/index_ts.md b/static/usage/v6/item/buttons/javascript/index_ts.md new file mode 100644 index 00000000000..b615ca86d4f --- /dev/null +++ b/static/usage/v6/item/buttons/javascript/index_ts.md @@ -0,0 +1,29 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { home, star, navigate } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +addIcons({ home, star, navigate }); + +defineCustomElements(); +``` diff --git a/static/usage/v6/item/counter/angular/example_component_ts.md b/static/usage/v6/item/counter/angular/example_component_ts.md index 2c08dc06fc2..9eb78aca216 100644 --- a/static/usage/v6/item/counter/angular/example_component_ts.md +++ b/static/usage/v6/item/counter/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { customCounterFormatter(inputLength: number, maxLength: number) { diff --git a/static/usage/v6/item/icons/angular.md b/static/usage/v6/item/icons/angular/example_component_html.md similarity index 100% rename from static/usage/v6/item/icons/angular.md rename to static/usage/v6/item/icons/angular/example_component_html.md diff --git a/static/usage/v6/item/icons/angular/example_component_ts.md b/static/usage/v6/item/icons/angular/example_component_ts.md new file mode 100644 index 00000000000..a21d45a08a0 --- /dev/null +++ b/static/usage/v6/item/icons/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { informationCircle, star } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, +}) +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({ informationCircle, star }); + } +} +``` diff --git a/static/usage/v6/item/icons/index.md b/static/usage/v6/item/icons/index.md index 97b18d73650..d5675259023 100644 --- a/static/usage/v6/item/icons/index.md +++ b/static/usage/v6/item/icons/index.md @@ -1,8 +1,30 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; - + diff --git a/static/usage/v6/item/icons/javascript.md b/static/usage/v6/item/icons/javascript/index_html.md similarity index 100% rename from static/usage/v6/item/icons/javascript.md rename to static/usage/v6/item/icons/javascript/index_html.md diff --git a/static/usage/v6/item/icons/javascript/index_ts.md b/static/usage/v6/item/icons/javascript/index_ts.md new file mode 100644 index 00000000000..f1edf662596 --- /dev/null +++ b/static/usage/v6/item/icons/javascript/index_ts.md @@ -0,0 +1,29 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { informationCircle, star } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +addIcons({ informationCircle, star }); + +defineCustomElements(); +``` diff --git a/static/usage/v6/item/lines/angular.md b/static/usage/v6/item/lines/angular/example_component_html.md similarity index 100% rename from static/usage/v6/item/lines/angular.md rename to static/usage/v6/item/lines/angular/example_component_html.md diff --git a/static/usage/v6/item/lines/angular/example_component_ts.md b/static/usage/v6/item/lines/angular/example_component_ts.md new file mode 100644 index 00000000000..91fbb1dde73 --- /dev/null +++ b/static/usage/v6/item/lines/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { star, informationCircle } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, +}) +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({ star, informationCircle }); + } +} +``` diff --git a/static/usage/v6/item/lines/index.md b/static/usage/v6/item/lines/index.md index f1ccef30f7e..e53d3cb01b8 100644 --- a/static/usage/v6/item/lines/index.md +++ b/static/usage/v6/item/lines/index.md @@ -1,8 +1,30 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; - + diff --git a/static/usage/v6/item/lines/javascript.md b/static/usage/v6/item/lines/javascript/index_html.md similarity index 100% rename from static/usage/v6/item/lines/javascript.md rename to static/usage/v6/item/lines/javascript/index_html.md diff --git a/static/usage/v6/item/lines/javascript/index_ts.md b/static/usage/v6/item/lines/javascript/index_ts.md new file mode 100644 index 00000000000..0de176a28d0 --- /dev/null +++ b/static/usage/v6/item/lines/javascript/index_ts.md @@ -0,0 +1,29 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { star, informationCircle } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +addIcons({ star, informationCircle }); + +defineCustomElements(); +``` diff --git a/static/usage/v6/loading/controller/angular/example_component_ts.md b/static/usage/v6/loading/controller/angular/example_component_ts.md index bd4b86eef29..71f74d8ae87 100644 --- a/static/usage/v6/loading/controller/angular/example_component_ts.md +++ b/static/usage/v6/loading/controller/angular/example_component_ts.md @@ -1,11 +1,13 @@ ```ts import { Component } from '@angular/core'; -import { LoadingController } from '@ionic/angular'; +import { IonicModule, LoadingController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { constructor(private loadingCtrl: LoadingController) {} diff --git a/static/usage/v6/loading/spinners/angular/example_component_ts.md b/static/usage/v6/loading/spinners/angular/example_component_ts.md index 7e522cb3a64..709a0271ab4 100644 --- a/static/usage/v6/loading/spinners/angular/example_component_ts.md +++ b/static/usage/v6/loading/spinners/angular/example_component_ts.md @@ -1,11 +1,13 @@ ```ts import { Component } from '@angular/core'; -import { LoadingController } from '@ionic/angular'; +import { IonicModule, LoadingController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { constructor(private loadingCtrl: LoadingController) {} diff --git a/static/usage/v6/loading/theming/angular/example_component_ts.md b/static/usage/v6/loading/theming/angular/example_component_ts.md index 800335c91ad..2a09a263895 100644 --- a/static/usage/v6/loading/theming/angular/example_component_ts.md +++ b/static/usage/v6/loading/theming/angular/example_component_ts.md @@ -1,11 +1,13 @@ ```ts import { Component } from '@angular/core'; -import { LoadingController } from '@ionic/angular'; +import { IonicModule, LoadingController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { constructor(private loadingCtrl: LoadingController) {} diff --git a/static/usage/v6/menu/type/angular/example_component_html.md b/static/usage/v6/menu/type/angular/example_component_html.md index fd995d7a32f..738aca5079b 100644 --- a/static/usage/v6/menu/type/angular/example_component_html.md +++ b/static/usage/v6/menu/type/angular/example_component_html.md @@ -20,7 +20,7 @@

Select an overlay type:

- + overlay diff --git a/static/usage/v6/menu/type/angular/example_component_ts.md b/static/usage/v6/menu/type/angular/example_component_ts.md index 5f03ec13b76..92b2db0db56 100644 --- a/static/usage/v6/menu/type/angular/example_component_ts.md +++ b/static/usage/v6/menu/type/angular/example_component_ts.md @@ -1,9 +1,13 @@ ```ts import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [FormsModule, IonicModule], + standalone: true, }) export class ExampleComponent { menuType: string = 'overlay'; diff --git a/static/usage/v6/modal/can-dismiss/boolean/angular/example_component_ts.md b/static/usage/v6/modal/can-dismiss/boolean/angular/example_component_ts.md index b13c147dc2d..be3736f5953 100644 --- a/static/usage/v6/modal/can-dismiss/boolean/angular/example_component_ts.md +++ b/static/usage/v6/modal/can-dismiss/boolean/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; -import { CheckboxCustomEvent } from '@ionic/angular'; +import { IonicModule, CheckboxCustomEvent } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { canDismiss = false; diff --git a/static/usage/v6/modal/can-dismiss/function/angular/example_component_ts.md b/static/usage/v6/modal/can-dismiss/function/angular/example_component_ts.md index a62465cfee3..be1dbbdeab2 100644 --- a/static/usage/v6/modal/can-dismiss/function/angular/example_component_ts.md +++ b/static/usage/v6/modal/can-dismiss/function/angular/example_component_ts.md @@ -1,11 +1,13 @@ ```ts import { Component } from '@angular/core'; -import { ActionSheetController } from '@ionic/angular'; +import { IonicModule, ActionSheetController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { presentingElement = undefined; diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md index 788b9a14c0f..9f63c97689f 100644 --- a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md +++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { async canDismiss(data?: any, role?: string) { diff --git a/static/usage/v6/modal/card/basic/angular/example_component_ts.md b/static/usage/v6/modal/card/basic/angular/example_component_ts.md index 5a28a156a32..db193258411 100644 --- a/static/usage/v6/modal/card/basic/angular/example_component_ts.md +++ b/static/usage/v6/modal/card/basic/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { // Typically referenced to your ion-router-outlet diff --git a/static/usage/v6/modal/controller/angular/app_module_ts.md b/static/usage/v6/modal/controller/angular/app_module_ts.md deleted file mode 100644 index e9e4f00dff3..00000000000 --- a/static/usage/v6/modal/controller/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 { ModalExampleComponent } from './modal-example.component'; - -@NgModule({ - imports: [BrowserModule, FormsModule, IonicModule.forRoot({})], - declarations: [AppComponent, ExampleComponent, ModalExampleComponent], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` diff --git a/static/usage/v6/modal/controller/angular/example_component_ts.md b/static/usage/v6/modal/controller/angular/example_component_ts.md index 920a2335257..f5f8f036b43 100644 --- a/static/usage/v6/modal/controller/angular/example_component_ts.md +++ b/static/usage/v6/modal/controller/angular/example_component_ts.md @@ -1,12 +1,14 @@ ```ts import { Component } from '@angular/core'; -import { ModalController } from '@ionic/angular'; +import { IonicModule, ModalController } from '@ionic/angular'; import { ModalExampleComponent } from './modal-example.component'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { message = 'This modal example uses the modalController to present and dismiss modals.'; diff --git a/static/usage/v6/modal/controller/angular/modal-example_component_ts.md b/static/usage/v6/modal/controller/angular/modal-example_component_ts.md index 621996015b4..95e82b92d37 100644 --- a/static/usage/v6/modal/controller/angular/modal-example_component_ts.md +++ b/static/usage/v6/modal/controller/angular/modal-example_component_ts.md @@ -1,11 +1,13 @@ ```ts import { Component } from '@angular/core'; - -import { ModalController } from '@ionic/angular'; +import { FormsModule } from '@angular/forms'; +import { IonicModule, ModalController } from '@ionic/angular'; @Component({ selector: 'app-modal-example', templateUrl: 'modal-example.component.html', + imports: [FormsModule, IonicModule], + standalone: true, }) export class ModalExampleComponent { name: string; diff --git a/static/usage/v6/modal/controller/index.md b/static/usage/v6/modal/controller/index.md index 2f1d5c9b961..fa08d9ba1be 100644 --- a/static/usage/v6/modal/controller/index.md +++ b/static/usage/v6/modal/controller/index.md @@ -6,7 +6,6 @@ import react from './react.md'; import vue_example from './vue/example_vue.md'; import vue_modal from './vue/modal_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'; @@ -29,7 +28,6 @@ import angular_modal_example_component_html from './angular/modal-example_compon 'src/app/example.component.ts': angular_example_component_ts, 'src/app/modal-example.component.html': angular_modal_example_component_html, 'src/app/modal-example.component.ts': angular_modal_example_component_ts, - 'src/app/app.module.ts': angular_app_module_ts, }, }, }} diff --git a/static/usage/v6/modal/inline/basic/angular/example_component_ts.md b/static/usage/v6/modal/inline/basic/angular/example_component_ts.md index a21954ec5f1..df4455acb0e 100644 --- a/static/usage/v6/modal/inline/basic/angular/example_component_ts.md +++ b/static/usage/v6/modal/inline/basic/angular/example_component_ts.md @@ -1,11 +1,14 @@ ```ts import { Component, ViewChild } from '@angular/core'; -import { IonModal } from '@ionic/angular'; +import { FormsModule } from '@angular/forms'; +import { IonicModule, IonModal } from '@ionic/angular'; import { OverlayEventDetail } from '@ionic/core/components'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [FormsModule, IonicModule], + standalone: true, }) export class ExampleComponent { @ViewChild(IonModal) modal: IonModal; diff --git a/static/usage/v6/modal/inline/is-open/angular/example_component_ts.md b/static/usage/v6/modal/inline/is-open/angular/example_component_ts.md index 321577939a9..97d3759e62d 100644 --- a/static/usage/v6/modal/inline/is-open/angular/example_component_ts.md +++ b/static/usage/v6/modal/inline/is-open/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { isModalOpen = false; diff --git a/static/usage/v6/modal/sheet/background-content/angular/example_component_ts.md b/static/usage/v6/modal/sheet/background-content/angular/example_component_ts.md index e132d2f84c7..06f99831b44 100644 --- a/static/usage/v6/modal/sheet/background-content/angular/example_component_ts.md +++ b/static/usage/v6/modal/sheet/background-content/angular/example_component_ts.md @@ -1,10 +1,13 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { count = 0; diff --git a/static/usage/v6/modal/styling/animations/angular/example_component_ts.md b/static/usage/v6/modal/styling/animations/angular/example_component_ts.md index c4a743b2745..539abae59e1 100644 --- a/static/usage/v6/modal/styling/animations/angular/example_component_ts.md +++ b/static/usage/v6/modal/styling/animations/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; -import { AnimationController } from '@ionic/angular'; +import { IonicModule, AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { constructor(private animationCtrl: AnimationController) {} diff --git a/static/usage/v6/nav/nav-link/angular/app_module_ts.md b/static/usage/v6/nav/nav-link/angular/app_module_ts.md deleted file mode 100644 index d3b8b44f6ce..00000000000 --- a/static/usage/v6/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/v6/nav/nav-link/angular/example_component_ts.md b/static/usage/v6/nav/nav-link/angular/example_component_ts.md index b123a4858ce..9f9e53a29f6 100644 --- a/static/usage/v6/nav/nav-link/angular/example_component_ts.md +++ b/static/usage/v6/nav/nav-link/angular/example_component_ts.md @@ -1,11 +1,13 @@ ```ts import { Component } from '@angular/core'; - +import { IonicModule } from '@ionic/angular'; import { PageOneComponent } from './page-one.component'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { component = PageOneComponent; diff --git a/static/usage/v6/nav/nav-link/angular/page_one_component_ts.md b/static/usage/v6/nav/nav-link/angular/page_one_component_ts.md index 06c42b342cf..5e4f0c982a5 100644 --- a/static/usage/v6/nav/nav-link/angular/page_one_component_ts.md +++ b/static/usage/v6/nav/nav-link/angular/page_one_component_ts.md @@ -1,6 +1,6 @@ ```ts import { Component } from '@angular/core'; - +import { IonicModule } from '@ionic/angular'; import { PageTwoComponent } from './page-two.component'; @Component({ @@ -18,6 +18,8 @@ import { PageTwoComponent } from './page-two.component'; `, + imports: [IonicModule], + standalone: true, }) export class PageOneComponent { component = PageTwoComponent; diff --git a/static/usage/v6/nav/nav-link/angular/page_three_component_ts.md b/static/usage/v6/nav/nav-link/angular/page_three_component_ts.md index d9e95ed7218..63df48e0f60 100644 --- a/static/usage/v6/nav/nav-link/angular/page_three_component_ts.md +++ b/static/usage/v6/nav/nav-link/angular/page_three_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-page-one', @@ -16,6 +17,8 @@ import { Component } from '@angular/core';

Page Three

`, + imports: [IonicModule], + standalone: true, }) export class PageThreeComponent {} ``` diff --git a/static/usage/v6/nav/nav-link/angular/page_two_component_ts.md b/static/usage/v6/nav/nav-link/angular/page_two_component_ts.md index d6edd90a593..854e62b431a 100644 --- a/static/usage/v6/nav/nav-link/angular/page_two_component_ts.md +++ b/static/usage/v6/nav/nav-link/angular/page_two_component_ts.md @@ -1,6 +1,6 @@ ```ts import { Component } from '@angular/core'; - +import { IonicModule } from '@ionic/angular'; import { PageThreeComponent } from './page-three.component'; @Component({ @@ -23,6 +23,8 @@ import { PageThreeComponent } from './page-three.component'; `, + imports: [IonicModule], + standalone: true, }) export class PageTwoComponent { component = PageThreeComponent; diff --git a/static/usage/v6/nav/nav-link/index.md b/static/usage/v6/nav/nav-link/index.md index 2fdeadbbbdd..0f81390a599 100644 --- a/static/usage/v6/nav/nav-link/index.md +++ b/static/usage/v6/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/v6/picker/multiple-column/angular/example_component_ts.md b/static/usage/v6/picker/multiple-column/angular/example_component_ts.md index ce535b1391a..e8eb28ea20b 100644 --- a/static/usage/v6/picker/multiple-column/angular/example_component_ts.md +++ b/static/usage/v6/picker/multiple-column/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; -import { PickerController } from '@ionic/angular'; +import { IonicModule, PickerController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { constructor(private pickerCtrl: PickerController) {} diff --git a/static/usage/v6/picker/single-column/angular/example_component_ts.md b/static/usage/v6/picker/single-column/angular/example_component_ts.md index 849da3f0f16..6a5c043ff10 100644 --- a/static/usage/v6/picker/single-column/angular/example_component_ts.md +++ b/static/usage/v6/picker/single-column/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; -import { PickerController } from '@ionic/angular'; +import { IonicModule, PickerController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { constructor(private pickerCtrl: PickerController) {} diff --git a/static/usage/v6/popover/customization/positioning/angular/example_component_ts.md b/static/usage/v6/popover/customization/positioning/angular/example_component_ts.md index 4db53a836a9..1f697a67f80 100644 --- a/static/usage/v6/popover/customization/positioning/angular/example_component_ts.md +++ b/static/usage/v6/popover/customization/positioning/angular/example_component_ts.md @@ -1,10 +1,13 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonicModule], + standalone: true, }) export class ExampleComponent {} ``` diff --git a/static/usage/v6/popover/presenting/controller/angular/app_module_ts.md b/static/usage/v6/popover/presenting/controller/angular/app_module_ts.md deleted file mode 100644 index 887ca3acf89..00000000000 --- a/static/usage/v6/popover/presenting/controller/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 { PopoverComponent } from './popover.component'; - -@NgModule({ - imports: [BrowserModule, FormsModule, IonicModule.forRoot({})], - declarations: [AppComponent, ExampleComponent, PopoverComponent], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` diff --git a/static/usage/v6/popover/presenting/controller/angular/example_component_ts.md b/static/usage/v6/popover/presenting/controller/angular/example_component_ts.md index bf0e0165d78..2a438b4d8df 100644 --- a/static/usage/v6/popover/presenting/controller/angular/example_component_ts.md +++ b/static/usage/v6/popover/presenting/controller/angular/example_component_ts.md @@ -1,13 +1,15 @@ ```ts import { Component, ViewChild } from '@angular/core'; -import { PopoverController } from '@ionic/angular'; +import { IonicModule, PopoverController } from '@ionic/angular'; import { PopoverComponent } from './popover.component'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { roleMsg = ''; diff --git a/static/usage/v6/popover/presenting/controller/angular/popover_component_ts.md b/static/usage/v6/popover/presenting/controller/angular/popover_component_ts.md index 2900a32240c..657697d0a88 100644 --- a/static/usage/v6/popover/presenting/controller/angular/popover_component_ts.md +++ b/static/usage/v6/popover/presenting/controller/angular/popover_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; -import { PopoverController } from '@ionic/angular'; +import { IonicModule, PopoverController } from '@ionic/angular'; @Component({ selector: 'app-popover', templateUrl: 'popover.component.html', + imports: [IonicModule], + standalone: true, }) export class PopoverComponent {} ``` diff --git a/static/usage/v6/popover/presenting/controller/index.md b/static/usage/v6/popover/presenting/controller/index.md index 4906017d235..e51317d21fe 100644 --- a/static/usage/v6/popover/presenting/controller/index.md +++ b/static/usage/v6/popover/presenting/controller/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_popover_component_html from './angular/popover_component_html.md'; import angular_popover_component_ts from './angular/popover_component_ts.md'; -import angular_app_module from './angular/app_module_ts.md'; ) { diff --git a/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md index 7a5c867f791..9373dc6e267 100644 --- a/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md +++ b/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md @@ -1,13 +1,25 @@ ```ts import { Component } from '@angular/core'; - -import { ItemReorderEventDetail } from '@ionic/angular'; +import { IonicModule, ItemReorderEventDetail } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { pizza } from 'ionicons/icons'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) 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({ pizza }); + } + handleReorder(ev: CustomEvent) { // The `from` and `to` properties contain the index of the item // when the drag started and ended, respectively diff --git a/static/usage/v6/reorder/custom-icon/index.md b/static/usage/v6/reorder/custom-icon/index.md index 4a5490803bf..239b8cf04a4 100644 --- a/static/usage/v6/reorder/custom-icon/index.md +++ b/static/usage/v6/reorder/custom-icon/index.md @@ -1,6 +1,7 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; import react from './react.md'; import vue from './vue.md'; @@ -10,7 +11,12 @@ import angular_example_component_html from './angular/example_component_html.md' ) { diff --git a/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md index af0ff643b26..e4604f61e72 100644 --- a/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md +++ b/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md @@ -1,11 +1,13 @@ ```ts import { Component } from '@angular/core'; -import { ItemReorderEventDetail } from '@ionic/angular'; +import { IonicModule, ItemReorderEventDetail } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { public isDisabled = true; diff --git a/static/usage/v6/reorder/updating-data/angular/example_component_ts.md b/static/usage/v6/reorder/updating-data/angular/example_component_ts.md index 11e2f59d553..de676e5e783 100644 --- a/static/usage/v6/reorder/updating-data/angular/example_component_ts.md +++ b/static/usage/v6/reorder/updating-data/angular/example_component_ts.md @@ -1,11 +1,13 @@ ```ts import { Component } from '@angular/core'; - -import { ItemReorderEventDetail } from '@ionic/angular'; +import { CommonModule } from '@angular/common'; +import { IonicModule, ItemReorderEventDetail } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [CommonModule, IonicModule], + standalone: true, }) export class ExampleComponent { items = [1, 2, 3, 4, 5]; diff --git a/static/usage/v6/reorder/wrapper/angular/example_component_ts.md b/static/usage/v6/reorder/wrapper/angular/example_component_ts.md index 7a5c867f791..a92743c0a9f 100644 --- a/static/usage/v6/reorder/wrapper/angular/example_component_ts.md +++ b/static/usage/v6/reorder/wrapper/angular/example_component_ts.md @@ -1,11 +1,13 @@ ```ts import { Component } from '@angular/core'; -import { ItemReorderEventDetail } from '@ionic/angular'; +import { IonicModule, ItemReorderEventDetail } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { handleReorder(ev: CustomEvent) { diff --git a/static/usage/v6/searchbar/cancel-button/angular.md b/static/usage/v6/searchbar/cancel-button/angular/example_component_html.md similarity index 100% rename from static/usage/v6/searchbar/cancel-button/angular.md rename to static/usage/v6/searchbar/cancel-button/angular/example_component_html.md diff --git a/static/usage/v6/searchbar/cancel-button/angular/example_component_ts.md b/static/usage/v6/searchbar/cancel-button/angular/example_component_ts.md new file mode 100644 index 00000000000..b396d9b6408 --- /dev/null +++ b/static/usage/v6/searchbar/cancel-button/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { trash } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, +}) +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/v6/searchbar/cancel-button/index.md b/static/usage/v6/searchbar/cancel-button/index.md index 4ad2c30b731..6c738ecd396 100644 --- a/static/usage/v6/searchbar/cancel-button/index.md +++ b/static/usage/v6/searchbar/cancel-button/index.md @@ -1,13 +1,30 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v6/searchbar/cancel-button/javascript.md b/static/usage/v6/searchbar/cancel-button/javascript/index_html.md similarity index 100% rename from static/usage/v6/searchbar/cancel-button/javascript.md rename to static/usage/v6/searchbar/cancel-button/javascript/index_html.md diff --git a/static/usage/v6/searchbar/cancel-button/javascript/index_ts.md b/static/usage/v6/searchbar/cancel-button/javascript/index_ts.md new file mode 100644 index 00000000000..9a6d57f2016 --- /dev/null +++ b/static/usage/v6/searchbar/cancel-button/javascript/index_ts.md @@ -0,0 +1,29 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { trash } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +addIcons({ trash }); + +defineCustomElements(); +``` diff --git a/static/usage/v6/searchbar/clear-button/angular.md b/static/usage/v6/searchbar/clear-button/angular/example_component_html.md similarity index 100% rename from static/usage/v6/searchbar/clear-button/angular.md rename to static/usage/v6/searchbar/clear-button/angular/example_component_html.md diff --git a/static/usage/v6/searchbar/clear-button/angular/example_component_ts.md b/static/usage/v6/searchbar/clear-button/angular/example_component_ts.md new file mode 100644 index 00000000000..bf918edf656 --- /dev/null +++ b/static/usage/v6/searchbar/clear-button/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { trashBin } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, +}) +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/v6/searchbar/clear-button/index.md b/static/usage/v6/searchbar/clear-button/index.md index aa821ec048b..caafef0ac51 100644 --- a/static/usage/v6/searchbar/clear-button/index.md +++ b/static/usage/v6/searchbar/clear-button/index.md @@ -1,13 +1,30 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v6/searchbar/clear-button/javascript.md b/static/usage/v6/searchbar/clear-button/javascript/index_html.md similarity index 100% rename from static/usage/v6/searchbar/clear-button/javascript.md rename to static/usage/v6/searchbar/clear-button/javascript/index_html.md diff --git a/static/usage/v6/searchbar/clear-button/javascript/index_ts.md b/static/usage/v6/searchbar/clear-button/javascript/index_ts.md new file mode 100644 index 00000000000..f78dec30492 --- /dev/null +++ b/static/usage/v6/searchbar/clear-button/javascript/index_ts.md @@ -0,0 +1,29 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { trashBin } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +addIcons({ trashBin }); + +defineCustomElements(); +``` diff --git a/static/usage/v6/searchbar/debounce/angular/example_component_ts.md b/static/usage/v6/searchbar/debounce/angular/example_component_ts.md index 1017ac602f9..43f4f0e1b8c 100644 --- a/static/usage/v6/searchbar/debounce/angular/example_component_ts.md +++ b/static/usage/v6/searchbar/debounce/angular/example_component_ts.md @@ -1,9 +1,13 @@ ```ts import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [CommonModule, IonicModule], + standalone: true, }) export class ExampleComponent { public data = [ diff --git a/static/usage/v6/searchbar/search-icon/angular.md b/static/usage/v6/searchbar/search-icon/angular/example_component_html.md similarity index 100% rename from static/usage/v6/searchbar/search-icon/angular.md rename to static/usage/v6/searchbar/search-icon/angular/example_component_html.md diff --git a/static/usage/v6/searchbar/search-icon/angular/example_component_ts.md b/static/usage/v6/searchbar/search-icon/angular/example_component_ts.md new file mode 100644 index 00000000000..f5d54536679 --- /dev/null +++ b/static/usage/v6/searchbar/search-icon/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { searchCircle } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, +}) +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/v6/searchbar/search-icon/index.md b/static/usage/v6/searchbar/search-icon/index.md index c3611623923..68a38d43970 100644 --- a/static/usage/v6/searchbar/search-icon/index.md +++ b/static/usage/v6/searchbar/search-icon/index.md @@ -1,8 +1,30 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; - + diff --git a/static/usage/v6/searchbar/search-icon/javascript.md b/static/usage/v6/searchbar/search-icon/javascript/index_html.md similarity index 100% rename from static/usage/v6/searchbar/search-icon/javascript.md rename to static/usage/v6/searchbar/search-icon/javascript/index_html.md diff --git a/static/usage/v6/searchbar/search-icon/javascript/index_ts.md b/static/usage/v6/searchbar/search-icon/javascript/index_ts.md new file mode 100644 index 00000000000..5dee4220727 --- /dev/null +++ b/static/usage/v6/searchbar/search-icon/javascript/index_ts.md @@ -0,0 +1,29 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { searchCircle } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +addIcons({ searchCircle }); + +defineCustomElements(); +``` diff --git a/static/usage/v6/segment-button/layout/angular.md b/static/usage/v6/segment-button/layout/angular/example_component_html.md similarity index 100% rename from static/usage/v6/segment-button/layout/angular.md rename to static/usage/v6/segment-button/layout/angular/example_component_html.md diff --git a/static/usage/v6/segment-button/layout/angular/example_component_ts.md b/static/usage/v6/segment-button/layout/angular/example_component_ts.md new file mode 100644 index 00000000000..19b0271e7f9 --- /dev/null +++ b/static/usage/v6/segment-button/layout/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { call, heart, pin } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, +}) +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({ call, heart, pin }); + } +} +``` diff --git a/static/usage/v6/segment-button/layout/index.md b/static/usage/v6/segment-button/layout/index.md index 5ddcc6a17b8..89cffab91fa 100644 --- a/static/usage/v6/segment-button/layout/index.md +++ b/static/usage/v6/segment-button/layout/index.md @@ -1,13 +1,30 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v6/segment-button/layout/javascript.md b/static/usage/v6/segment-button/layout/javascript/index_html.md similarity index 100% rename from static/usage/v6/segment-button/layout/javascript.md rename to static/usage/v6/segment-button/layout/javascript/index_html.md diff --git a/static/usage/v6/segment-button/layout/javascript/index_ts.md b/static/usage/v6/segment-button/layout/javascript/index_ts.md new file mode 100644 index 00000000000..84770b3fa12 --- /dev/null +++ b/static/usage/v6/segment-button/layout/javascript/index_ts.md @@ -0,0 +1,29 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { call, heart, pin } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +addIcons({ call, heart, pin }); + +defineCustomElements(); +``` diff --git a/static/usage/v6/segment/scrollable/angular.md b/static/usage/v6/segment/scrollable/angular/example_component_html.md similarity index 100% rename from static/usage/v6/segment/scrollable/angular.md rename to static/usage/v6/segment/scrollable/angular/example_component_html.md diff --git a/static/usage/v6/segment/scrollable/angular/example_component_ts.md b/static/usage/v6/segment/scrollable/angular/example_component_ts.md new file mode 100644 index 00000000000..cc606fc1f10 --- /dev/null +++ b/static/usage/v6/segment/scrollable/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { home, heart, pin, star, call, globe, basket, barbell, trash, person } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, +}) +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({ home, heart, pin, star, call, globe, basket, barbell, trash, person }); + } +} +``` diff --git a/static/usage/v6/segment/scrollable/index.md b/static/usage/v6/segment/scrollable/index.md index de206ca652a..0babe824bd0 100644 --- a/static/usage/v6/segment/scrollable/index.md +++ b/static/usage/v6/segment/scrollable/index.md @@ -1,13 +1,30 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v6/segment/scrollable/javascript.md b/static/usage/v6/segment/scrollable/javascript/index_html.md similarity index 100% rename from static/usage/v6/segment/scrollable/javascript.md rename to static/usage/v6/segment/scrollable/javascript/index_html.md diff --git a/static/usage/v6/segment/scrollable/javascript/index_ts.md b/static/usage/v6/segment/scrollable/javascript/index_ts.md new file mode 100644 index 00000000000..2d69d3a2375 --- /dev/null +++ b/static/usage/v6/segment/scrollable/javascript/index_ts.md @@ -0,0 +1,29 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { home, heart, pin, star, call, globe, basket, barbell, trash, person } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +addIcons({ home, heart, pin, star, call, globe, basket, barbell, trash, person }); + +defineCustomElements(); +``` diff --git a/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_ts.md index 18c0b1eaa1b..d0d524be6ff 100644 --- a/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_ts.md +++ b/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_ts.md @@ -1,9 +1,13 @@ ```ts import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [CommonModule, IonicModule], + standalone: true, }) export class ExampleComponent { logs: string[] = []; diff --git a/static/usage/v6/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v6/select/customization/interface-options/angular/example_component_ts.md index c3f34d0adaf..78596828750 100644 --- a/static/usage/v6/select/customization/interface-options/angular/example_component_ts.md +++ b/static/usage/v6/select/customization/interface-options/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { customAlertOptions = { diff --git a/static/usage/v6/select/customization/styling-select/angular/example_component_ts.md b/static/usage/v6/select/customization/styling-select/angular/example_component_ts.md index 4db53a836a9..1f697a67f80 100644 --- a/static/usage/v6/select/customization/styling-select/angular/example_component_ts.md +++ b/static/usage/v6/select/customization/styling-select/angular/example_component_ts.md @@ -1,10 +1,13 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonicModule], + standalone: true, }) export class ExampleComponent {} ``` diff --git a/static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_ts.md index 76fa7e51e49..8bdabd81816 100644 --- a/static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_ts.md +++ b/static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_ts.md @@ -1,9 +1,13 @@ ```ts import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [CommonModule, IonicModule], + standalone: true, }) export class ExampleComponent { currentFood = undefined; diff --git a/static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_ts.md index afbd5f454cd..7b44b96fdd3 100644 --- a/static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_ts.md +++ b/static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_ts.md @@ -1,9 +1,13 @@ ```ts import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [CommonModule, IonicModule], + standalone: true, }) export class ExampleComponent { currentFood = undefined; diff --git a/static/usage/v6/select/typeahead/angular/app_module_ts.md b/static/usage/v6/select/typeahead/angular/app_module_ts.md deleted file mode 100644 index 0fa58037717..00000000000 --- a/static/usage/v6/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/v6/select/typeahead/angular/example_component_ts.md b/static/usage/v6/select/typeahead/angular/example_component_ts.md index ded6fa60b0f..ed634b81620 100644 --- a/static/usage/v6/select/typeahead/angular/example_component_ts.md +++ b/static/usage/v6/select/typeahead/angular/example_component_ts.md @@ -1,11 +1,14 @@ ```ts import { Component, ViewChild } from '@angular/core'; -import { IonModal } from '@ionic/angular'; +import { IonicModule, IonModal } from '@ionic/angular'; +import { TypeaheadComponent } from './typeahead.component'; import { Item } from './types'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule, TypeaheadComponent], + standalone: true, }) export class ExampleComponent { @ViewChild('modal', { static: true }) modal!: IonModal; diff --git a/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md index 9bd21f1b404..9a3e5674c17 100644 --- a/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md +++ b/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md @@ -1,11 +1,14 @@ ```ts -import { Component, Input, Output, EventEmitter } from '@angular/core'; -import type { OnInit } from '@angular/core'; +import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { IonicModule } from '@ionic/angular'; import { Item } from './types'; @Component({ selector: 'app-typeahead', templateUrl: 'typeahead.component.html', + imports: [CommonModule, IonicModule], + standalone: true, }) export class TypeaheadComponent implements OnInit { @Input() items: Item[] = []; diff --git a/static/usage/v6/select/typeahead/index.md b/static/usage/v6/select/typeahead/index.md index aa76c597de1..bd7317bc117 100644 --- a/static/usage/v6/select/typeahead/index.md +++ b/static/usage/v6/select/typeahead/index.md @@ -10,7 +10,6 @@ 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'; @@ -41,7 +40,6 @@ import angular_types_ts from './angular/angular_types_ts.md'; 'src/app/example.component.ts': angular_example_component_ts, 'src/app/typeahead.component.html': angular_modal_example_component_html, 'src/app/typeahead.component.ts': angular_modal_example_component_ts, - 'src/app/app.module.ts': angular_app_module_ts, 'src/app/types.ts': angular_types_ts, }, }, diff --git a/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md index 8423962a3e9..4a23226e859 100644 --- a/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md +++ b/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md @@ -1,10 +1,14 @@ ```ts import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [CommonModule, IonicModule], + standalone: true, }) export class ExampleComponent { public loaded = false; diff --git a/static/usage/v6/tabs/router/angular/app_component_html.md b/static/usage/v6/tabs/router/angular/app_component_html.md deleted file mode 100644 index 7636539f28a..00000000000 --- a/static/usage/v6/tabs/router/angular/app_component_html.md +++ /dev/null @@ -1,3 +0,0 @@ -```html - -``` diff --git a/static/usage/v6/tabs/router/angular/app_module_ts.md b/static/usage/v6/tabs/router/angular/app_module_ts.md deleted file mode 100644 index e36b8c6316e..00000000000 --- a/static/usage/v6/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/v6/tabs/router/angular/app_routes_ts.md b/static/usage/v6/tabs/router/angular/app_routes_ts.md new file mode 100644 index 00000000000..55cd79f38f3 --- /dev/null +++ b/static/usage/v6/tabs/router/angular/app_routes_ts.md @@ -0,0 +1,33 @@ +```ts +import { Routes } from '@angular/router'; + +export const routes: Routes = [ + { + path: '', + loadComponent: () => import('./example.component').then((m) => m.ExampleComponent), + children: [ + { + path: 'home', + loadComponent: () => import('./home/home-page.component').then((m) => m.HomePageComponent), + }, + { + path: 'radio', + loadComponent: () => import('./radio/radio-page.component').then((m) => m.RadioPageComponent), + }, + { + path: 'library', + loadComponent: () => import('./library/library-page.component').then((m) => m.LibraryPageComponent), + }, + { + path: 'search', + loadComponent: () => import('./search/search-page.component').then((m) => m.SearchPageComponent), + }, + { + path: '', + redirectTo: '/home', + pathMatch: 'full', + }, + ], + }, +]; +``` diff --git a/static/usage/v6/tabs/router/angular/app_routing_module_ts.md b/static/usage/v6/tabs/router/angular/app_routing_module_ts.md deleted file mode 100644 index 7ff1067030f..00000000000 --- a/static/usage/v6/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/v6/tabs/router/angular/example_component_html.md b/static/usage/v6/tabs/router/angular/example_component_html.md index 67be68b564c..1600255c79f 100644 --- a/static/usage/v6/tabs/router/angular/example_component_html.md +++ b/static/usage/v6/tabs/router/angular/example_component_html.md @@ -1,19 +1,20 @@ ```html + - + Listen Now - + Radio - + Library - + Search diff --git a/static/usage/v6/tabs/router/angular/example_component_ts.md b/static/usage/v6/tabs/router/angular/example_component_ts.md new file mode 100644 index 00000000000..5050049f431 --- /dev/null +++ b/static/usage/v6/tabs/router/angular/example_component_ts.md @@ -0,0 +1,25 @@ +```ts +import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; +import { IonicModule } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { playCircle, library, radio, search } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [CommonModule, IonicModule, RouterModule], + standalone: true, +}) +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({ playCircle, library, radio, search }); + } +} +``` diff --git a/static/usage/v6/tabs/router/angular/home_page_component_ts.md b/static/usage/v6/tabs/router/angular/home_page_component_ts.md index 9e2ef0a3e8c..e49329ee43c 100644 --- a/static/usage/v6/tabs/router/angular/home_page_component_ts.md +++ b/static/usage/v6/tabs/router/angular/home_page_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-home-page', templateUrl: './home-page.component.html', + imports: [IonicModule], + standalone: true, }) export class HomePageComponent {} ``` diff --git a/static/usage/v6/tabs/router/angular/home_page_module_ts.md b/static/usage/v6/tabs/router/angular/home_page_module_ts.md deleted file mode 100644 index 2a1fb15b460..00000000000 --- a/static/usage/v6/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/v6/tabs/router/angular/library_page_component_ts.md b/static/usage/v6/tabs/router/angular/library_page_component_ts.md index f5a92a4868a..2af4a195441 100644 --- a/static/usage/v6/tabs/router/angular/library_page_component_ts.md +++ b/static/usage/v6/tabs/router/angular/library_page_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-library-page', templateUrl: './library-page.component.html', + imports: [IonicModule], + standalone: true, }) export class LibraryPageComponent {} ``` diff --git a/static/usage/v6/tabs/router/angular/library_page_module_ts.md b/static/usage/v6/tabs/router/angular/library_page_module_ts.md deleted file mode 100644 index 8e2ab48cf39..00000000000 --- a/static/usage/v6/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/v6/tabs/router/angular/radio_page_component_ts.md b/static/usage/v6/tabs/router/angular/radio_page_component_ts.md index d29209c00dd..14a2e0cb1f1 100644 --- a/static/usage/v6/tabs/router/angular/radio_page_component_ts.md +++ b/static/usage/v6/tabs/router/angular/radio_page_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-radio-page', templateUrl: './radio-page.component.html', + imports: [IonicModule], + standalone: true, }) export class RadioPageComponent {} ``` diff --git a/static/usage/v6/tabs/router/angular/radio_page_module_ts.md b/static/usage/v6/tabs/router/angular/radio_page_module_ts.md deleted file mode 100644 index f50a0088632..00000000000 --- a/static/usage/v6/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/v6/tabs/router/angular/search_page_component_ts.md b/static/usage/v6/tabs/router/angular/search_page_component_ts.md index bd6e723d332..f3f06f35c3b 100644 --- a/static/usage/v6/tabs/router/angular/search_page_component_ts.md +++ b/static/usage/v6/tabs/router/angular/search_page_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-search-page', templateUrl: './search-page.component.html', + imports: [IonicModule], + standalone: true, }) export class SearchPageComponent {} ``` diff --git a/static/usage/v6/tabs/router/angular/search_page_module_ts.md b/static/usage/v6/tabs/router/angular/search_page_module_ts.md deleted file mode 100644 index a1d599c5d9b..00000000000 --- a/static/usage/v6/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/v6/tabs/router/index.md b/static/usage/v6/tabs/router/index.md index 7acff190150..fff1f621e8c 100644 --- a/static/usage/v6/tabs/router/index.md +++ b/static/usage/v6/tabs/router/index.md @@ -1,29 +1,24 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.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 javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_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'; +import app_routes_ts from './angular/app_routes_ts.md'; import angular_global_css from './angular/global_css.md'; import vue_app_vue from './vue/app_vue.md'; @@ -44,26 +39,26 @@ import react_search_page_tsx from './react/search_page_tsx.md'; + diff --git a/static/usage/v6/text/basic/javascript.md b/static/usage/v6/text/basic/javascript/index_html.md similarity index 100% rename from static/usage/v6/text/basic/javascript.md rename to static/usage/v6/text/basic/javascript/index_html.md diff --git a/static/usage/v6/text/basic/javascript/index_ts.md b/static/usage/v6/text/basic/javascript/index_ts.md new file mode 100644 index 00000000000..e539d87b01d --- /dev/null +++ b/static/usage/v6/text/basic/javascript/index_ts.md @@ -0,0 +1,29 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { warning } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +addIcons({ warning }); + +defineCustomElements(); +``` diff --git a/static/usage/v6/toast/buttons/angular/example_component_ts.md b/static/usage/v6/toast/buttons/angular/example_component_ts.md index faf1f33ed5b..bea8016b6a5 100644 --- a/static/usage/v6/toast/buttons/angular/example_component_ts.md +++ b/static/usage/v6/toast/buttons/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; -import { ToastController } from '@ionic/angular'; +import { IonicModule, ToastController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { handlerMessage = ''; diff --git a/static/usage/v6/toast/icon/angular/example_component_ts.md b/static/usage/v6/toast/icon/angular/example_component_ts.md index d72053bd950..fb37272cbdd 100644 --- a/static/usage/v6/toast/icon/angular/example_component_ts.md +++ b/static/usage/v6/toast/icon/angular/example_component_ts.md @@ -1,13 +1,24 @@ ```ts import { Component } from '@angular/core'; -import { ToastController } from '@ionic/angular'; +import { IonicModule, ToastController } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { globe } from 'ionicons/icons'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { - constructor(private toastController: ToastController) {} + constructor(private toastController: ToastController) { + /** + * 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({ globe }); + } async presentToast() { const toast = await this.toastController.create({ diff --git a/static/usage/v6/toast/icon/index.md b/static/usage/v6/toast/icon/index.md index d636c54d905..8790ff7ecb4 100644 --- a/static/usage/v6/toast/icon/index.md +++ b/static/usage/v6/toast/icon/index.md @@ -1,6 +1,7 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; import react from './react.md'; import vue from './vue.md'; @@ -11,7 +12,12 @@ import angular_example_component_ts from './angular/example_component_ts.md'; version="6" devicePreview code={{ - javascript, + javascript: { + files: { + 'index.html': javascript_index_html, + 'index.ts': javascript_index_ts, + }, + }, react, vue, angular: { diff --git a/static/usage/v6/toast/icon/javascript.md b/static/usage/v6/toast/icon/javascript/index_html.md similarity index 100% rename from static/usage/v6/toast/icon/javascript.md rename to static/usage/v6/toast/icon/javascript/index_html.md diff --git a/static/usage/v6/toast/icon/javascript/index_ts.md b/static/usage/v6/toast/icon/javascript/index_ts.md new file mode 100644 index 00000000000..4d9dc46e53a --- /dev/null +++ b/static/usage/v6/toast/icon/javascript/index_ts.md @@ -0,0 +1,31 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; +import { toastController } from '@ionic/core'; +import { addIcons } from 'ionicons'; +import { globe } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +addIcons({ globe }); + +defineCustomElements(); + +(window as any).toastController = toastController; +``` diff --git a/static/usage/v6/toast/layout/angular/example_component_ts.md b/static/usage/v6/toast/layout/angular/example_component_ts.md index 01636b04a97..3ccb8ba19ea 100644 --- a/static/usage/v6/toast/layout/angular/example_component_ts.md +++ b/static/usage/v6/toast/layout/angular/example_component_ts.md @@ -1,11 +1,12 @@ ```ts import { Component } from '@angular/core'; -import { ToastController } from '@ionic/angular'; -import type { ToastOptions } from '@ionic/angular'; +import { IonicModule, ToastController, ToastOptions } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { constructor(private toastController: ToastController) {} diff --git a/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md index db133a99f1e..95cfc01ba70 100644 --- a/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md +++ b/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; -import { ToastController } from '@ionic/angular'; +import { IonicModule, ToastController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { constructor(private toastController: ToastController) {} diff --git a/static/usage/v6/toast/theming/angular/example_component_ts.md b/static/usage/v6/toast/theming/angular/example_component_ts.md index 7f490b9bacc..254785b7736 100644 --- a/static/usage/v6/toast/theming/angular/example_component_ts.md +++ b/static/usage/v6/toast/theming/angular/example_component_ts.md @@ -1,10 +1,12 @@ ```ts import { Component } from '@angular/core'; -import { ToastController } from '@ionic/angular'; +import { IonicModule, ToastController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, }) export class ExampleComponent { constructor(private toastController: ToastController) {} diff --git a/static/usage/v6/toolbar/buttons/angular.md b/static/usage/v6/toolbar/buttons/angular/example_component_html.md similarity index 100% rename from static/usage/v6/toolbar/buttons/angular.md rename to static/usage/v6/toolbar/buttons/angular/example_component_html.md diff --git a/static/usage/v6/toolbar/buttons/angular/example_component_ts.md b/static/usage/v6/toolbar/buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..f962e4d49ce --- /dev/null +++ b/static/usage/v6/toolbar/buttons/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true, +}) +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({ personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create }); + } +} +``` diff --git a/static/usage/v6/toolbar/buttons/index.md b/static/usage/v6/toolbar/buttons/index.md index 2ac28550f9d..ad1b830f9f5 100644 --- a/static/usage/v6/toolbar/buttons/index.md +++ b/static/usage/v6/toolbar/buttons/index.md @@ -1,13 +1,30 @@ import Playground from '@site/src/components/global/Playground'; -import javascript from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v6/toolbar/buttons/javascript.md b/static/usage/v6/toolbar/buttons/javascript/index_html.md similarity index 100% rename from static/usage/v6/toolbar/buttons/javascript.md rename to static/usage/v6/toolbar/buttons/javascript/index_html.md diff --git a/static/usage/v6/toolbar/buttons/javascript/index_ts.md b/static/usage/v6/toolbar/buttons/javascript/index_ts.md new file mode 100644 index 00000000000..f5fba4b55e8 --- /dev/null +++ b/static/usage/v6/toolbar/buttons/javascript/index_ts.md @@ -0,0 +1,29 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +addIcons({ personCircle, search, ellipsisHorizontal, ellipsisVertical, helpCircle, star, create }); + +defineCustomElements(); +```