From 7930d7450e85358460408970747c811b3a781da0 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 5 Oct 2023 10:53:45 -0400 Subject: [PATCH 1/3] add titles and document router behavior --- docs/angular/build-options.md | 67 +++++++++++++++++++++++++++++++---- 1 file changed, 61 insertions(+), 6 deletions(-) diff --git a/docs/angular/build-options.md b/docs/angular/build-options.md index 17d91a70970..7675571bf26 100644 --- a/docs/angular/build-options.md +++ b/docs/angular/build-options.md @@ -36,7 +36,7 @@ All Ionic imports should be imported from the `@ionic/angular/standalone` submod Ionic Angular needs to be configured when the Angular application calls `bootstrapApplication` using the `provideIonicAngular` function. Developers can pass any [IonicConfig](../developing/config#ionicconfig) values as an object in this function. Note that `provideIonicAngular` needs to be called even if no custom config is passed. -```typescript +```typescript title="main.ts" import { enableProdMode, importProvidersFrom } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { RouteReuseStrategy, provideRouter } from '@angular/router'; @@ -63,7 +63,7 @@ bootstrapApplication(AppComponent, { In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular/standalone` and passing them to `imports` for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array. -```typescript +```typescript title="home.page.ts" import { Component } from '@angular/core'; import { IonButton, IonContent } from '@ionic/angular/standalone'; @@ -87,7 +87,7 @@ We recommend calling `addIcons` in the Angular component `constructor` so the da For developers using Ionicons 7.2 or newer, passing only the SVG data will cause the string name to be automatically generated. -```typescript +```typescript title="home.page.ts" import { Component } from '@angular/core'; import { IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; @@ -113,6 +113,33 @@ export class HomePage { } ``` +**Routing** + +Developers who wish to use `routerLink`, `routerAction`, or `routerDirection` on Ionic components should import the `IonRouterLink` directive. Developers who wish to use these routing features on anchor (``) elements should import `IonRouterLinkWithHref` instead. + +```typescript title="home.page.ts" +import { Component } from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-home', + templateUrl: 'home.page.html', + styleUrls: ['home.page.scss'], + standalone: true, + imports: [ + IonButton, + RouterLink, // required to get base routerLink behavior for @angular/router + IonRouterLink // use IonRouterLinkWithHref if you are using an element instead + ], +}) +export class HomePage {} +``` + +```html title="home.page.html" +Go to Foo Page +``` + ### Usage with NgModule-based Applications :::caution @@ -123,7 +150,7 @@ All Ionic imports should be imported from the `@ionic/angular/standalone` submod Ionic Angular needs to be configured in the `providers` array of `app.module.ts` using the `provideIonicAngular` function. Developers can pass any [IonicConfig](../developing/config#ionicconfig) values as an object in this function. Note that `provideIonicAngular` needs to be called even if no custom config is passed. -```typescript +```typescript title="app.module.ts" import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; @@ -146,7 +173,7 @@ export class AppModule {} In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular/standalone` and passing them to `imports` array in the Angular component's NgModule for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array. -```typescript +```typescript title="home.module.ts" import { NgModule } from '@angular/core'; import { IonButton, IonContent } from '@ionic/angular/standalone'; import { HomePage } from './home.page'; @@ -168,7 +195,7 @@ We recommend calling `addIcons` in the Angular component `constructor` so the da For developers using Ionicons 7.2 or newer, passing only the SVG data will cause the string name to be automatically generated. -```typescript +```typescript title="home.page.ts" import { Component } from '@angular/core'; import { addIcons } from 'ionicons'; import { logoIonic } from 'ionicons/icons'; @@ -191,6 +218,34 @@ export class HomePage { } ``` +**Routing** + +Developers who wish to use `routerLink`, `routerAction`, or `routerDirection` on Ionic components should import the `IonRouterLink` directive. Developers who wish to use these routing features on anchor (``) elements should import `IonRouterLinkWithHref` instead. + +```typescript title="home.module.ts" +import { NgModule } from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; +import { HomePage } from './home.page'; + +import { HomePageRoutingModule } from './home-routing.module'; + +@NgModule({ + imports: [ + IonButton, + RouterLink, // required to get base routerLink behavior for @angular/router + IonRouterLink, // use IonRouterLinkWithHref if you are using an element instead + HomePageRoutingModule + ], + declarations: [HomePage], +}) +export class HomePageModule {} +``` + +```html title="home.page.html" +Go to Foo Page +``` + ## Modules ### Overview From b289edf00d80bf2c6665bde773c86a20e6d0127c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 5 Oct 2023 10:57:56 -0400 Subject: [PATCH 2/3] update migration guide --- docs/angular/build-options.md | 38 +++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/docs/angular/build-options.md b/docs/angular/build-options.md index 7675571bf26..ce934250e8a 100644 --- a/docs/angular/build-options.md +++ b/docs/angular/build-options.md @@ -387,6 +387,26 @@ export class TestComponent { - } ``` +9. If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to import the `IonRouterLink` directive for Ionic components or `IonRouterLinkWithHref` directive for `` elements. + +```diff title="test.component.ts" +import { Component } from '@angular/core'; +- import { IonButton } from '@ionic/angular/standalone'; ++ import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], + standalone: true, + imports: [ + IonButton, ++ IonRouterLink + ], +}) +export class TestComponent {} +``` + ### NgModule-based Applications Follow these steps if your Angular application is still using the NgModule architecture, but you want to adopt Ionic UI components as standalone components now. @@ -512,3 +532,21 @@ export class TestComponentModule {} - "output": "./svg" - } ``` + +9. If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to import the `IonRouterLink` directive for Ionic components or `IonRouterLinkWithHref` directive for `` elements. + +```diff title="test.module.ts" +import { NgModule } from '@angular/core'; +import { TestComponent } from './test.component'; +- import { IonButton } from '@ionic/angular/standalone'; ++ import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; + +@NgModule({ + imports: [ + IonButton, ++ IonRouterLink, + ], + declarations: [TestComponent] +}) +``` + From 011ac8855437ca9e8250e980341859fdf21d8e5a Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 5 Oct 2023 10:58:04 -0400 Subject: [PATCH 3/3] lint --- docs/angular/build-options.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/docs/angular/build-options.md b/docs/angular/build-options.md index ce934250e8a..2705e5aa885 100644 --- a/docs/angular/build-options.md +++ b/docs/angular/build-options.md @@ -130,7 +130,7 @@ import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; imports: [ IonButton, RouterLink, // required to get base routerLink behavior for @angular/router - IonRouterLink // use IonRouterLinkWithHref if you are using an element instead + IonRouterLink, // use IonRouterLinkWithHref if you are using an element instead ], }) export class HomePage {} @@ -232,10 +232,10 @@ import { HomePageRoutingModule } from './home-routing.module'; @NgModule({ imports: [ - IonButton, + IonButton, RouterLink, // required to get base routerLink behavior for @angular/router IonRouterLink, // use IonRouterLinkWithHref if you are using an element instead - HomePageRoutingModule + HomePageRoutingModule, ], declarations: [HomePage], }) @@ -549,4 +549,3 @@ import { TestComponent } from './test.component'; declarations: [TestComponent] }) ``` -