├── Data-passng-btw-componet ├── .gitignore ├── angular.json ├── browserslist ├── capacitor.config.json ├── ionic.config.json ├── ionic.starter.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── component │ │ │ ├── component │ │ │ │ └── component.module.ts │ │ │ ├── profile-img │ │ │ │ ├── profile-img.component.html │ │ │ │ ├── profile-img.component.scss │ │ │ │ ├── profile-img.component.spec.ts │ │ │ │ └── profile-img.component.ts │ │ │ └── user-detail │ │ │ │ ├── user-detail.component.html │ │ │ │ ├── user-detail.component.scss │ │ │ │ ├── user-detail.component.spec.ts │ │ │ │ └── user-detail.component.ts │ │ ├── dummyJSON │ │ │ └── dummyJSON.ts │ │ ├── home │ │ │ ├── home-routing.module.ts │ │ │ ├── home.module.ts │ │ │ ├── home.page.html │ │ │ ├── home.page.scss │ │ │ ├── home.page.spec.ts │ │ │ └── home.page.ts │ │ └── second-page │ │ │ ├── second-page-routing.module.ts │ │ │ ├── second-page.module.ts │ │ │ ├── second-page.page.html │ │ │ ├── second-page.page.scss │ │ │ ├── second-page.page.spec.ts │ │ │ └── second-page.page.ts │ ├── assets │ │ ├── icon │ │ │ └── favicon.png │ │ ├── images │ │ │ └── user.jpg │ │ └── shapes.svg │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── global.scss │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── test.ts │ ├── theme │ │ └── variables.scss │ └── zone-flags.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Date-picker ├── .gitignore ├── angular.json ├── browserslist ├── capacitor.config.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── ionic.config.json ├── ionic.starter.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── pages │ │ │ └── date-picker │ │ │ ├── date-picker-routing.module.ts │ │ │ ├── date-picker.module.ts │ │ │ ├── date-picker.page.html │ │ │ ├── date-picker.page.scss │ │ │ ├── date-picker.page.spec.ts │ │ │ └── date-picker.page.ts │ ├── assets │ │ ├── icon │ │ │ └── favicon.png │ │ ├── images │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ └── user.jpg │ │ └── shapes.svg │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── global.scss │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── test.ts │ ├── theme │ │ └── variables.scss │ └── zone-flags.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── IOS-Assistive-Button in ionic 5 ├── .gitignore ├── angular.json ├── browserslist ├── capacitor.config.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── ionic.config.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── assistive-touch │ │ │ ├── assistive-touch-routing.module.ts │ │ │ ├── assistive-touch.module.ts │ │ │ ├── assistive-touch.page.html │ │ │ ├── assistive-touch.page.scss │ │ │ ├── assistive-touch.page.spec.ts │ │ │ └── assistive-touch.page.ts │ ├── assets │ │ ├── icon │ │ │ └── favicon.png │ │ ├── images │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ └── user.jpg │ │ ├── shapes.svg │ │ └── truck.json │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── global.scss │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── test.ts │ ├── theme │ │ └── variables.scss │ └── zone-flags.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Infinite-Scroll ├── .gitignore ├── angular.json ├── browserslist ├── capacitor.config.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── ionic.config.json ├── ionic.starter.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── pages │ │ │ └── infinite-scroll │ │ │ ├── infinite-scroll-routing.module.ts │ │ │ ├── infinite-scroll.module.ts │ │ │ ├── infinite-scroll.page.html │ │ │ ├── infinite-scroll.page.scss │ │ │ ├── infinite-scroll.page.spec.ts │ │ │ └── infinite-scroll.page.ts │ ├── assets │ │ ├── icon │ │ │ └── favicon.png │ │ ├── images │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ ├── ionic.png │ │ │ └── user.jpg │ │ └── shapes.svg │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── global.scss │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── test.ts │ ├── theme │ │ └── variables.scss │ └── zone-flags.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Ion-CheckBox ├── .gitignore ├── angular.json ├── browserslist ├── capacitor.config.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── ionic.config.json ├── ionic.starter.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── pages │ │ │ └── checkbox │ │ │ ├── checkbox-routing.module.ts │ │ │ ├── checkbox.module.ts │ │ │ ├── checkbox.page.html │ │ │ ├── checkbox.page.scss │ │ │ ├── checkbox.page.spec.ts │ │ │ └── checkbox.page.ts │ ├── assets │ │ ├── icon │ │ │ └── favicon.png │ │ ├── images │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ └── user.jpg │ │ └── shapes.svg │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── global.scss │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── test.ts │ ├── theme │ │ └── variables.scss │ └── zone-flags.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Ion-Modal ├── .gitignore ├── angular.json ├── browserslist ├── capacitor.config.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── ionic.config.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── components │ │ │ └── ion-modal-component │ │ │ │ ├── ion-modal-component.component.html │ │ │ │ ├── ion-modal-component.component.scss │ │ │ │ ├── ion-modal-component.component.spec.ts │ │ │ │ └── ion-modal-component.component.ts │ │ └── pages │ │ │ └── ion-modal │ │ │ ├── ion-modal-routing.module.ts │ │ │ ├── ion-modal.module.ts │ │ │ ├── ion-modal.page.html │ │ │ ├── ion-modal.page.scss │ │ │ ├── ion-modal.page.spec.ts │ │ │ └── ion-modal.page.ts │ ├── assets │ │ ├── icon │ │ │ └── favicon.png │ │ ├── images │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ └── user.jpg │ │ ├── shapes.svg │ │ └── truck.json │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── global.scss │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── test.ts │ ├── theme │ │ └── variables.scss │ └── zone-flags.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Ion-PopOver ├── .gitignore ├── angular.json ├── browserslist ├── capacitor.config.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── ionic.config.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── components │ │ │ └── popover-component │ │ │ │ ├── popover-component.component.html │ │ │ │ ├── popover-component.component.scss │ │ │ │ ├── popover-component.component.spec.ts │ │ │ │ └── popover-component.component.ts │ │ └── pages │ │ │ └── popover │ │ │ ├── popover-routing.module.ts │ │ │ ├── popover.module.ts │ │ │ ├── popover.page.html │ │ │ ├── popover.page.scss │ │ │ ├── popover.page.spec.ts │ │ │ └── popover.page.ts │ ├── assets │ │ ├── icon │ │ │ └── favicon.png │ │ ├── images │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ └── user.jpg │ │ ├── shapes.svg │ │ └── truck.json │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── global.scss │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── test.ts │ ├── theme │ │ └── variables.scss │ └── zone-flags.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Ion-Search ├── .gitignore ├── angular.json ├── browserslist ├── capacitor.config.json ├── ionic.config.json ├── ionic.starter.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── pages │ │ │ └── search │ │ │ ├── search-routing.module.ts │ │ │ ├── search.module.ts │ │ │ ├── search.page.html │ │ │ ├── search.page.scss │ │ │ ├── search.page.spec.ts │ │ │ └── search.page.ts │ ├── assets │ │ ├── icon │ │ │ └── favicon.png │ │ ├── images │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ └── user.jpg │ │ └── shapes.svg │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── global.scss │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── test.ts │ ├── theme │ │ └── variables.scss │ └── zone-flags.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Ion-Segment ├── .gitignore ├── angular.json ├── browserslist ├── capacitor.config.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── ionic.config.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── pages │ │ │ └── segments │ │ │ ├── segments-routing.module.ts │ │ │ ├── segments.module.ts │ │ │ ├── segments.page.html │ │ │ ├── segments.page.scss │ │ │ ├── segments.page.spec.ts │ │ │ └── segments.page.ts │ ├── assets │ │ ├── icon │ │ │ └── favicon.png │ │ └── shapes.svg │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── global.scss │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── test.ts │ ├── theme │ │ └── variables.scss │ └── zone-flags.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Ion-action-sheet ├── .gitignore ├── angular.json ├── browserslist ├── capacitor.config.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── ionic.config.json ├── ionic.starter.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── pages │ │ │ └── action-sheet │ │ │ ├── action-sheet-routing.module.ts │ │ │ ├── action-sheet.module.ts │ │ │ ├── action-sheet.page.html │ │ │ ├── action-sheet.page.scss │ │ │ ├── action-sheet.page.spec.ts │ │ │ └── action-sheet.page.ts │ ├── assets │ │ ├── icon │ │ │ └── favicon.png │ │ ├── images │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ └── user.jpg │ │ └── shapes.svg │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── global.scss │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── test.ts │ ├── theme │ │ └── variables.scss │ └── zone-flags.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Ion-alert ├── .gitignore ├── angular.json ├── browserslist ├── capacitor.config.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── ionic.config.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── alert │ │ │ ├── alert-routing.module.ts │ │ │ ├── alert.module.ts │ │ │ ├── alert.page.html │ │ │ ├── alert.page.scss │ │ │ ├── alert.page.spec.ts │ │ │ └── alert.page.ts │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── assets │ │ ├── icon │ │ │ └── favicon.png │ │ ├── images │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ └── user.jpg │ │ ├── shapes.svg │ │ └── truck.json │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── global.scss │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── test.ts │ ├── theme │ │ └── variables.scss │ └── zone-flags.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Ion-fab ├── .gitignore ├── angular.json ├── browserslist ├── capacitor.config.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── ionic.config.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── pages │ │ │ └── fab-button │ │ │ ├── fab-button-routing.module.ts │ │ │ ├── fab-button.module.ts │ │ │ ├── fab-button.page.html │ │ │ ├── fab-button.page.scss │ │ │ ├── fab-button.page.spec.ts │ │ │ └── fab-button.page.ts │ ├── assets │ │ ├── icon │ │ │ └── favicon.png │ │ ├── images │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ └── user.jpg │ │ ├── shapes.svg │ │ └── truck.json │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── global.scss │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── test.ts │ ├── theme │ │ └── variables.scss │ └── zone-flags.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Ion-menu ├── .gitignore ├── angular.json ├── browserslist ├── capacitor.config.json ├── ionic.config.json ├── ionic.starter.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── pages │ │ │ └── ion-menu │ │ │ ├── ion-menu-routing.module.ts │ │ │ ├── ion-menu.module.ts │ │ │ ├── ion-menu.page.html │ │ │ ├── ion-menu.page.scss │ │ │ ├── ion-menu.page.spec.ts │ │ │ └── ion-menu.page.ts │ ├── assets │ │ ├── icon │ │ │ └── favicon.png │ │ ├── images │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ └── user.jpg │ │ └── shapes.svg │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── global.scss │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── test.ts │ ├── theme │ │ └── variables.scss │ └── zone-flags.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Ion-range ├── .gitignore ├── angular.json ├── browserslist ├── capacitor.config.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── ionic.config.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── range-button │ │ │ ├── range-button-routing.module.ts │ │ │ ├── range-button.module.ts │ │ │ ├── range-button.page.html │ │ │ ├── range-button.page.scss │ │ │ ├── range-button.page.spec.ts │ │ │ └── range-button.page.ts │ ├── assets │ │ ├── icon │ │ │ └── favicon.png │ │ ├── images │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ └── user.jpg │ │ ├── shapes.svg │ │ └── truck.json │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── global.scss │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── test.ts │ ├── theme │ │ └── variables.scss │ └── zone-flags.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Ion-toolbar ├── .gitignore ├── angular.json ├── browserslist ├── capacitor.config.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── ionic.config.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── dashboard │ │ │ ├── dashboard-routing.module.ts │ │ │ ├── dashboard.module.ts │ │ │ ├── dashboard.page.html │ │ │ ├── dashboard.page.scss │ │ │ ├── dashboard.page.spec.ts │ │ │ └── dashboard.page.ts │ │ └── tool-bar │ │ │ ├── tool-bar-routing.module.ts │ │ │ ├── tool-bar.module.ts │ │ │ ├── tool-bar.page.html │ │ │ ├── tool-bar.page.scss │ │ │ ├── tool-bar.page.spec.ts │ │ │ └── tool-bar.page.ts │ ├── assets │ │ ├── icon │ │ │ └── favicon.png │ │ ├── images │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ └── user.jpg │ │ ├── shapes.svg │ │ └── truck.json │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── global.scss │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── test.ts │ ├── theme │ │ └── variables.scss │ └── zone-flags.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── README.md ├── Slide-tutorial ├── .gitignore ├── angular.json ├── browserslist ├── capacitor.config.json ├── ionic.config.json ├── ionic.starter.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── pages │ │ │ ├── dashboard │ │ │ ├── dashboard-routing.module.ts │ │ │ ├── dashboard.module.ts │ │ │ ├── dashboard.page.html │ │ │ ├── dashboard.page.scss │ │ │ ├── dashboard.page.spec.ts │ │ │ └── dashboard.page.ts │ │ │ └── slide │ │ │ ├── slide-routing.module.ts │ │ │ ├── slide.module.ts │ │ │ ├── slide.page.html │ │ │ ├── slide.page.scss │ │ │ ├── slide.page.spec.ts │ │ │ └── slide.page.ts │ ├── assets │ │ ├── icon │ │ │ └── favicon.png │ │ ├── images │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ └── user.jpg │ │ └── shapes.svg │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── global.scss │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── test.ts │ ├── theme │ │ └── variables.scss │ └── zone-flags.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Swipeable-Segment ├── .gitignore ├── angular.json ├── browserslist ├── capacitor.config.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── ionic.config.json ├── ionic.starter.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── pages │ │ │ └── swipable-segments │ │ │ ├── swipable-segments-routing.module.ts │ │ │ ├── swipable-segments.module.ts │ │ │ ├── swipable-segments.page.html │ │ │ ├── swipable-segments.page.scss │ │ │ ├── swipable-segments.page.spec.ts │ │ │ └── swipable-segments.page.ts │ ├── assets │ │ ├── icon │ │ │ └── favicon.png │ │ ├── images │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ └── user.jpg │ │ └── shapes.svg │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── global.scss │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── test.ts │ ├── theme │ │ └── variables.scss │ └── zone-flags.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json └── services ionic 5 ├── .gitignore ├── angular.json ├── browserslist ├── capacitor.config.json ├── e2e ├── protractor.conf.js ├── src │ ├── app.e2e-spec.ts │ └── app.po.ts └── tsconfig.json ├── ionic.config.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src ├── app │ ├── app-routing.module.ts │ ├── app.component.html │ ├── app.component.scss │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── home │ │ ├── home-routing.module.ts │ │ ├── home.module.ts │ │ ├── home.page.html │ │ ├── home.page.scss │ │ ├── home.page.spec.ts │ │ └── home.page.ts │ └── service │ │ ├── http.service.spec.ts │ │ └── http.service.ts ├── assets │ ├── icon │ │ └── favicon.png │ ├── images │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ └── user.jpg │ ├── shapes.svg │ └── truck.json ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── global.scss ├── index.html ├── main.ts ├── polyfills.ts ├── test.ts ├── theme │ └── variables.scss └── zone-flags.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json /Data-passng-btw-componet/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "MyApp", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/ionic.starter.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Blank Starter", 3 | "baseref": "master", 4 | "tarignore": [ 5 | "node_modules", 6 | "package-lock.json", 7 | "www" 8 | ], 9 | "scripts": { 10 | "test": "npm run lint && npm run ng -- build --configuration=ci && npm run ng -- build --prod --progress=false && npm run ng -- test --configuration=ci && npm run ng -- e2e --configuration=ci && npm run ng -- g pg my-page --dry-run && npm run ng -- g c my-component --dry-run" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Data-passng-btw-componet/src/app/app.component.scss -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/app/component/component/component.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { ProfileImgComponent } from '../profile-img/profile-img.component'; 4 | import { UserDetailComponent } from '../user-detail/user-detail.component'; 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | 8 | 9 | @NgModule({ 10 | declarations: [ProfileImgComponent, UserDetailComponent], 11 | imports: [ 12 | CommonModule,IonicModule 13 | ], 14 | exports: [ProfileImgComponent, UserDetailComponent] 15 | }) 16 | export class ComponentModule { } 17 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/app/component/profile-img/profile-img.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
{{dummyUserList.title}}.{{dummyUserList.first_name}} 4 | {{dummyUserList.last_name}}
5 |
6 | {{dummyUserList.gender}} 7 | {{dummyUserList.birthdate | date}} 8 |
9 | 10 |
11 | 12 |
13 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/app/component/profile-img/profile-img.component.scss: -------------------------------------------------------------------------------- 1 | .profile-cont { 2 | height: 80px; 3 | width: 80px; 4 | background: #c3cac3; 5 | border-radius: 50%; 6 | display: grid; 7 | place-content: center; 8 | } 9 | img { 10 | height: 78px; 11 | display: grid; 12 | width: 78px; 13 | background: green; 14 | border-radius: 50%; 15 | place-content: center; 16 | } 17 | .date-gender { 18 | display: flex; 19 | justify-content: space-between; 20 | width: 70%; 21 | } 22 | 23 | ion-label > *{ 24 | font-weight: bold; 25 | } -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/app/component/profile-img/profile-img.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { userList } from "../../dummyJSON/dummyJSON"; 3 | 4 | @Component({ 5 | selector: 'app-profile-img', 6 | templateUrl: './profile-img.component.html', 7 | styleUrls: ['./profile-img.component.scss'], 8 | }) 9 | export class ProfileImgComponent implements OnInit { 10 | 11 | // variables 12 | private dummyUserList: Object; 13 | 14 | constructor() { 15 | this.dummyUserList = userList 16 | } 17 | 18 | ngOnInit() { } 19 | 20 | } 21 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/app/component/user-detail/user-detail.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Card Subtitle 4 | {{itemDetail.type}} {{itemDetail.name}} 5 | 6 | 7 | 8 | Keep close to Nature's heart... and break clear away, once in awhile, 9 | and climb a mountain or spend a week in the woods. Wash your spirit clean. 10 | 11 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/app/component/user-detail/user-detail.component.scss: -------------------------------------------------------------------------------- 1 | ion-card { 2 | --background: #f44336; 3 | --color: white; 4 | } 5 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/app/home/home-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | import { HomePage } from './home.page'; 4 | 5 | const routes: Routes = [ 6 | { 7 | path: '', 8 | component: HomePage, 9 | } 10 | ]; 11 | 12 | @NgModule({ 13 | imports: [RouterModule.forChild(routes)], 14 | exports: [RouterModule] 15 | }) 16 | export class HomePageRoutingModule {} 17 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/app/home/home.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { IonicModule } from '@ionic/angular'; 4 | import { FormsModule } from '@angular/forms'; 5 | import { HomePage } from './home.page'; 6 | 7 | 8 | import { HomePageRoutingModule } from './home-routing.module'; 9 | import { ComponentModule } from '../component/component/component.module'; 10 | 11 | 12 | 13 | @NgModule({ 14 | imports: [ 15 | CommonModule, 16 | FormsModule, 17 | IonicModule, 18 | HomePageRoutingModule, 19 | ComponentModule 20 | ], 21 | declarations: [HomePage] 22 | }) 23 | export class HomePageModule { } 24 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/app/home/home.page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | HomePage 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Second Page 23 | 24 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/app/home/home.page.scss: -------------------------------------------------------------------------------- 1 | ion-toolbar { 2 | --background: #b71c1c; 3 | --color: white; 4 | } 5 | 6 | .second-page-btn { 7 | --background: #f44336; 8 | } 9 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/app/second-page/second-page-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { SecondPagePage } from './second-page.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: SecondPagePage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class SecondPagePageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/app/second-page/second-page.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { SecondPagePageRoutingModule } from './second-page-routing.module'; 8 | 9 | import { SecondPagePage } from './second-page.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | SecondPagePageRoutingModule 17 | ], 18 | declarations: [SecondPagePage] 19 | }) 20 | export class SecondPagePageModule {} 21 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/app/second-page/second-page.page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | secondPage 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/app/second-page/second-page.page.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Data-passng-btw-componet/src/app/second-page/second-page.page.scss -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/app/second-page/second-page.page.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-second-page', 5 | templateUrl: './second-page.page.html', 6 | styleUrls: ['./second-page.page.scss'], 7 | }) 8 | export class SecondPagePage implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Data-passng-btw-componet/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/assets/images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Data-passng-btw-componet/src/assets/images/user.jpg -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | (window as any).__Zone_disable_customElements = true; 6 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.d.ts" 14 | ], 15 | "exclude": [ 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Data-passng-btw-componet/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } -------------------------------------------------------------------------------- /Data-passng-btw-componet/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } -------------------------------------------------------------------------------- /Date-picker/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | -------------------------------------------------------------------------------- /Date-picker/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | -------------------------------------------------------------------------------- /Date-picker/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "MyApp", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /Date-picker/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('new App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should be blank', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toContain('Start with Ionic UI Components'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /Date-picker/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.deepCss('app-root ion-content')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Date-picker/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Date-picker/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /Date-picker/ionic.starter.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Blank Starter", 3 | "baseref": "master", 4 | "tarignore": [ 5 | "node_modules", 6 | "package-lock.json", 7 | "www" 8 | ], 9 | "scripts": { 10 | "test": "npm run lint && npm run ng -- build --configuration=ci && npm run ng -- build --prod --progress=false && npm run ng -- test --configuration=ci && npm run ng -- e2e --configuration=ci && npm run ng -- g pg my-page --dry-run && npm run ng -- g c my-component --dry-run" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Date-picker/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | 6 | { 7 | path: '', 8 | redirectTo: 'date-picker', 9 | pathMatch: 'full' 10 | }, 11 | { 12 | path: 'date-picker', 13 | loadChildren: () => import('./pages/date-picker/date-picker.module').then( m => m.DatePickerPageModule) 14 | } 15 | ]; 16 | 17 | @NgModule({ 18 | imports: [ 19 | RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) 20 | ], 21 | exports: [RouterModule] 22 | }) 23 | export class AppRoutingModule { } 24 | -------------------------------------------------------------------------------- /Date-picker/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Date-picker/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Date-picker/src/app/app.component.scss -------------------------------------------------------------------------------- /Date-picker/src/app/pages/date-picker/date-picker-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { DatePickerPage } from './date-picker.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: DatePickerPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class DatePickerPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Date-picker/src/app/pages/date-picker/date-picker.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule, DatePipe } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { DatePickerPageRoutingModule } from './date-picker-routing.module'; 8 | 9 | import { DatePickerPage } from './date-picker.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | DatePickerPageRoutingModule 17 | ], 18 | declarations: [DatePickerPage], 19 | providers: [ 20 | DatePipe] 21 | }) 22 | export class DatePickerPageModule { } 23 | -------------------------------------------------------------------------------- /Date-picker/src/app/pages/date-picker/date-picker.page.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Date-picker/src/app/pages/date-picker/date-picker.page.scss -------------------------------------------------------------------------------- /Date-picker/src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Date-picker/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /Date-picker/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Date-picker/src/assets/images/1.jpg -------------------------------------------------------------------------------- /Date-picker/src/assets/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Date-picker/src/assets/images/2.jpg -------------------------------------------------------------------------------- /Date-picker/src/assets/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Date-picker/src/assets/images/3.jpg -------------------------------------------------------------------------------- /Date-picker/src/assets/images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Date-picker/src/assets/images/user.jpg -------------------------------------------------------------------------------- /Date-picker/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Date-picker/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /Date-picker/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /Date-picker/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | (window as any).__Zone_disable_customElements = true; 6 | -------------------------------------------------------------------------------- /Date-picker/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.d.ts" 14 | ], 15 | "exclude": [ 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Date-picker/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } -------------------------------------------------------------------------------- /Date-picker/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "MyApp", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('new App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should be blank', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toContain('Start with Ionic UI Components'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.deepCss('app-root ion-content')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | { 6 | path: '', 7 | redirectTo: 'assistive-touch', 8 | pathMatch: 'full' 9 | }, 10 | { 11 | path: 'assistive-touch', 12 | loadChildren: () => import('./assistive-touch/assistive-touch.module').then(m => m.AssistiveTouchPageModule) 13 | } 14 | 15 | 16 | 17 | 18 | ]; 19 | 20 | @NgModule({ 21 | imports: [ 22 | RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) 23 | ], 24 | exports: [RouterModule] 25 | }) 26 | export class AppRoutingModule { } 27 | -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/IOS-Assistive-Button in ionic 5/src/app/app.component.scss -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/src/app/assistive-touch/assistive-touch-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { AssistiveTouchPage } from './assistive-touch.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: AssistiveTouchPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class AssistiveTouchPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/src/app/assistive-touch/assistive-touch.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { AssistiveTouchPageRoutingModule } from './assistive-touch-routing.module'; 8 | 9 | import { AssistiveTouchPage } from './assistive-touch.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | AssistiveTouchPageRoutingModule 17 | ], 18 | declarations: [AssistiveTouchPage] 19 | }) 20 | export class AssistiveTouchPageModule {} 21 | -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/src/app/assistive-touch/assistive-touch.page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Assistive Touch 4 | 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 | -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/IOS-Assistive-Button in ionic 5/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/IOS-Assistive-Button in ionic 5/src/assets/images/1.jpg -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/src/assets/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/IOS-Assistive-Button in ionic 5/src/assets/images/2.jpg -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/src/assets/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/IOS-Assistive-Button in ionic 5/src/assets/images/3.jpg -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/src/assets/images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/IOS-Assistive-Button in ionic 5/src/assets/images/user.jpg -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | (window as any).__Zone_disable_customElements = true; 6 | -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.d.ts" 14 | ], 15 | "exclude": [ 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } -------------------------------------------------------------------------------- /IOS-Assistive-Button in ionic 5/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } -------------------------------------------------------------------------------- /Infinite-Scroll/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | -------------------------------------------------------------------------------- /Infinite-Scroll/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | -------------------------------------------------------------------------------- /Infinite-Scroll/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "MyApp", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /Infinite-Scroll/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('new App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should be blank', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toContain('Start with Ionic UI Components'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /Infinite-Scroll/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.deepCss('app-root ion-content')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Infinite-Scroll/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Infinite-Scroll/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /Infinite-Scroll/ionic.starter.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Blank Starter", 3 | "baseref": "master", 4 | "tarignore": [ 5 | "node_modules", 6 | "package-lock.json", 7 | "www" 8 | ], 9 | "scripts": { 10 | "test": "npm run lint && npm run ng -- build --configuration=ci && npm run ng -- build --prod --progress=false && npm run ng -- test --configuration=ci && npm run ng -- e2e --configuration=ci && npm run ng -- g pg my-page --dry-run && npm run ng -- g c my-component --dry-run" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Infinite-Scroll/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | 6 | { 7 | path: '', 8 | redirectTo: 'infinite-scroll', 9 | pathMatch: 'full' 10 | }, 11 | { 12 | path: 'infinite-scroll', 13 | loadChildren: () => import('./pages/infinite-scroll/infinite-scroll.module').then(m => m.InfiniteScrollPageModule) 14 | } 15 | ]; 16 | 17 | @NgModule({ 18 | imports: [ 19 | RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) 20 | ], 21 | exports: [RouterModule] 22 | }) 23 | export class AppRoutingModule { } 24 | -------------------------------------------------------------------------------- /Infinite-Scroll/src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | .my-custom-menu { 2 | // --width: 100%; 3 | } 4 | .center { 5 | display: flex; 6 | justify-content: center; 7 | width: 100%; 8 | } 9 | // backdrop { 10 | // opacity: 0; 11 | // } 12 | 13 | -------------------------------------------------------------------------------- /Infinite-Scroll/src/app/pages/infinite-scroll/infinite-scroll-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { InfiniteScrollPage } from './infinite-scroll.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: InfiniteScrollPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class InfiniteScrollPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Infinite-Scroll/src/app/pages/infinite-scroll/infinite-scroll.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { InfiniteScrollPageRoutingModule } from './infinite-scroll-routing.module'; 8 | 9 | import { InfiniteScrollPage } from './infinite-scroll.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | InfiniteScrollPageRoutingModule 17 | ], 18 | declarations: [InfiniteScrollPage] 19 | }) 20 | export class InfiniteScrollPageModule {} 21 | -------------------------------------------------------------------------------- /Infinite-Scroll/src/app/pages/infinite-scroll/infinite-scroll.page.scss: -------------------------------------------------------------------------------- 1 | .circle { 2 | height: 50px; 3 | width: 50px; 4 | border-radius: 50%; 5 | } 6 | .justify-content-between { 7 | display: flex; 8 | justify-content: flex-start; 9 | align-items: center; 10 | } 11 | .img-size { 12 | height: 50px; 13 | width: 50px; 14 | } 15 | 16 | .center { 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | } 21 | -------------------------------------------------------------------------------- /Infinite-Scroll/src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Infinite-Scroll/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /Infinite-Scroll/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Infinite-Scroll/src/assets/images/1.jpg -------------------------------------------------------------------------------- /Infinite-Scroll/src/assets/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Infinite-Scroll/src/assets/images/2.jpg -------------------------------------------------------------------------------- /Infinite-Scroll/src/assets/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Infinite-Scroll/src/assets/images/3.jpg -------------------------------------------------------------------------------- /Infinite-Scroll/src/assets/images/ionic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Infinite-Scroll/src/assets/images/ionic.png -------------------------------------------------------------------------------- /Infinite-Scroll/src/assets/images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Infinite-Scroll/src/assets/images/user.jpg -------------------------------------------------------------------------------- /Infinite-Scroll/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Infinite-Scroll/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /Infinite-Scroll/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /Infinite-Scroll/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | (window as any).__Zone_disable_customElements = true; 6 | -------------------------------------------------------------------------------- /Infinite-Scroll/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.d.ts" 14 | ], 15 | "exclude": [ 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Infinite-Scroll/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } -------------------------------------------------------------------------------- /Infinite-Scroll/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } -------------------------------------------------------------------------------- /Ion-CheckBox/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | -------------------------------------------------------------------------------- /Ion-CheckBox/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | -------------------------------------------------------------------------------- /Ion-CheckBox/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "MyApp", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /Ion-CheckBox/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('new App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should be blank', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toContain('Start with Ionic UI Components'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /Ion-CheckBox/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.deepCss('app-root ion-content')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Ion-CheckBox/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Ion-CheckBox/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /Ion-CheckBox/ionic.starter.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Blank Starter", 3 | "baseref": "master", 4 | "tarignore": [ 5 | "node_modules", 6 | "package-lock.json", 7 | "www" 8 | ], 9 | "scripts": { 10 | "test": "npm run lint && npm run ng -- build --configuration=ci && npm run ng -- build --prod --progress=false && npm run ng -- test --configuration=ci && npm run ng -- e2e --configuration=ci && npm run ng -- g pg my-page --dry-run && npm run ng -- g c my-component --dry-run" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Ion-CheckBox/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | 6 | { 7 | path: '', 8 | redirectTo: 'checkbox', 9 | pathMatch: 'full' 10 | }, 11 | { 12 | path: 'checkbox', 13 | loadChildren: () => import('./pages/checkbox/checkbox.module').then(m => m.CheckboxPageModule) 14 | } 15 | ]; 16 | 17 | @NgModule({ 18 | imports: [ 19 | RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) 20 | ], 21 | exports: [RouterModule] 22 | }) 23 | export class AppRoutingModule { } 24 | -------------------------------------------------------------------------------- /Ion-CheckBox/src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | .my-custom-menu { 2 | // --width: 100%; 3 | } 4 | .center { 5 | display: flex; 6 | justify-content: center; 7 | width: 100%; 8 | } 9 | // backdrop { 10 | // opacity: 0; 11 | // } 12 | 13 | -------------------------------------------------------------------------------- /Ion-CheckBox/src/app/pages/checkbox/checkbox-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { CheckboxPage } from './checkbox.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: CheckboxPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class CheckboxPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Ion-CheckBox/src/app/pages/checkbox/checkbox.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { CheckboxPageRoutingModule } from './checkbox-routing.module'; 8 | 9 | import { CheckboxPage } from './checkbox.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | CheckboxPageRoutingModule 17 | ], 18 | declarations: [CheckboxPage] 19 | }) 20 | export class CheckboxPageModule {} 21 | -------------------------------------------------------------------------------- /Ion-CheckBox/src/app/pages/checkbox/checkbox.page.scss: -------------------------------------------------------------------------------- 1 | ion-checkbox { 2 | --border-radius: 50%; 3 | // --checkmark-color: yellow; 4 | // --size: 30px; 5 | } 6 | 7 | -------------------------------------------------------------------------------- /Ion-CheckBox/src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-CheckBox/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /Ion-CheckBox/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-CheckBox/src/assets/images/1.jpg -------------------------------------------------------------------------------- /Ion-CheckBox/src/assets/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-CheckBox/src/assets/images/2.jpg -------------------------------------------------------------------------------- /Ion-CheckBox/src/assets/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-CheckBox/src/assets/images/3.jpg -------------------------------------------------------------------------------- /Ion-CheckBox/src/assets/images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-CheckBox/src/assets/images/user.jpg -------------------------------------------------------------------------------- /Ion-CheckBox/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Ion-CheckBox/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /Ion-CheckBox/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /Ion-CheckBox/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | (window as any).__Zone_disable_customElements = true; 6 | -------------------------------------------------------------------------------- /Ion-CheckBox/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.d.ts" 14 | ], 15 | "exclude": [ 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Ion-CheckBox/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } -------------------------------------------------------------------------------- /Ion-CheckBox/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } -------------------------------------------------------------------------------- /Ion-Modal/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | -------------------------------------------------------------------------------- /Ion-Modal/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | -------------------------------------------------------------------------------- /Ion-Modal/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "MyApp", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /Ion-Modal/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('new App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should be blank', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toContain('Start with Ionic UI Components'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /Ion-Modal/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.deepCss('app-root ion-content')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Ion-Modal/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Ion-Modal/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /Ion-Modal/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | 6 | { 7 | path: '', 8 | redirectTo: 'ion-modal', 9 | pathMatch: 'full' 10 | }, 11 | { 12 | path: 'ion-modal', 13 | loadChildren: () => import('./pages/ion-modal/ion-modal.module').then( m => m.IonModalPageModule) 14 | } 15 | 16 | ]; 17 | 18 | @NgModule({ 19 | imports: [ 20 | RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) 21 | ], 22 | exports: [RouterModule] 23 | }) 24 | export class AppRoutingModule { } 25 | -------------------------------------------------------------------------------- /Ion-Modal/src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | .my-custom-menu { 2 | // --width: 100%; 3 | } 4 | // .center { 5 | // display: flex; 6 | // justify-content: center; 7 | // width: 100%; 8 | // } 9 | // backdrop { 10 | // opacity: 0; 11 | // } 12 | 13 | -------------------------------------------------------------------------------- /Ion-Modal/src/app/components/ion-modal-component/ion-modal-component.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Modal 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Please {{type}} to our channel {{name}}

15 | 16 | -------------------------------------------------------------------------------- /Ion-Modal/src/app/components/ion-modal-component/ion-modal-component.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-Modal/src/app/components/ion-modal-component/ion-modal-component.component.scss -------------------------------------------------------------------------------- /Ion-Modal/src/app/components/ion-modal-component/ion-modal-component.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input } from '@angular/core'; 2 | import { ModalController } from '@ionic/angular'; 3 | 4 | @Component({ 5 | selector: 'app-ion-modal-component', 6 | templateUrl: './ion-modal-component.component.html', 7 | styleUrls: ['./ion-modal-component.component.scss'], 8 | }) 9 | export class IonModalComponent implements OnInit { 10 | 11 | constructor(private modalCtrl: ModalController) { } 12 | 13 | @Input() name: string; 14 | @Input() type: string; 15 | 16 | ngOnInit() { } 17 | 18 | _dismiss() { 19 | this.modalCtrl.dismiss({ 20 | 'fromModal': 'Subscribed TechAssembler' 21 | }); 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /Ion-Modal/src/app/pages/ion-modal/ion-modal-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { IonModalPage } from './ion-modal.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: IonModalPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class IonModalPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Ion-Modal/src/app/pages/ion-modal/ion-modal.page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | ionModal 4 | 5 | 6 | 7 | 8 | 9 | Open Modal 10 | 11 | 12 | 13 | 14 | {{fromModalData}} 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Ion-Modal/src/app/pages/ion-modal/ion-modal.page.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-Modal/src/app/pages/ion-modal/ion-modal.page.scss -------------------------------------------------------------------------------- /Ion-Modal/src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-Modal/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /Ion-Modal/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-Modal/src/assets/images/1.jpg -------------------------------------------------------------------------------- /Ion-Modal/src/assets/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-Modal/src/assets/images/2.jpg -------------------------------------------------------------------------------- /Ion-Modal/src/assets/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-Modal/src/assets/images/3.jpg -------------------------------------------------------------------------------- /Ion-Modal/src/assets/images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-Modal/src/assets/images/user.jpg -------------------------------------------------------------------------------- /Ion-Modal/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Ion-Modal/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /Ion-Modal/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /Ion-Modal/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | (window as any).__Zone_disable_customElements = true; 6 | -------------------------------------------------------------------------------- /Ion-Modal/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.d.ts" 14 | ], 15 | "exclude": [ 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Ion-Modal/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } -------------------------------------------------------------------------------- /Ion-Modal/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } -------------------------------------------------------------------------------- /Ion-PopOver/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | -------------------------------------------------------------------------------- /Ion-PopOver/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | -------------------------------------------------------------------------------- /Ion-PopOver/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "MyApp", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /Ion-PopOver/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('new App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should be blank', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toContain('Start with Ionic UI Components'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /Ion-PopOver/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.deepCss('app-root ion-content')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Ion-PopOver/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Ion-PopOver/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /Ion-PopOver/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | { 6 | path: 'popover', 7 | loadChildren: () => import('./pages/popover/popover.module').then(m => m.PopoverPageModule) 8 | }, 9 | { 10 | path: '', 11 | redirectTo: 'popover', 12 | pathMatch: 'full' 13 | }, 14 | ]; 15 | 16 | @NgModule({ 17 | imports: [ 18 | RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) 19 | ], 20 | exports: [RouterModule] 21 | }) 22 | export class AppRoutingModule { } 23 | -------------------------------------------------------------------------------- /Ion-PopOver/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Ion-PopOver/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-PopOver/src/app/app.component.scss -------------------------------------------------------------------------------- /Ion-PopOver/src/app/components/popover-component/popover-component.component.html: -------------------------------------------------------------------------------- 1 | 2 | Ionic 3 | Learn Ionic 4 | Documentation 5 | Showcase 6 | GitHub Repo 7 | Close 8 | -------------------------------------------------------------------------------- /Ion-PopOver/src/app/components/popover-component/popover-component.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-PopOver/src/app/components/popover-component/popover-component.component.scss -------------------------------------------------------------------------------- /Ion-PopOver/src/app/components/popover-component/popover-component.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { PopoverController } from '@ionic/angular'; 3 | 4 | @Component({ 5 | selector: 'app-popover-component', 6 | templateUrl: './popover-component.component.html', 7 | styleUrls: ['./popover-component.component.scss'], 8 | }) 9 | export class PopoverComponentComponent implements OnInit { 10 | 11 | constructor(private popCtrl: PopoverController) { } 12 | 13 | ngOnInit() { } 14 | 15 | dismissPopover(item: string) { 16 | this.popCtrl.dismiss({ 17 | 'fromPop': item + ' Subscribed' 18 | }); 19 | } 20 | 21 | } 22 | -------------------------------------------------------------------------------- /Ion-PopOver/src/app/pages/popover/popover-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { PopoverPage } from './popover.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: PopoverPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class PopoverPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Ion-PopOver/src/app/pages/popover/popover.page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | popover 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | popOver 15 | 16 | -------------------------------------------------------------------------------- /Ion-PopOver/src/app/pages/popover/popover.page.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-PopOver/src/app/pages/popover/popover.page.scss -------------------------------------------------------------------------------- /Ion-PopOver/src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-PopOver/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /Ion-PopOver/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-PopOver/src/assets/images/1.jpg -------------------------------------------------------------------------------- /Ion-PopOver/src/assets/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-PopOver/src/assets/images/2.jpg -------------------------------------------------------------------------------- /Ion-PopOver/src/assets/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-PopOver/src/assets/images/3.jpg -------------------------------------------------------------------------------- /Ion-PopOver/src/assets/images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-PopOver/src/assets/images/user.jpg -------------------------------------------------------------------------------- /Ion-PopOver/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Ion-PopOver/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /Ion-PopOver/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /Ion-PopOver/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | (window as any).__Zone_disable_customElements = true; 6 | -------------------------------------------------------------------------------- /Ion-PopOver/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.d.ts" 14 | ], 15 | "exclude": [ 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Ion-PopOver/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } -------------------------------------------------------------------------------- /Ion-PopOver/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } -------------------------------------------------------------------------------- /Ion-Search/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | -------------------------------------------------------------------------------- /Ion-Search/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | -------------------------------------------------------------------------------- /Ion-Search/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "MyApp", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /Ion-Search/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /Ion-Search/ionic.starter.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Blank Starter", 3 | "baseref": "master", 4 | "tarignore": [ 5 | "node_modules", 6 | "package-lock.json", 7 | "www" 8 | ], 9 | "scripts": { 10 | "test": "npm run lint && npm run ng -- build --configuration=ci && npm run ng -- build --prod --progress=false && npm run ng -- test --configuration=ci && npm run ng -- e2e --configuration=ci && npm run ng -- g pg my-page --dry-run && npm run ng -- g c my-component --dry-run" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Ion-Search/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | 6 | { 7 | path: '', 8 | redirectTo: 'search', 9 | pathMatch: 'full' 10 | }, 11 | { 12 | path: 'search', 13 | loadChildren: () => import('./pages/search/search.module').then(m => m.SearchPageModule) 14 | } 15 | ]; 16 | 17 | @NgModule({ 18 | imports: [ 19 | RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) 20 | ], 21 | exports: [RouterModule] 22 | }) 23 | export class AppRoutingModule { } 24 | -------------------------------------------------------------------------------- /Ion-Search/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Ion-Search/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-Search/src/app/app.component.scss -------------------------------------------------------------------------------- /Ion-Search/src/app/pages/search/search-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { SearchPage } from './search.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: SearchPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class SearchPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Ion-Search/src/app/pages/search/search.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { SearchPageRoutingModule } from './search-routing.module'; 8 | 9 | import { SearchPage } from './search.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | SearchPageRoutingModule 17 | ], 18 | declarations: [SearchPage] 19 | }) 20 | export class SearchPageModule {} 21 | -------------------------------------------------------------------------------- /Ion-Search/src/app/pages/search/search.page.scss: -------------------------------------------------------------------------------- 1 | ion-toolbar { 2 | --background: #0097a7; 3 | --color: white; 4 | } 5 | -------------------------------------------------------------------------------- /Ion-Search/src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-Search/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /Ion-Search/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-Search/src/assets/images/1.jpg -------------------------------------------------------------------------------- /Ion-Search/src/assets/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-Search/src/assets/images/2.jpg -------------------------------------------------------------------------------- /Ion-Search/src/assets/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-Search/src/assets/images/3.jpg -------------------------------------------------------------------------------- /Ion-Search/src/assets/images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-Search/src/assets/images/user.jpg -------------------------------------------------------------------------------- /Ion-Search/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Ion-Search/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /Ion-Search/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /Ion-Search/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | (window as any).__Zone_disable_customElements = true; 6 | -------------------------------------------------------------------------------- /Ion-Search/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.d.ts" 14 | ], 15 | "exclude": [ 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Ion-Search/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } -------------------------------------------------------------------------------- /Ion-Search/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } -------------------------------------------------------------------------------- /Ion-Segment/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | -------------------------------------------------------------------------------- /Ion-Segment/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | -------------------------------------------------------------------------------- /Ion-Segment/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "MyApp", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /Ion-Segment/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('new App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should be blank', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toContain('Start with Ionic UI Components'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /Ion-Segment/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.deepCss('app-root ion-content')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Ion-Segment/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Ion-Segment/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /Ion-Segment/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | { 6 | path: '', 7 | redirectTo: 'segments', 8 | pathMatch: 'full' 9 | }, 10 | { 11 | path: 'segments', 12 | loadChildren: () => import('./pages/segments/segments.module').then( m => m.SegmentsPageModule) 13 | }, 14 | ]; 15 | 16 | @NgModule({ 17 | imports: [ 18 | RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) 19 | ], 20 | exports: [RouterModule] 21 | }) 22 | export class AppRoutingModule { } 23 | -------------------------------------------------------------------------------- /Ion-Segment/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Ion-Segment/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-Segment/src/app/app.component.scss -------------------------------------------------------------------------------- /Ion-Segment/src/app/pages/segments/segments-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { SegmentsPage } from './segments.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: SegmentsPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class SegmentsPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Ion-Segment/src/app/pages/segments/segments.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { SegmentsPageRoutingModule } from './segments-routing.module'; 8 | 9 | import { SegmentsPage } from './segments.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | SegmentsPageRoutingModule 17 | ], 18 | declarations: [SegmentsPage] 19 | }) 20 | export class SegmentsPageModule {} 21 | -------------------------------------------------------------------------------- /Ion-Segment/src/app/pages/segments/segments.page.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | ion-segment-button { 4 | // --indicator-color: red; 5 | // --color-checked: pink; 6 | // --color-hover: yellow; 7 | // --indicator-height: 3px; 8 | } 9 | 10 | // advance css 11 | ion-segment-button{ 12 | --indicator-box-shadow: transparent !important; 13 | border-radius: 2rem !important; 14 | padding: 0 0.2em ; 15 | margin: 0.5em; 16 | --background: white; 17 | --color: #33691e; 18 | --background-checked: linear-gradient(to right, #5a9216, #8bc34a) !important; 19 | --color-checked: white; 20 | --indicator-color: transparent !important; /* this solution */ 21 | } -------------------------------------------------------------------------------- /Ion-Segment/src/app/pages/segments/segments.page.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-segments', 5 | templateUrl: './segments.page.html', 6 | styleUrls: ['./segments.page.scss'], 7 | }) 8 | export class SegmentsPage implements OnInit { 9 | 10 | private selectedSegment: string ='pizza' 11 | constructor() { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | segmentChanged(event: any) { 17 | console.log(event.target.value); 18 | this.selectedSegment = event.target.value 19 | } 20 | 21 | } 22 | -------------------------------------------------------------------------------- /Ion-Segment/src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-Segment/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /Ion-Segment/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Ion-Segment/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /Ion-Segment/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /Ion-Segment/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | (window as any).__Zone_disable_customElements = true; 6 | -------------------------------------------------------------------------------- /Ion-Segment/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.d.ts" 14 | ], 15 | "exclude": [ 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Ion-Segment/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } -------------------------------------------------------------------------------- /Ion-Segment/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } -------------------------------------------------------------------------------- /Ion-action-sheet/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | -------------------------------------------------------------------------------- /Ion-action-sheet/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | -------------------------------------------------------------------------------- /Ion-action-sheet/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "MyApp", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /Ion-action-sheet/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('new App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should be blank', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toContain('Start with Ionic UI Components'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /Ion-action-sheet/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.deepCss('app-root ion-content')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Ion-action-sheet/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Ion-action-sheet/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /Ion-action-sheet/ionic.starter.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Blank Starter", 3 | "baseref": "master", 4 | "tarignore": [ 5 | "node_modules", 6 | "package-lock.json", 7 | "www" 8 | ], 9 | "scripts": { 10 | "test": "npm run lint && npm run ng -- build --configuration=ci && npm run ng -- build --prod --progress=false && npm run ng -- test --configuration=ci && npm run ng -- e2e --configuration=ci && npm run ng -- g pg my-page --dry-run && npm run ng -- g c my-component --dry-run" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Ion-action-sheet/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | 6 | { 7 | path: '', 8 | redirectTo: 'action-sheet', 9 | pathMatch: 'full' 10 | }, 11 | { 12 | path: 'action-sheet', 13 | loadChildren: () => import('./pages/action-sheet/action-sheet.module').then(m => m.ActionSheetPageModule) 14 | } 15 | ]; 16 | 17 | @NgModule({ 18 | imports: [ 19 | RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) 20 | ], 21 | exports: [RouterModule] 22 | }) 23 | export class AppRoutingModule { } 24 | -------------------------------------------------------------------------------- /Ion-action-sheet/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Ion-action-sheet/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-action-sheet/src/app/app.component.scss -------------------------------------------------------------------------------- /Ion-action-sheet/src/app/pages/action-sheet/action-sheet-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { ActionSheetPage } from './action-sheet.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: ActionSheetPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class ActionSheetPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Ion-action-sheet/src/app/pages/action-sheet/action-sheet.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { ActionSheetPageRoutingModule } from './action-sheet-routing.module'; 8 | 9 | import { ActionSheetPage } from './action-sheet.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | ActionSheetPageRoutingModule 17 | ], 18 | declarations: [ActionSheetPage] 19 | }) 20 | export class ActionSheetPageModule {} 21 | -------------------------------------------------------------------------------- /Ion-action-sheet/src/app/pages/action-sheet/action-sheet.page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Action Sheet 4 | 5 | 6 | 7 | 8 | 9 | Present Action Sheet 10 | 11 | 12 | -------------------------------------------------------------------------------- /Ion-action-sheet/src/app/pages/action-sheet/action-sheet.page.scss: -------------------------------------------------------------------------------- 1 | ion-toolbar { 2 | --background: #03a9f4; 3 | --color: white; 4 | } 5 | 6 | ion-content { 7 | --background: linear-gradient(to top, white, #b3e5fc); 8 | } 9 | -------------------------------------------------------------------------------- /Ion-action-sheet/src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-action-sheet/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /Ion-action-sheet/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-action-sheet/src/assets/images/1.jpg -------------------------------------------------------------------------------- /Ion-action-sheet/src/assets/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-action-sheet/src/assets/images/2.jpg -------------------------------------------------------------------------------- /Ion-action-sheet/src/assets/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-action-sheet/src/assets/images/3.jpg -------------------------------------------------------------------------------- /Ion-action-sheet/src/assets/images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-action-sheet/src/assets/images/user.jpg -------------------------------------------------------------------------------- /Ion-action-sheet/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Ion-action-sheet/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /Ion-action-sheet/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /Ion-action-sheet/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | (window as any).__Zone_disable_customElements = true; 6 | -------------------------------------------------------------------------------- /Ion-action-sheet/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.d.ts" 14 | ], 15 | "exclude": [ 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Ion-action-sheet/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } -------------------------------------------------------------------------------- /Ion-action-sheet/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } -------------------------------------------------------------------------------- /Ion-alert/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | -------------------------------------------------------------------------------- /Ion-alert/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | -------------------------------------------------------------------------------- /Ion-alert/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "MyApp", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /Ion-alert/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('new App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should be blank', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toContain('Start with Ionic UI Components'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /Ion-alert/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.deepCss('app-root ion-content')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Ion-alert/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Ion-alert/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /Ion-alert/src/app/alert/alert-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { AlertPage } from './alert.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: AlertPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class AlertPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Ion-alert/src/app/alert/alert.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { AlertPageRoutingModule } from './alert-routing.module'; 8 | 9 | import { AlertPage } from './alert.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | AlertPageRoutingModule 17 | ], 18 | declarations: [AlertPage] 19 | }) 20 | export class AlertPageModule {} 21 | -------------------------------------------------------------------------------- /Ion-alert/src/app/alert/alert.page.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-alert/src/app/alert/alert.page.scss -------------------------------------------------------------------------------- /Ion-alert/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | { 6 | path: '', 7 | redirectTo: 'alert', 8 | pathMatch: 'full' 9 | }, 10 | { 11 | path: 'alert', 12 | loadChildren: () => import('./alert/alert.module').then(m => m.AlertPageModule) 13 | }, 14 | 15 | 16 | ]; 17 | 18 | @NgModule({ 19 | imports: [ 20 | RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) 21 | ], 22 | exports: [RouterModule] 23 | }) 24 | export class AppRoutingModule { } 25 | -------------------------------------------------------------------------------- /Ion-alert/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Ion-alert/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-alert/src/app/app.component.scss -------------------------------------------------------------------------------- /Ion-alert/src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-alert/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /Ion-alert/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-alert/src/assets/images/1.jpg -------------------------------------------------------------------------------- /Ion-alert/src/assets/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-alert/src/assets/images/2.jpg -------------------------------------------------------------------------------- /Ion-alert/src/assets/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-alert/src/assets/images/3.jpg -------------------------------------------------------------------------------- /Ion-alert/src/assets/images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-alert/src/assets/images/user.jpg -------------------------------------------------------------------------------- /Ion-alert/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Ion-alert/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /Ion-alert/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /Ion-alert/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | (window as any).__Zone_disable_customElements = true; 6 | -------------------------------------------------------------------------------- /Ion-alert/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.d.ts" 14 | ], 15 | "exclude": [ 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Ion-alert/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } -------------------------------------------------------------------------------- /Ion-alert/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } -------------------------------------------------------------------------------- /Ion-fab/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | -------------------------------------------------------------------------------- /Ion-fab/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | -------------------------------------------------------------------------------- /Ion-fab/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "MyApp", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /Ion-fab/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('new App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should be blank', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toContain('Start with Ionic UI Components'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /Ion-fab/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.deepCss('app-root ion-content')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Ion-fab/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Ion-fab/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /Ion-fab/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Ion-fab/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-fab/src/app/app.component.scss -------------------------------------------------------------------------------- /Ion-fab/src/app/pages/fab-button/fab-button-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { FabButtonPage } from './fab-button.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: FabButtonPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class FabButtonPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Ion-fab/src/app/pages/fab-button/fab-button.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { FabButtonPageRoutingModule } from './fab-button-routing.module'; 8 | 9 | import { FabButtonPage } from './fab-button.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | FabButtonPageRoutingModule 17 | ], 18 | declarations: [FabButtonPage] 19 | }) 20 | export class FabButtonPageModule {} 21 | -------------------------------------------------------------------------------- /Ion-fab/src/app/pages/fab-button/fab-button.page.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-fab/src/app/pages/fab-button/fab-button.page.scss -------------------------------------------------------------------------------- /Ion-fab/src/app/pages/fab-button/fab-button.page.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-fab-button', 5 | templateUrl: './fab-button.page.html', 6 | styleUrls: ['./fab-button.page.scss'], 7 | }) 8 | export class FabButtonPage implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /Ion-fab/src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-fab/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /Ion-fab/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-fab/src/assets/images/1.jpg -------------------------------------------------------------------------------- /Ion-fab/src/assets/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-fab/src/assets/images/2.jpg -------------------------------------------------------------------------------- /Ion-fab/src/assets/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-fab/src/assets/images/3.jpg -------------------------------------------------------------------------------- /Ion-fab/src/assets/images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-fab/src/assets/images/user.jpg -------------------------------------------------------------------------------- /Ion-fab/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Ion-fab/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /Ion-fab/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /Ion-fab/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | (window as any).__Zone_disable_customElements = true; 6 | -------------------------------------------------------------------------------- /Ion-fab/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.d.ts" 14 | ], 15 | "exclude": [ 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Ion-fab/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } -------------------------------------------------------------------------------- /Ion-fab/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } -------------------------------------------------------------------------------- /Ion-menu/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | -------------------------------------------------------------------------------- /Ion-menu/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | -------------------------------------------------------------------------------- /Ion-menu/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "MyApp", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /Ion-menu/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /Ion-menu/ionic.starter.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Blank Starter", 3 | "baseref": "master", 4 | "tarignore": [ 5 | "node_modules", 6 | "package-lock.json", 7 | "www" 8 | ], 9 | "scripts": { 10 | "test": "npm run lint && npm run ng -- build --configuration=ci && npm run ng -- build --prod --progress=false && npm run ng -- test --configuration=ci && npm run ng -- e2e --configuration=ci && npm run ng -- g pg my-page --dry-run && npm run ng -- g c my-component --dry-run" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Ion-menu/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | 6 | { 7 | path: '', 8 | redirectTo: 'ion-menu', 9 | pathMatch: 'full' 10 | }, 11 | { 12 | path: 'ion-menu', 13 | loadChildren: () => import('./pages/ion-menu/ion-menu.module').then(m => m.IonMenuPageModule) 14 | } 15 | ]; 16 | 17 | @NgModule({ 18 | imports: [ 19 | RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) 20 | ], 21 | exports: [RouterModule] 22 | }) 23 | export class AppRoutingModule { } 24 | -------------------------------------------------------------------------------- /Ion-menu/src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | .my-custom-menu { 2 | // --width: 100%; 3 | } 4 | .center { 5 | display: flex; 6 | justify-content: center; 7 | width: 100%; 8 | } 9 | // backdrop { 10 | // opacity: 0; 11 | // } 12 | 13 | -------------------------------------------------------------------------------- /Ion-menu/src/app/pages/ion-menu/ion-menu-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { IonMenuPage } from './ion-menu.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: IonMenuPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class IonMenuPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Ion-menu/src/app/pages/ion-menu/ion-menu.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { IonMenuPageRoutingModule } from './ion-menu-routing.module'; 8 | 9 | import { IonMenuPage } from './ion-menu.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | IonMenuPageRoutingModule 17 | ], 18 | declarations: [IonMenuPage] 19 | }) 20 | export class IonMenuPageModule {} 21 | -------------------------------------------------------------------------------- /Ion-menu/src/app/pages/ion-menu/ion-menu.page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Ion Menu 9 | 10 | 11 | 12 | 13 | 14 | Open Side Nav 15 | 16 | 17 | -------------------------------------------------------------------------------- /Ion-menu/src/app/pages/ion-menu/ion-menu.page.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-menu/src/app/pages/ion-menu/ion-menu.page.scss -------------------------------------------------------------------------------- /Ion-menu/src/app/pages/ion-menu/ion-menu.page.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { MenuController } from '@ionic/angular'; 3 | 4 | @Component({ 5 | selector: 'app-ion-menu', 6 | templateUrl: './ion-menu.page.html', 7 | styleUrls: ['./ion-menu.page.scss'], 8 | }) 9 | export class IonMenuPage implements OnInit { 10 | 11 | constructor(private menu: MenuController) { 12 | menu.swipeGesture(false); 13 | // menu. 14 | } 15 | 16 | ngOnInit() { 17 | } 18 | 19 | openFirst() { 20 | this.menu.enable(true, 'first'); 21 | this.menu.open('first'); 22 | } 23 | 24 | 25 | openCustom() { 26 | this.menu.enable(true, 'custom'); 27 | this.menu.open('custom'); 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /Ion-menu/src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-menu/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /Ion-menu/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-menu/src/assets/images/1.jpg -------------------------------------------------------------------------------- /Ion-menu/src/assets/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-menu/src/assets/images/2.jpg -------------------------------------------------------------------------------- /Ion-menu/src/assets/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-menu/src/assets/images/3.jpg -------------------------------------------------------------------------------- /Ion-menu/src/assets/images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-menu/src/assets/images/user.jpg -------------------------------------------------------------------------------- /Ion-menu/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Ion-menu/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /Ion-menu/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /Ion-menu/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | (window as any).__Zone_disable_customElements = true; 6 | -------------------------------------------------------------------------------- /Ion-menu/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.d.ts" 14 | ], 15 | "exclude": [ 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Ion-menu/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } -------------------------------------------------------------------------------- /Ion-menu/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } -------------------------------------------------------------------------------- /Ion-range/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | -------------------------------------------------------------------------------- /Ion-range/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | -------------------------------------------------------------------------------- /Ion-range/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "MyApp", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /Ion-range/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('new App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should be blank', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toContain('Start with Ionic UI Components'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /Ion-range/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.deepCss('app-root ion-content')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Ion-range/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Ion-range/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /Ion-range/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | { 6 | path: '', 7 | redirectTo: 'range-button', 8 | pathMatch: 'full' 9 | }, 10 | { 11 | path: 'range-button', 12 | loadChildren: () => import('./range-button/range-button.module').then(m => m.RangeButtonPageModule) 13 | } 14 | 15 | 16 | ]; 17 | 18 | @NgModule({ 19 | imports: [ 20 | RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) 21 | ], 22 | exports: [RouterModule] 23 | }) 24 | export class AppRoutingModule { } 25 | -------------------------------------------------------------------------------- /Ion-range/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Ion-range/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-range/src/app/app.component.scss -------------------------------------------------------------------------------- /Ion-range/src/app/range-button/range-button-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { RangeButtonPage } from './range-button.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: RangeButtonPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class RangeButtonPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Ion-range/src/app/range-button/range-button.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { RangeButtonPageRoutingModule } from './range-button-routing.module'; 8 | 9 | import { RangeButtonPage } from './range-button.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | RangeButtonPageRoutingModule 17 | ], 18 | declarations: [RangeButtonPage] 19 | }) 20 | export class RangeButtonPageModule {} 21 | -------------------------------------------------------------------------------- /Ion-range/src/app/range-button/range-button.page.scss: -------------------------------------------------------------------------------- 1 | ion-range::part(tick) { 2 | height: 10px; 3 | width: 1px; 4 | top: 17px; 5 | // border-radius: 50%; 6 | } 7 | ion-range::part(tick-active) { 8 | height: 10px; 9 | width: 1px; 10 | top: 17px; 11 | // border-radius: 50%; 12 | } 13 | 14 | .cust-range { 15 | --bar-background: red; 16 | --bar-border-radius: 0; 17 | --bar-height: 2px; 18 | --height: 40px; 19 | --knob-background: green; 20 | --knob-border-radius: 50%; 21 | --knob-box-shadow: 0px 0px 9px #777777; 22 | --knob-size: 28px; 23 | --pin-background: yellow; 24 | } 25 | -------------------------------------------------------------------------------- /Ion-range/src/app/range-button/range-button.page.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-range-button', 5 | templateUrl: './range-button.page.html', 6 | styleUrls: ['./range-button.page.scss'], 7 | }) 8 | export class RangeButtonPage implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | // use debounce in html with it 15 | rangeChange(event: any) { 16 | console.log(event.detail.value) 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /Ion-range/src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-range/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /Ion-range/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-range/src/assets/images/1.jpg -------------------------------------------------------------------------------- /Ion-range/src/assets/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-range/src/assets/images/2.jpg -------------------------------------------------------------------------------- /Ion-range/src/assets/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-range/src/assets/images/3.jpg -------------------------------------------------------------------------------- /Ion-range/src/assets/images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-range/src/assets/images/user.jpg -------------------------------------------------------------------------------- /Ion-range/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Ion-range/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /Ion-range/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /Ion-range/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | (window as any).__Zone_disable_customElements = true; 6 | -------------------------------------------------------------------------------- /Ion-range/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.d.ts" 14 | ], 15 | "exclude": [ 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Ion-range/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } -------------------------------------------------------------------------------- /Ion-range/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } -------------------------------------------------------------------------------- /Ion-toolbar/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | -------------------------------------------------------------------------------- /Ion-toolbar/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | -------------------------------------------------------------------------------- /Ion-toolbar/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "MyApp", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /Ion-toolbar/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('new App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should be blank', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toContain('Start with Ionic UI Components'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /Ion-toolbar/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.deepCss('app-root ion-content')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Ion-toolbar/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Ion-toolbar/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /Ion-toolbar/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Ion-toolbar/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-toolbar/src/app/app.component.scss -------------------------------------------------------------------------------- /Ion-toolbar/src/app/dashboard/dashboard-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { DashboardPage } from './dashboard.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: DashboardPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class DashboardPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Ion-toolbar/src/app/dashboard/dashboard.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { DashboardPageRoutingModule } from './dashboard-routing.module'; 8 | 9 | import { DashboardPage } from './dashboard.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | DashboardPageRoutingModule 17 | ], 18 | declarations: [DashboardPage] 19 | }) 20 | export class DashboardPageModule {} 21 | -------------------------------------------------------------------------------- /Ion-toolbar/src/app/dashboard/dashboard.page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dashoard 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | -------------------------------------------------------------------------------- /Ion-toolbar/src/app/dashboard/dashboard.page.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-toolbar/src/app/dashboard/dashboard.page.scss -------------------------------------------------------------------------------- /Ion-toolbar/src/app/dashboard/dashboard.page.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-dashboard', 5 | templateUrl: './dashboard.page.html', 6 | styleUrls: ['./dashboard.page.scss'], 7 | }) 8 | export class DashboardPage implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /Ion-toolbar/src/app/tool-bar/tool-bar-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { ToolBarPage } from './tool-bar.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: ToolBarPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class ToolBarPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Ion-toolbar/src/app/tool-bar/tool-bar.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { ToolBarPageRoutingModule } from './tool-bar-routing.module'; 8 | 9 | import { ToolBarPage } from './tool-bar.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | ToolBarPageRoutingModule 17 | ], 18 | declarations: [ToolBarPage] 19 | }) 20 | export class ToolBarPageModule {} 21 | -------------------------------------------------------------------------------- /Ion-toolbar/src/app/tool-bar/tool-bar.page.scss: -------------------------------------------------------------------------------- 1 | // ion-toolbar { 2 | // --background: green; 3 | // --color:red 4 | // } 5 | -------------------------------------------------------------------------------- /Ion-toolbar/src/app/tool-bar/tool-bar.page.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-tool-bar', 5 | templateUrl: './tool-bar.page.html', 6 | styleUrls: ['./tool-bar.page.scss'], 7 | }) 8 | export class ToolBarPage implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /Ion-toolbar/src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-toolbar/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /Ion-toolbar/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-toolbar/src/assets/images/1.jpg -------------------------------------------------------------------------------- /Ion-toolbar/src/assets/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-toolbar/src/assets/images/2.jpg -------------------------------------------------------------------------------- /Ion-toolbar/src/assets/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-toolbar/src/assets/images/3.jpg -------------------------------------------------------------------------------- /Ion-toolbar/src/assets/images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Ion-toolbar/src/assets/images/user.jpg -------------------------------------------------------------------------------- /Ion-toolbar/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Ion-toolbar/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /Ion-toolbar/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /Ion-toolbar/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | (window as any).__Zone_disable_customElements = true; 6 | -------------------------------------------------------------------------------- /Ion-toolbar/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.d.ts" 14 | ], 15 | "exclude": [ 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Ion-toolbar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } -------------------------------------------------------------------------------- /Ion-toolbar/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } -------------------------------------------------------------------------------- /Slide-tutorial/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | -------------------------------------------------------------------------------- /Slide-tutorial/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | -------------------------------------------------------------------------------- /Slide-tutorial/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "MyApp", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /Slide-tutorial/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /Slide-tutorial/ionic.starter.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Blank Starter", 3 | "baseref": "master", 4 | "tarignore": [ 5 | "node_modules", 6 | "package-lock.json", 7 | "www" 8 | ], 9 | "scripts": { 10 | "test": "npm run lint && npm run ng -- build --configuration=ci && npm run ng -- build --prod --progress=false && npm run ng -- test --configuration=ci && npm run ng -- e2e --configuration=ci && npm run ng -- g pg my-page --dry-run && npm run ng -- g c my-component --dry-run" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Slide-tutorial/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Slide-tutorial/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Slide-tutorial/src/app/app.component.scss -------------------------------------------------------------------------------- /Slide-tutorial/src/app/pages/dashboard/dashboard-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { DashboardPage } from './dashboard.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: DashboardPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class DashboardPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Slide-tutorial/src/app/pages/dashboard/dashboard.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { DashboardPageRoutingModule } from './dashboard-routing.module'; 8 | 9 | import { DashboardPage } from './dashboard.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | DashboardPageRoutingModule 17 | ], 18 | declarations: [DashboardPage] 19 | }) 20 | export class DashboardPageModule {} 21 | -------------------------------------------------------------------------------- /Slide-tutorial/src/app/pages/dashboard/dashboard.page.scss: -------------------------------------------------------------------------------- 1 | ion-toolbar { 2 | --background: #fbc02d; 3 | --color: white; 4 | } 5 | ion-button { 6 | width: 80px; 7 | --background: #f9a825; 8 | --background-focused: #ffeb3b; 9 | } 10 | .activated { 11 | --color-activated: black; 12 | --color: #e0e0e0; 13 | --background: #00acc1; 14 | } 15 | .slide-card { 16 | height: 90%; 17 | width: 100%; 18 | } 19 | .vertical-slide > ion-slides { 20 | background-color: #e0e0e0; 21 | height: calc(100vh - 231px); 22 | } 23 | -------------------------------------------------------------------------------- /Slide-tutorial/src/app/pages/slide/slide-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { SlidePage } from './slide.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: SlidePage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class SlidePageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Slide-tutorial/src/app/pages/slide/slide.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { SlidePageRoutingModule } from './slide-routing.module'; 8 | 9 | import { SlidePage } from './slide.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | SlidePageRoutingModule 17 | ], 18 | declarations: [SlidePage] 19 | }) 20 | export class SlidePageModule {} 21 | -------------------------------------------------------------------------------- /Slide-tutorial/src/app/pages/slide/slide.page.scss: -------------------------------------------------------------------------------- 1 | ion-slides { 2 | height: 100%; 3 | } 4 | 5 | .bg-1 { 6 | // background-color: #00acc1; 7 | background-image: url('../../../assets/images/1.jpg'); 8 | background-size: cover; 9 | } 10 | .bg-2 { 11 | // background-color: #fbc02d; 12 | background-image: url('../../../assets/images/2.jpg'); 13 | background-size: cover; 14 | } 15 | .bg-3 { 16 | // background-color: #7cb342; 17 | background-image: url('../../../assets/images/3.jpg'); 18 | background-size: cover; 19 | } 20 | -------------------------------------------------------------------------------- /Slide-tutorial/src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Slide-tutorial/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /Slide-tutorial/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Slide-tutorial/src/assets/images/1.jpg -------------------------------------------------------------------------------- /Slide-tutorial/src/assets/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Slide-tutorial/src/assets/images/2.jpg -------------------------------------------------------------------------------- /Slide-tutorial/src/assets/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Slide-tutorial/src/assets/images/3.jpg -------------------------------------------------------------------------------- /Slide-tutorial/src/assets/images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Slide-tutorial/src/assets/images/user.jpg -------------------------------------------------------------------------------- /Slide-tutorial/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Slide-tutorial/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /Slide-tutorial/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | (window as any).__Zone_disable_customElements = true; 6 | -------------------------------------------------------------------------------- /Slide-tutorial/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.d.ts" 14 | ], 15 | "exclude": [ 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Slide-tutorial/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } -------------------------------------------------------------------------------- /Slide-tutorial/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } -------------------------------------------------------------------------------- /Swipeable-Segment/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | -------------------------------------------------------------------------------- /Swipeable-Segment/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | -------------------------------------------------------------------------------- /Swipeable-Segment/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "MyApp", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /Swipeable-Segment/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('new App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should be blank', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toContain('Start with Ionic UI Components'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /Swipeable-Segment/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.deepCss('app-root ion-content')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Swipeable-Segment/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Swipeable-Segment/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /Swipeable-Segment/ionic.starter.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Blank Starter", 3 | "baseref": "master", 4 | "tarignore": [ 5 | "node_modules", 6 | "package-lock.json", 7 | "www" 8 | ], 9 | "scripts": { 10 | "test": "npm run lint && npm run ng -- build --configuration=ci && npm run ng -- build --prod --progress=false && npm run ng -- test --configuration=ci && npm run ng -- e2e --configuration=ci && npm run ng -- g pg my-page --dry-run && npm run ng -- g c my-component --dry-run" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Swipeable-Segment/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | 6 | { 7 | path: '', 8 | redirectTo: 'swipable-segments', 9 | pathMatch: 'full' 10 | }, 11 | { 12 | path: 'swipable-segments', 13 | loadChildren: () => import('./pages/swipable-segments/swipable-segments.module').then( m => m.SwipableSegmentsPageModule) 14 | } 15 | ]; 16 | 17 | @NgModule({ 18 | imports: [ 19 | RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) 20 | ], 21 | exports: [RouterModule] 22 | }) 23 | export class AppRoutingModule { } 24 | -------------------------------------------------------------------------------- /Swipeable-Segment/src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | .my-custom-menu { 2 | // --width: 100%; 3 | } 4 | .center { 5 | display: flex; 6 | justify-content: center; 7 | width: 100%; 8 | } 9 | // backdrop { 10 | // opacity: 0; 11 | // } 12 | 13 | -------------------------------------------------------------------------------- /Swipeable-Segment/src/app/pages/swipable-segments/swipable-segments-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { SwipableSegmentsPage } from './swipable-segments.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: SwipableSegmentsPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class SwipableSegmentsPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Swipeable-Segment/src/app/pages/swipable-segments/swipable-segments.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { SwipableSegmentsPageRoutingModule } from './swipable-segments-routing.module'; 8 | 9 | import { SwipableSegmentsPage } from './swipable-segments.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | SwipableSegmentsPageRoutingModule 17 | ], 18 | declarations: [SwipableSegmentsPage] 19 | }) 20 | export class SwipableSegmentsPageModule {} 21 | -------------------------------------------------------------------------------- /Swipeable-Segment/src/app/pages/swipable-segments/swipable-segments.page.scss: -------------------------------------------------------------------------------- 1 | ion-slides { 2 | height: 92%; 3 | } 4 | ion-card { 5 | height: 95%; 6 | width: 100%; 7 | --background: #e3f2fd; 8 | // --color:white 9 | } 10 | -------------------------------------------------------------------------------- /Swipeable-Segment/src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Swipeable-Segment/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /Swipeable-Segment/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Swipeable-Segment/src/assets/images/1.jpg -------------------------------------------------------------------------------- /Swipeable-Segment/src/assets/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Swipeable-Segment/src/assets/images/2.jpg -------------------------------------------------------------------------------- /Swipeable-Segment/src/assets/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Swipeable-Segment/src/assets/images/3.jpg -------------------------------------------------------------------------------- /Swipeable-Segment/src/assets/images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/Swipeable-Segment/src/assets/images/user.jpg -------------------------------------------------------------------------------- /Swipeable-Segment/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Swipeable-Segment/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /Swipeable-Segment/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | (window as any).__Zone_disable_customElements = true; 6 | -------------------------------------------------------------------------------- /Swipeable-Segment/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.d.ts" 14 | ], 15 | "exclude": [ 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Swipeable-Segment/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } -------------------------------------------------------------------------------- /Swipeable-Segment/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } -------------------------------------------------------------------------------- /services ionic 5/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | -------------------------------------------------------------------------------- /services ionic 5/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. 13 | -------------------------------------------------------------------------------- /services ionic 5/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "MyApp", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /services ionic 5/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('new App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should be blank', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toContain('Start with Ionic UI Components'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /services ionic 5/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.deepCss('app-root ion-content')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /services ionic 5/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /services ionic 5/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /services ionic 5/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | 6 | { 7 | path: '', 8 | loadChildren: () => import('./home/home.module').then(m => m.HomePageModule) 9 | } 10 | 11 | 12 | ]; 13 | 14 | @NgModule({ 15 | imports: [ 16 | RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) 17 | ], 18 | exports: [RouterModule] 19 | }) 20 | export class AppRoutingModule { } 21 | -------------------------------------------------------------------------------- /services ionic 5/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /services ionic 5/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/services ionic 5/src/app/app.component.scss -------------------------------------------------------------------------------- /services ionic 5/src/app/home/home-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { HomePage } from './home.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: HomePage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class HomePageRoutingModule {} 18 | -------------------------------------------------------------------------------- /services ionic 5/src/app/home/home.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { HomePageRoutingModule } from './home-routing.module'; 8 | 9 | import { HomePage } from './home.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | HomePageRoutingModule 17 | ], 18 | declarations: [HomePage] 19 | }) 20 | export class HomePageModule {} 21 | -------------------------------------------------------------------------------- /services ionic 5/src/app/home/home.page.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/services ionic 5/src/app/home/home.page.scss -------------------------------------------------------------------------------- /services ionic 5/src/app/service/http.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { HttpService } from './http.service'; 4 | 5 | describe('HttpService', () => { 6 | let service: HttpService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(HttpService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /services ionic 5/src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/services ionic 5/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /services ionic 5/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/services ionic 5/src/assets/images/1.jpg -------------------------------------------------------------------------------- /services ionic 5/src/assets/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/services ionic 5/src/assets/images/2.jpg -------------------------------------------------------------------------------- /services ionic 5/src/assets/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/services ionic 5/src/assets/images/3.jpg -------------------------------------------------------------------------------- /services ionic 5/src/assets/images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techassembler/Ionic-5-Angular/77a0588b07867c380da29eb35aaca5b74f1a4d75/services ionic 5/src/assets/images/user.jpg -------------------------------------------------------------------------------- /services ionic 5/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /services ionic 5/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /services ionic 5/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | (window as any).__Zone_disable_customElements = true; 6 | -------------------------------------------------------------------------------- /services ionic 5/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.d.ts" 14 | ], 15 | "exclude": [ 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /services ionic 5/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } -------------------------------------------------------------------------------- /services ionic 5/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } --------------------------------------------------------------------------------