Action Sheets display a set of options with the ability to confirm or cancel an action.
-Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information.
+Action Sheets display a set of options with the ability to confirm or cancel an action.
+Alerts are a great way to offer the user the ability to choose a specific action or list of actions.
@@ -36,13 +40,18 @@ Ionic apps are made of high-level building blocks called Components, which allowBadges are a small component that typically communicate a numerical value to the user.
Breadcrumbs are navigation items that are used to indicate where a user is on an app.
+Buttons let your users take action. They're an essential way to interact with and navigate through an app.
Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.
++ Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more. +
Content is the quintessential way to interact with and navigate through an app.
Date & time pickers are used to present an interface that makes it easy for users to select dates and times.
Floating action buttons are circular buttons that perform a primary action on a screen.
Beautifully designed icons for use in web, iOS, and Android apps.
-The grid is a powerful mobile-first system for building custom layouts.
Beautifully designed icons for use in web, iOS, and Android apps.
+Infinite scroll allows you to load new data as the user scrolls through your app.
Inputs provides a way for users to enter data in your app.
Items are an all-purpose UI container that can be used as part of a list.
++ Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. + Items can be swiped, deleted, reordered, edited, and more. +
Lists can display rows of information, such as a contact list, playlist, or menu.
Navigation is how users move between different pages in your app.
++ A collection of media components, including avatars, icons, images, and thumbnails, designed to enhance visual + content. +
Modals slide in and off screen to display a temporary UI and are often used for login or sign-up pages.
Navigation is how users move between different pages in your app.
+Popover provides an easy way to present information or options without changing contexts.
Radio inputs allow you to present a set of exclusive options.
Refresher provides pull-to-refresh functionality on a content component.
+Range sliders let users select a value by dragging a knob along a track.
Searchbar is used to search or filter items, usually from a toolbar.
+Refresher provides pull-to-refresh functionality on a content component.
Routing allows navigation based on the current path.
Searchbar is used to search or filter items, usually from a toolbar.
+Segments provide a set of exclusive buttons that can be used as a filter or view switcher.
Toast is used to show a notification over the top of an app's content. It can be temporary or dismissible.
+Toasts are subtle notifications that appear over your app's content without interrupting user interaction.
Toggles are an input for binary options, often used for options and switches.
Toolbars are used to house information and actions relating to your app.
-Toolbars are used to house information and actions relating to your app.
+Text is used to style or change the color of text within an application.
+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..ea06d82a402 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..821db5df9a4 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..2cfa4a7dfbd 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..69bde337fa3 100644 --- a/static/usage/v6/back-button/custom/index.md +++ b/static/usage/v6/back-button/custom/index.md @@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; -import angular_app_module_ts from './angular/app_module_ts.md'; import angular_example_component_html from './angular/example_component_html.md'; import angular_example_component_ts from './angular/example_component_ts.md'; import angular_page_one_component_ts from './angular/page_one_component_ts.md'; @@ -26,7 +25,6 @@ import vue_page_two from './vue/page_two_vue.md'; 'src/app/example.component.ts': angular_example_component_ts, 'src/app/page-one.component.ts': angular_page_one_component_ts, 'src/app/page-two.component.ts': angular_page_two_component_ts, - 'src/app/app.module.ts': angular_app_module_ts, }, }, react: { diff --git a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md index 8ae69af72a5..38122fed8e3 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md @@ -1,9 +1,12 @@ ```ts import { Component, ViewChild } from '@angular/core'; +import { IonicModule } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonicModule], + standalone: true }) export class ExampleComponent { maxBreadcrumbs = 4; diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md index aabfb29a821..22380950ca4 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md @@ -1,9 +1,13 @@ ```ts import { Component, ViewChild } 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 { @ViewChild('popover') popover; diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/angular.md b/static/usage/v6/breadcrumbs/icons/custom-separators/angular/example_component_html.md similarity index 100% rename from static/usage/v6/breadcrumbs/icons/custom-separators/angular.md rename to static/usage/v6/breadcrumbs/icons/custom-separators/angular/example_component_html.md diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/angular/example_component_ts.md b/static/usage/v6/breadcrumbs/icons/custom-separators/angular/example_component_ts.md new file mode 100644 index 00000000000..dcd6b853b2b --- /dev/null +++ b/static/usage/v6/breadcrumbs/icons/custom-separators/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 { arrowForwardCircle } 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({ arrowForwardCircle }); + } +} +``` \ No newline at end of file diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/index.md b/static/usage/v6/breadcrumbs/icons/custom-separators/index.md index a9305b79feb..83c578d8742 100644 --- a/static/usage/v6/breadcrumbs/icons/custom-separators/index.md +++ b/static/usage/v6/breadcrumbs/icons/custom-separators/index.md @@ -3,10 +3,21 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import react from './react.md'; import vue from './vue.md'; -import angular from './angular.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md';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..1950bbb5e86 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..88be5262118 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..93cc0c51c83 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..2721c21e79f 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..3fff7fde680 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..36e27e8ee33 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..c01da56515b 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..8a756a79d36 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..fb4be0a7328 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..8473fe29d8a 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..95789450895 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..370b2ed24e1 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..3b6dd80abc4 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';