diff --git a/angular/test/testapp/README.md b/angular/test/testapp/README.md index 0e3fcecd0b..7252052970 100644 --- a/angular/test/testapp/README.md +++ b/angular/test/testapp/README.md @@ -2,9 +2,9 @@ This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.0. -## Development server +## Developing -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. +Run `npm run serve` to copy ionic and run a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. ## Code scaffolding diff --git a/angular/test/testapp/src/app/app-routing.module.ts b/angular/test/testapp/src/app/app-routing.module.ts index 38e7de49d2..c587cd4a72 100644 --- a/angular/test/testapp/src/app/app-routing.module.ts +++ b/angular/test/testapp/src/app/app-routing.module.ts @@ -11,6 +11,7 @@ const routes: Routes = [ { path: 'alert', loadChildren: './alert/alert.module#AlertModule' }, { path: 'actionSheet', loadChildren: './action-sheet/action-sheet.module#ActionSheetModule' }, { path: 'badge', loadChildren: './badge/badge.module#BadgeModule' }, + { path: 'button', loadChildren: './button/button.module#ButtonModule' }, { path: 'card', loadChildren: './card/card.module#CardModule' }, { path: 'content', loadChildren: './content/content.module#ContentModule' }, { path: 'toast', loadChildren: './toast/toast.module#ToastModule' }, diff --git a/angular/test/testapp/src/app/badge/badge-page.component.ts b/angular/test/testapp/src/app/badge/badge-page.component.ts index 1f12e66504..4c8bad8625 100644 --- a/angular/test/testapp/src/app/badge/badge-page.component.ts +++ b/angular/test/testapp/src/app/badge/badge-page.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { Badge } from '@ionic/angular'; @Component({ @@ -74,7 +74,7 @@ import { Badge } from '@ionic/angular'; ` }) -export class BadgePageComponent { +export class BadgePageComponent implements OnInit { dynamicColor = 'primary'; @ViewChild(Badge) badge: Badge; diff --git a/angular/test/testapp/src/app/button/button-page.component.ts b/angular/test/testapp/src/app/button/button-page.component.ts new file mode 100644 index 0000000000..9d72a23516 --- /dev/null +++ b/angular/test/testapp/src/app/button/button-page.component.ts @@ -0,0 +1,49 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { Button } from '@ionic/angular'; + +@Component({ + selector: 'app-button-page', + template: ` + + + + Buttons + + + + Default + Primary + {{ dynamicColor }} + +

+ Disabled + Toggle Disabled +

+ + + ` +}) +export class ButtonPageComponent implements OnInit { + dynamicColor = 'primary'; + isDisabled = true; + + @ViewChild(Button) button: Button; + + ngOnInit() { + console.log(this.button); + } + + disableClick() { + console.log('Clicked disabled button'); + } + + toggleColor() { + if (this.dynamicColor === 'primary') { + this.dynamicColor = 'secondary'; + } else if (this.dynamicColor === 'secondary') { + this.dynamicColor = 'danger'; + } else { + this.dynamicColor = 'primary'; + } + } +} diff --git a/angular/test/testapp/src/app/button/button-routing.module.ts b/angular/test/testapp/src/app/button/button-routing.module.ts new file mode 100644 index 0000000000..e2c8de29f7 --- /dev/null +++ b/angular/test/testapp/src/app/button/button-routing.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { ButtonPageComponent } from './button-page.component'; + +const routes: Routes = [ + { path: '', component: ButtonPageComponent } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class ButtonRoutingModule { } diff --git a/angular/test/testapp/src/app/button/button.module.ts b/angular/test/testapp/src/app/button/button.module.ts new file mode 100644 index 0000000000..e59dbb5820 --- /dev/null +++ b/angular/test/testapp/src/app/button/button.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { IonicModule } from '@ionic/angular'; +import { ButtonPageComponent } from './button-page.component'; +import { ButtonRoutingModule } from './button-routing.module'; + +@NgModule({ + imports: [ + CommonModule, + ButtonRoutingModule, + IonicModule + ], + declarations: [ButtonPageComponent] +}) +export class ButtonModule { } diff --git a/angular/test/testapp/src/app/home-page/home-page.component.html b/angular/test/testapp/src/app/home-page/home-page.component.html index 973fc8d30e..035fd9d3ee 100644 --- a/angular/test/testapp/src/app/home-page/home-page.component.html +++ b/angular/test/testapp/src/app/home-page/home-page.component.html @@ -88,6 +88,9 @@
  • Badge Page
    • +
  • + Button Page +
  • Card Page
    • diff --git a/angular/test/testapp/src/index.html b/angular/test/testapp/src/index.html index e8a5c0472a..31a9e1dd54 100644 --- a/angular/test/testapp/src/index.html +++ b/angular/test/testapp/src/index.html @@ -7,6 +7,8 @@ + + diff --git a/angular/test/testapp/src/polyfills.ts b/angular/test/testapp/src/polyfills.ts index d310405a68..3823eb097c 100644 --- a/angular/test/testapp/src/polyfills.ts +++ b/angular/test/testapp/src/polyfills.ts @@ -14,11 +14,10 @@ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html */ -/*************************************************************************************************** - * BROWSER POLYFILLS - */ +// BROWSER POLYFILLS +// --------------------------------------------------------------------------------- -/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// IE9, IE10 and IE11 requires all of the following polyfills. // import 'core-js/es6/symbol'; // import 'core-js/es6/object'; // import 'core-js/es6/function'; @@ -40,41 +39,26 @@ /** IE10 and IE11 requires the following for the Reflect API. */ // import 'core-js/es6/reflect'; - -/** Evergreen browsers require these. **/ +// Evergreen browsers require these. // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. import 'core-js/es7/reflect'; - -/** - * Web Animations `@angular/platform-browser/animations` - * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. - * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). - **/ +// Required to support Web Animations `@angular/platform-browser/animations`. +// Needed for: All but Chrome, Firefox and Opera. https://caniuse.com/#feat=web-animation // import 'web-animations-js'; // Run `npm install --save web-animations-js`. +// Zone JS is required by Angular itself. +import 'zone.js/dist/zone'; // Included with Angular CLI. + +// APPLICATION IMPORTS +// ------------------------------------------------------------------------ + /** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 */ - - // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - - /* - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - */ -// (window as any).__Zone_enable_cross_context_check = true; - -/*************************************************************************************************** - * Zone JS is required by default for Angular itself. - */ -import 'zone.js/dist/zone'; // Included with Angular CLI. - - - -/*************************************************************************************************** - * APPLICATION IMPORTS +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. */ +// import 'intl/locale-data/jsonp/en';