├── .gitignore ├── README.md ├── 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 │ ├── firestore.service.ts │ └── home │ │ ├── home.module.ts │ │ ├── home.page.html │ │ ├── home.page.scss │ │ ├── home.page.spec.ts │ │ └── home.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 /.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 | /android 33 | src/app/config/firebase.ts 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Simplistic CRUD ionic 5 firestore TODO app example 2 | 3 | This is a very simplistic CRUD (Create, Read, Update, Delete) Created with ionic 5 and firestore (database). 4 | 5 | Note: 6 | I used this design as inspiration: [https://dribbble.com/shots/4782162-To-Do-App-Concept-Minimal](https://dribbble.com/shots/4782162-To-Do-App-Concept-Minimal) 7 | 8 | The idea here is to illustrate how to create a simple CRUD with firestore. 9 | 10 | ![todo](https://user-images.githubusercontent.com/8228498/79624393-5633dd00-80ef-11ea-9cad-f42da712c18c.gif) 11 | 12 | 13 | ##Installation 14 | 15 | My advice is that you install nvm (to manage your node versions), here is [tutorial](http://www.jomendez.com/2018/06/03/install-multiple-versions-node-using-nvm/) step by step. 16 | 17 | After you install nvm run the following commands: 18 | 19 | ```bash 20 | nvm install 12 21 | ``` 22 | 23 | If everything went well you'll have installed node 12.0.0 24 | 25 | Now you'll need to install ionic cli: 26 | 27 | ```bash 28 | npm install -g @ionic/cli 29 | ``` 30 | 31 | Now is time to download the project and install it's dependencies. 32 | 33 | ```bash 34 | git clone https://github.com/jomendez/ionic-5-crud-todo-with-firestore.git 35 | cd ionic-5-crud-todo-with-firestore 36 | npm install 37 | ``` 38 | 39 | 40 | Next step it to create a config file that will contain your firebase config keys here: 41 | 42 | `src/app/config/firebase.ts` 43 | 44 | If you are on bash you can use the following command: 45 | 46 | ```bash 47 | touch src/app/config/firebase.ts 48 | ``` 49 | 50 | Assuming that you are familiar with firebase and already have an account, paste your configuration info into the firebase.ts file, it should looks something like this (This is just and example), If you are not familiar with firebase or doesn't have an account, I'll provide more information on how to do it bellow 51 | 52 | Example of configuration: 53 | ```javascript 54 | export const firebaseConfig = { 55 | apiKey: "AIzaSwERfdilPYtcNDfvFR6x944EowerdfghfSDFsfg", 56 | authDomain: "crud-456657.firebaseapp.com", 57 | databaseURL: "https://crud-456657.firebaseio.com", 58 | projectId: "crud-456657", 59 | storageBucket: "crud-456657.appspot.com", 60 | messagingSenderId: "10130122343423", 61 | appId: "1:1013012342277:web:sd9f8sd8fs8dfs89df89s", 62 | measurementId: "G-3FGJ34GFGJK" 63 | }; 64 | ``` 65 | 66 | ## How to get your firebase configuration 67 | 68 | Go to [https://firebase.google.com/](https://firebase.google.com/) and login with your account or create a new one. 69 | 70 | ### Click on create a web app (This is the screen that you'll see the first time you create a projects): 71 | 72 | ![image](https://user-images.githubusercontent.com/8228498/79625856-f0008780-80f9-11ea-86be-63a4ecff5262.png) 73 | 74 | ### Or add a new project (If you have already other projects created): 75 | 76 | ![image](https://user-images.githubusercontent.com/8228498/79625190-399aa380-80f5-11ea-8df0-b8dd8b9606e6.png) 77 | 78 | 79 | ### Enter the name of your project, accept the terms, and finish the other two steps on the wizard: 80 | 81 | ![image](https://user-images.githubusercontent.com/8228498/79625222-75ce0400-80f5-11ea-8b54-d1c5a88ed181.png) 82 | 83 | 84 | ### Next you'll see something like this, from here you can grab the configuration key 85 | 86 | ![image](https://user-images.githubusercontent.com/8228498/79625945-87fe7100-80fa-11ea-930a-aa5d235a813c.png) 87 | 88 | ### If you missed the previous screen you can always go to the cog wheel on the left side panel, and click on project settings. 89 | 90 | ![image](https://user-images.githubusercontent.com/8228498/79625424-2688d300-80f7-11ea-829b-ce117a7cbb7a.png) 91 | 92 | 93 | Now scroll down to the Your App section and click on config radio button, and copy the code highlighted on the image bellow, and paste it on the firebase.ts file 94 | 95 | ![image](https://user-images.githubusercontent.com/8228498/79625529-b7f84500-80f7-11ea-8233-49c9ec8dd683.png) -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "defaultProject": "app", 5 | "newProjectRoot": "projects", 6 | "projects": { 7 | "app": { 8 | "root": "", 9 | "sourceRoot": "src", 10 | "projectType": "application", 11 | "prefix": "app", 12 | "schematics": {}, 13 | "architect": { 14 | "build": { 15 | "builder": "@angular-devkit/build-angular:browser", 16 | "options": { 17 | "outputPath": "www", 18 | "index": "src/index.html", 19 | "main": "src/main.ts", 20 | "polyfills": "src/polyfills.ts", 21 | "tsConfig": "tsconfig.app.json", 22 | "assets": [ 23 | { 24 | "glob": "**/*", 25 | "input": "src/assets", 26 | "output": "assets" 27 | }, 28 | { 29 | "glob": "**/*.svg", 30 | "input": "node_modules/ionicons/dist/ionicons/svg", 31 | "output": "./svg" 32 | } 33 | ], 34 | "styles": [ 35 | { 36 | "input": "src/theme/variables.scss" 37 | }, 38 | { 39 | "input": "src/global.scss" 40 | } 41 | ], 42 | "scripts": [] 43 | }, 44 | "configurations": { 45 | "production": { 46 | "fileReplacements": [ 47 | { 48 | "replace": "src/environments/environment.ts", 49 | "with": "src/environments/environment.prod.ts" 50 | } 51 | ], 52 | "optimization": true, 53 | "outputHashing": "all", 54 | "sourceMap": false, 55 | "extractCss": true, 56 | "namedChunks": false, 57 | "aot": true, 58 | "extractLicenses": true, 59 | "vendorChunk": false, 60 | "buildOptimizer": true, 61 | "budgets": [ 62 | { 63 | "type": "initial", 64 | "maximumWarning": "2mb", 65 | "maximumError": "5mb" 66 | } 67 | ] 68 | }, 69 | "ci": { 70 | "progress": false 71 | } 72 | } 73 | }, 74 | "serve": { 75 | "builder": "@angular-devkit/build-angular:dev-server", 76 | "options": { 77 | "browserTarget": "app:build" 78 | }, 79 | "configurations": { 80 | "production": { 81 | "browserTarget": "app:build:production" 82 | }, 83 | "ci": { 84 | "progress": false 85 | } 86 | } 87 | }, 88 | "extract-i18n": { 89 | "builder": "@angular-devkit/build-angular:extract-i18n", 90 | "options": { 91 | "browserTarget": "app:build" 92 | } 93 | }, 94 | "test": { 95 | "builder": "@angular-devkit/build-angular:karma", 96 | "options": { 97 | "main": "src/test.ts", 98 | "polyfills": "src/polyfills.ts", 99 | "tsConfig": "tsconfig.spec.json", 100 | "karmaConfig": "karma.conf.js", 101 | "styles": [], 102 | "scripts": [], 103 | "assets": [ 104 | { 105 | "glob": "favicon.ico", 106 | "input": "src/", 107 | "output": "/" 108 | }, 109 | { 110 | "glob": "**/*", 111 | "input": "src/assets", 112 | "output": "/assets" 113 | } 114 | ] 115 | }, 116 | "configurations": { 117 | "ci": { 118 | "progress": false, 119 | "watch": false 120 | } 121 | } 122 | }, 123 | "lint": { 124 | "builder": "@angular-devkit/build-angular:tslint", 125 | "options": { 126 | "tsConfig": [ 127 | "tsconfig.app.json", 128 | "tsconfig.spec.json", 129 | "e2e/tsconfig.json" 130 | ], 131 | "exclude": ["**/node_modules/**"] 132 | } 133 | }, 134 | "e2e": { 135 | "builder": "@angular-devkit/build-angular:protractor", 136 | "options": { 137 | "protractorConfig": "e2e/protractor.conf.js", 138 | "devServerTarget": "app:serve" 139 | }, 140 | "configurations": { 141 | "production": { 142 | "devServerTarget": "app:serve:production" 143 | }, 144 | "ci": { 145 | "devServerTarget": "app:serve:ci" 146 | } 147 | } 148 | }, 149 | "ionic-cordova-build": { 150 | "builder": "@ionic/angular-toolkit:cordova-build", 151 | "options": { 152 | "browserTarget": "app:build" 153 | }, 154 | "configurations": { 155 | "production": { 156 | "browserTarget": "app:build:production" 157 | } 158 | } 159 | }, 160 | "ionic-cordova-serve": { 161 | "builder": "@ionic/angular-toolkit:cordova-serve", 162 | "options": { 163 | "cordovaBuildTarget": "app:ionic-cordova-build", 164 | "devServerTarget": "app:serve" 165 | }, 166 | "configurations": { 167 | "production": { 168 | "cordovaBuildTarget": "app:ionic-cordova-build:production", 169 | "devServerTarget": "app:serve:production" 170 | } 171 | } 172 | } 173 | } 174 | } 175 | }, 176 | "cli": { 177 | "defaultCollection": "@ionic/angular-toolkit" 178 | }, 179 | "schematics": { 180 | "@ionic/angular-toolkit:component": { 181 | "styleext": "scss" 182 | }, 183 | "@ionic/angular-toolkit:page": { 184 | "styleext": "scss" 185 | } 186 | } 187 | } 188 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "SimplisticTodo", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "www", 7 | "cordova": {} 8 | } 9 | -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './src/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: require('path').join(__dirname, './tsconfig.json') 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "SimplisticTodo", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular" 7 | } 8 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../coverage'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "SimplisticTodo", 3 | "version": "0.0.1", 4 | "author": "Ionic Framework", 5 | "homepage": "https://ionicframework.com/", 6 | "scripts": { 7 | "ng": "ng", 8 | "start": "ng serve", 9 | "build": "ng build", 10 | "test": "ng test", 11 | "lint": "ng lint", 12 | "e2e": "ng e2e" 13 | }, 14 | "private": true, 15 | "dependencies": { 16 | "@angular/common": "~8.2.14", 17 | "@angular/core": "~8.2.14", 18 | "@angular/forms": "~8.2.14", 19 | "@angular/platform-browser": "~8.2.14", 20 | "@angular/platform-browser-dynamic": "~8.2.14", 21 | "@angular/router": "~8.2.14", 22 | "@capacitor/android": "^2.0.1", 23 | "@capacitor/core": "2.0.1", 24 | "@ionic-native/core": "^5.0.7", 25 | "@ionic-native/splash-screen": "^5.0.0", 26 | "@ionic-native/status-bar": "^5.0.0", 27 | "@ionic/angular": "^5.0.0", 28 | "angularfire2": "^5.4.2", 29 | "core-js": "^2.5.4", 30 | "firebase": "^7.14.0", 31 | "rxjs": "~6.5.1", 32 | "tslib": "^1.9.0", 33 | "zone.js": "~0.9.1" 34 | }, 35 | "devDependencies": { 36 | "@angular-devkit/build-angular": "~0.803.20", 37 | "@angular/cli": "~8.3.23", 38 | "@angular/compiler": "~8.2.14", 39 | "@angular/compiler-cli": "~8.2.14", 40 | "@angular/language-service": "~8.2.14", 41 | "@capacitor/cli": "2.0.1", 42 | "@ionic/angular-toolkit": "^2.1.1", 43 | "@ionic/lab": "3.1.3", 44 | "@types/jasmine": "~3.3.8", 45 | "@types/jasminewd2": "~2.0.3", 46 | "@types/node": "~8.9.4", 47 | "codelyzer": "^5.0.0", 48 | "jasmine-core": "~3.4.0", 49 | "jasmine-spec-reporter": "~4.2.1", 50 | "karma": "~4.1.0", 51 | "karma-chrome-launcher": "~2.2.0", 52 | "karma-coverage-istanbul-reporter": "~2.0.1", 53 | "karma-jasmine": "~2.0.1", 54 | "karma-jasmine-html-reporter": "^1.4.0", 55 | "protractor": "~5.4.0", 56 | "ts-node": "~7.0.0", 57 | "tslint": "~5.15.0", 58 | "typescript": "~3.4.3" 59 | }, 60 | "description": "An Ionic project" 61 | } 62 | -------------------------------------------------------------------------------- /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 | { path: '', redirectTo: 'home', pathMatch: 'full' }, 6 | { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)}, 7 | ]; 8 | 9 | @NgModule({ 10 | imports: [ 11 | RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) 12 | ], 13 | exports: [RouterModule] 14 | }) 15 | export class AppRoutingModule { } 16 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jomendez/ionic-5-crud-todo-with-firestore/786d07fee8c45cf07fb843413ad5889d6c932012/src/app/app.component.scss -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 2 | import { TestBed, async } from '@angular/core/testing'; 3 | 4 | import { Platform } from '@ionic/angular'; 5 | import { SplashScreen } from '@ionic-native/splash-screen/ngx'; 6 | import { StatusBar } from '@ionic-native/status-bar/ngx'; 7 | 8 | import { AppComponent } from './app.component'; 9 | 10 | describe('AppComponent', () => { 11 | 12 | let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy; 13 | 14 | beforeEach(async(() => { 15 | statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']); 16 | splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']); 17 | platformReadySpy = Promise.resolve(); 18 | platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy }); 19 | 20 | TestBed.configureTestingModule({ 21 | declarations: [AppComponent], 22 | schemas: [CUSTOM_ELEMENTS_SCHEMA], 23 | providers: [ 24 | { provide: StatusBar, useValue: statusBarSpy }, 25 | { provide: SplashScreen, useValue: splashScreenSpy }, 26 | { provide: Platform, useValue: platformSpy }, 27 | ], 28 | }).compileComponents(); 29 | })); 30 | 31 | it('should create the app', () => { 32 | const fixture = TestBed.createComponent(AppComponent); 33 | const app = fixture.debugElement.componentInstance; 34 | expect(app).toBeTruthy(); 35 | }); 36 | 37 | it('should initialize the app', async () => { 38 | TestBed.createComponent(AppComponent); 39 | expect(platformSpy.ready).toHaveBeenCalled(); 40 | await platformReadySpy; 41 | expect(statusBarSpy.styleDefault).toHaveBeenCalled(); 42 | expect(splashScreenSpy.hide).toHaveBeenCalled(); 43 | }); 44 | 45 | // TODO: add more tests! 46 | 47 | }); 48 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { Platform } from '@ionic/angular'; 4 | import { SplashScreen } from '@ionic-native/splash-screen/ngx'; 5 | import { StatusBar } from '@ionic-native/status-bar/ngx'; 6 | 7 | @Component({ 8 | selector: 'app-root', 9 | templateUrl: 'app.component.html', 10 | styleUrls: ['app.component.scss'] 11 | }) 12 | export class AppComponent { 13 | constructor( 14 | private platform: Platform, 15 | private splashScreen: SplashScreen, 16 | private statusBar: StatusBar 17 | ) { 18 | this.initializeApp(); 19 | } 20 | 21 | initializeApp() { 22 | this.platform.ready().then(() => { 23 | this.statusBar.styleDefault(); 24 | this.splashScreen.hide(); 25 | }); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { RouteReuseStrategy } from '@angular/router'; 4 | import { SplashScreen } from '@ionic-native/splash-screen/ngx'; 5 | import { StatusBar } from '@ionic-native/status-bar/ngx'; 6 | import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; 7 | import { AngularFireModule } from 'angularfire2'; 8 | import { AngularFirestoreModule } from 'angularfire2/firestore'; 9 | import { AppRoutingModule } from './app-routing.module'; 10 | import { AppComponent } from './app.component'; 11 | import { firebaseConfig } from './config/firebase'; 12 | 13 | @NgModule({ 14 | declarations: [AppComponent], 15 | entryComponents: [], 16 | imports: [ 17 | BrowserModule, 18 | IonicModule.forRoot(), 19 | AppRoutingModule, 20 | AngularFireModule.initializeApp(firebaseConfig), 21 | AngularFirestoreModule 22 | ], 23 | providers: [ 24 | StatusBar, 25 | SplashScreen, 26 | { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } 27 | ], 28 | bootstrap: [AppComponent] 29 | }) 30 | export class AppModule { } 31 | -------------------------------------------------------------------------------- /src/app/firestore.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Observable } from 'rxjs'; 3 | import { AngularFirestore, DocumentChangeAction, DocumentReference } from 'angularfire2/firestore'; 4 | 5 | @Injectable({ 6 | providedIn: 'root' 7 | }) 8 | export class FirestoreService { 9 | 10 | constructor(private fireStore: AngularFirestore) { } 11 | 12 | //CRUD operation methods------------------------------------------------------------------------------------------ 13 | 14 | getAllDocuments(collection: string): Observable[]> { 15 | return this.fireStore.collection(collection).snapshotChanges(); 16 | } 17 | 18 | deleteDocument(collectionName: string, docID: string): Promise { 19 | return new Promise((resolve, reject) => { 20 | this.fireStore 21 | .collection(collectionName) 22 | .doc(docID) 23 | .delete() 24 | .then(obj => { 25 | resolve(obj); 26 | }) 27 | .catch((error: any) => { 28 | reject(error); 29 | }); 30 | }); 31 | } 32 | 33 | addDocument(collectionName: string, dataObj: T): Promise { 34 | return new Promise((resolve, reject) => { 35 | this.fireStore.collection(collectionName).add(dataObj) 36 | .then(obj => { 37 | resolve(obj); 38 | }) 39 | .catch(error => { 40 | reject(error); 41 | }); 42 | }); 43 | } 44 | 45 | updateDocument(collectionName: string, docID: string, dataObj: T): Promise { 46 | return new Promise((resolve, reject) => { 47 | this.fireStore 48 | .collection(collectionName) 49 | .doc(docID) 50 | .update(dataObj) 51 | .then(obj => { 52 | resolve(obj); 53 | }) 54 | .catch(error => { 55 | reject(error); 56 | }); 57 | }); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /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 { RouterModule } from '@angular/router'; 6 | 7 | import { HomePage } from './home.page'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | FormsModule, 13 | IonicModule, 14 | RouterModule.forChild([ 15 | { 16 | path: '', 17 | component: HomePage 18 | } 19 | ]) 20 | ], 21 | declarations: [HomePage] 22 | }) 23 | export class HomePageModule {} 24 | -------------------------------------------------------------------------------- /src/app/home/home.page.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
TODO
6 |
7 |
8 | 9 |
List
10 | 11 | 12 | 13 |

{{message.text}}

14 | 15 | 16 | 19 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 32 | 33 |
34 | ADD NEW TASK 35 |
36 | 37 | 38 | 39 |
40 | e.g. Buy groceries 41 |
42 | 43 | 44 | 45 | 46 | Save 47 | 48 |
49 | -------------------------------------------------------------------------------- /src/app/home/home.page.scss: -------------------------------------------------------------------------------- 1 | $box-shadow: 4px 4px 5px 1px rgba(209, 209, 209, 0.85); 2 | $gradient: linear-gradient(90deg, rgba(250, 124, 105, 1) 0%, rgba(250, 106, 107, 1) 62%, rgba(251, 84, 113, 1) 100%); 3 | 4 | @mixin gradient() { 5 | // value1 #fa7c69 6 | // value2 #fa6a6b 7 | // value3 #fb5471 8 | //background: rgb(250, 124, 105); 9 | background: $gradient; 10 | } 11 | 12 | #container { 13 | text-align: center; 14 | 15 | position: absolute; 16 | left: 0; 17 | right: 0; 18 | top: 50%; 19 | transform: translateY(-50%); 20 | } 21 | 22 | #container strong { 23 | font-size: 20px; 24 | line-height: 26px; 25 | } 26 | 27 | #container p { 28 | font-size: 16px; 29 | line-height: 22px; 30 | 31 | color: #8c8c8c; 32 | 33 | margin: 0; 34 | } 35 | 36 | #container a { 37 | text-decoration: none; 38 | } 39 | 40 | ion-content ion-toolbar { 41 | --background: translucent; 42 | } 43 | 44 | .big-circle { 45 | max-width: 411px; 46 | max-height: 411px; 47 | border-radius: 100%; 48 | width: 100%; 49 | height: 100vw; 50 | box-shadow: $box-shadow; 51 | @include gradient(); 52 | .todo-text { 53 | font-size: 3rem; 54 | color: white; 55 | transform: translate(10px 10px); 56 | transform: translate(150px, 50px); 57 | font-weight: bold; 58 | } 59 | } 60 | 61 | .medium-circle { 62 | border-radius: 100%; 63 | width: 30%; 64 | height: 30vw; 65 | max-width: 123px; 66 | max-height: 123px; 67 | @include gradient(); 68 | } 69 | 70 | .small-circle { 71 | border-radius: 100%; 72 | width: 20%; 73 | height: 20vw; 74 | max-width: 82px; 75 | max-height: 82px; 76 | @include gradient(); 77 | } 78 | 79 | header { 80 | position: relative; 81 | height: 210px; 82 | .top-circle-big { 83 | z-index: 1; 84 | transform: translate(-100px, -210px); 85 | .inner-circle-small { 86 | position: relative; 87 | top: 140px; 88 | left: 250px; 89 | } 90 | .inner-circle-medium { 91 | position: relative; 92 | top: 210px; 93 | left: 100px; 94 | } 95 | } 96 | } 97 | 98 | ion-content { 99 | --offset-bottom: -102px !important; 100 | margin-top: 16px; 101 | .list-header { 102 | font-size: 1.7rem; 103 | color: black; 104 | margin: 16px; 105 | font-weight: bold; 106 | } 107 | ion-list { 108 | ion-icon[name="trash-outline"], 109 | ion-icon[name="create-outline"] { 110 | font-size: 2rem; 111 | } 112 | ion-icon[name="trash-outline"] { 113 | color: red; 114 | } 115 | ion-item { 116 | p { 117 | &.checked { 118 | text-decoration: line-through rgba(250, 106, 107, 1); 119 | } 120 | font-size: 1.2rem; 121 | } 122 | } 123 | } 124 | 125 | ion-fab-button, 126 | ion-button { 127 | --background: linear-gradient( 128 | 90deg, 129 | rgba(250, 124, 105, 1) 0%, 130 | rgba(250, 106, 107, 1) 62%, 131 | rgba(251, 84, 113, 1) 100% 132 | ); 133 | } 134 | 135 | ion-button { 136 | margin: 74px 16px 16px 16px; 137 | } 138 | 139 | ion-fab-button { 140 | position: fixed; 141 | bottom: 16px; 142 | right: 16px; 143 | width: 80px !important; 144 | height: 80px !important; 145 | } 146 | 147 | .form { 148 | width: 100%; 149 | height: calc(100vh - 160px); 150 | position: fixed; 151 | bottom: 50px; 152 | transition: transform 0.7s ease-in-out; 153 | 154 | ion-list { 155 | background-color: white; 156 | margin: 16px; 157 | border: 2px solid rgba(250, 106, 107, 1); 158 | height: -webkit-fill-available; 159 | border-radius: 8px; 160 | box-shadow: $box-shadow; 161 | ion-item { 162 | &.no-border { 163 | --border-color: white; 164 | } 165 | --border-color: grey; // default underline color 166 | --highlight-color-invalid: red; // invalid underline color 167 | --highlight-color-valid: black; // valid underline color 168 | } 169 | } 170 | 171 | .new-task { 172 | font-size: 2rem; 173 | font-weight: bolder; 174 | color: black; 175 | word-wrap: break-word; 176 | width: 160px; 177 | margin: 8px 0px 32px 0px; 178 | } 179 | 180 | .close { 181 | font-size: 3rem; 182 | transform: translate(10px, -30px); 183 | color: rgba(251, 84, 113, 1); 184 | } 185 | 186 | .placeholder { 187 | color: rgb(175, 176, 180); 188 | font-size: 1.5rem; 189 | } 190 | } 191 | .form-open { 192 | transform: translateY(0%); 193 | } 194 | .form-closed { 195 | transform: translateY(120%); 196 | } 197 | } 198 | -------------------------------------------------------------------------------- /src/app/home/home.page.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { IonicModule } from '@ionic/angular'; 4 | import { AngularFirestore } from 'angularfire2/firestore'; 5 | import { BehaviorSubject } from 'rxjs'; 6 | import { HomePage } from './home.page'; 7 | import { DebugElement } from '@angular/core'; 8 | import { By } from '@angular/platform-browser'; 9 | 10 | 11 | describe('HomePage', () => { 12 | let component: HomePage; 13 | let fixture: ComponentFixture; 14 | let de: DebugElement; 15 | 16 | const FirestoreStub = { 17 | collection: (name: string) => ({ 18 | doc: (_id: string) => ({ 19 | valueChanges: () => new BehaviorSubject({ foo: 'bar' }), 20 | set: (_d: any) => new Promise((resolve, _reject) => resolve()), 21 | }), 22 | snapshotChanges: () => ({ subscribe: () => { } }) 23 | }), 24 | }; 25 | 26 | beforeEach(async(() => { 27 | TestBed.configureTestingModule({ 28 | declarations: [ 29 | HomePage 30 | ], 31 | imports: [ 32 | IonicModule.forRoot(), 33 | FormsModule 34 | ], 35 | providers: [ 36 | { provide: AngularFirestore, useValue: FirestoreStub }, 37 | ], 38 | }).compileComponents(); 39 | 40 | fixture = TestBed.createComponent(HomePage); 41 | component = fixture.componentInstance; 42 | fixture.detectChanges(); 43 | })); 44 | 45 | beforeEach(() => { 46 | fixture = TestBed.createComponent(HomePage); 47 | component = fixture.componentInstance; 48 | de = fixture.debugElement.query(By.css('.big-circle')); 49 | }); 50 | 51 | it('should create', () => { 52 | expect(component).toBeTruthy(); 53 | }); 54 | 55 | it('should have big circle', () => { 56 | fixture.detectChanges(); 57 | const circle = de.nativeElement; 58 | expect(circle).toBeTruthy(); 59 | }); 60 | 61 | it('should have "TODO" title', () => { 62 | fixture.detectChanges(); 63 | const todo: HTMLImageElement = fixture.debugElement.query(By.css('.todo-text')).nativeElement; 64 | expect(todo.innerText).toContain('TODO'); 65 | }); 66 | 67 | it('should show have add button', () => { 68 | fixture.detectChanges(); 69 | const addBtn: HTMLImageElement = fixture.debugElement.query(By.css('ion-fab-button')).nativeElement; 70 | expect(addBtn).toBeTruthy(); 71 | }); 72 | }); 73 | -------------------------------------------------------------------------------- /src/app/home/home.page.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewChild } from '@angular/core'; 2 | import { FirestoreService } from '../firestore.service'; 3 | 4 | interface Todo { 5 | id: string; 6 | text: string; 7 | checked: boolean; 8 | } 9 | 10 | @Component({ 11 | selector: 'app-home', 12 | templateUrl: 'home.page.html', 13 | styleUrls: ['home.page.scss'], 14 | }) 15 | export class HomePage { 16 | messages: Todo[]; 17 | model: Todo; 18 | isEditing: boolean = false; 19 | showForm: boolean; 20 | @ViewChild('slidingList', {static: false}) slidingList; 21 | 22 | constructor(private firestore: FirestoreService) { 23 | this.loadData(); 24 | this.model = { 25 | id: '', 26 | text: '', 27 | checked: false 28 | } 29 | } 30 | 31 | loadData() { 32 | this.firestore.getAllDocuments("messages").subscribe((e) => { 33 | let arr: Todo[] = []; 34 | if (e && e.length > 0) { 35 | e.forEach(item => { 36 | const obj: Todo = item.payload.doc.data() as unknown as Todo; 37 | obj.id = item.payload.doc.id; 38 | arr.push(obj) 39 | }); 40 | } 41 | 42 | this.messages = arr; 43 | }); 44 | } 45 | 46 | toggleCheck(item): void { 47 | this.isEditing = true; 48 | item.checked = !item.checked; 49 | this.model = item; 50 | this.addMessage(); 51 | } 52 | 53 | addMessage(): void { 54 | if (!this.model.text) { 55 | return; 56 | } 57 | if (!this.isEditing) { 58 | this.firestore.addDocument("messages", this.model).then(() => { 59 | this.loadData();//refresh view 60 | }); 61 | } else { 62 | this.firestore.updateDocument("messages", this.model.id, this.model).then(() => { 63 | this.loadData();//refresh view 64 | }); 65 | } 66 | this.isEditing = false; 67 | //clear form 68 | this.model.checked = false; 69 | this.model.text = ''; 70 | this.showForm = false; 71 | } 72 | 73 | updateMessage(obj) { 74 | this.showForm = true; 75 | this.model = obj; 76 | this.isEditing = true; 77 | this.slidingList.closeSlidingItems(); 78 | } 79 | 80 | deleteMessage(id: string) { 81 | this.slidingList.closeSlidingItems(); 82 | this.firestore.deleteDocument("messages", id).then(() => { 83 | this.loadData();//refresh view 84 | this.isEditing = false; 85 | }); 86 | } 87 | 88 | 89 | addItem(): void { 90 | this.slidingList.closeSlidingItems(); 91 | this.showForm = !this.showForm; 92 | } 93 | 94 | trackByFn(index: number, item: any): number { 95 | return index; // or item.id 96 | } 97 | 98 | 99 | 100 | } 101 | -------------------------------------------------------------------------------- /src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jomendez/ionic-5-crud-todo-with-firestore/786d07fee8c45cf07fb843413ad5889d6c932012/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /src/assets/shapes.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /src/global.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * App Global CSS 3 | * ---------------------------------------------------------------------------- 4 | * Put style rules here that you want to apply globally. These styles are for 5 | * the entire app and not just one component. Additionally, this file can be 6 | * used as an entry point to import other CSS/Sass files to be included in the 7 | * output CSS. 8 | * For more information on global stylesheets, visit the documentation: 9 | * https://ionicframework.com/docs/layout/global-stylesheets 10 | */ 11 | 12 | /* Core CSS required for Ionic components to work properly */ 13 | @import "~@ionic/angular/css/core.css"; 14 | 15 | /* Basic CSS for apps built with Ionic */ 16 | @import "~@ionic/angular/css/normalize.css"; 17 | @import "~@ionic/angular/css/structure.css"; 18 | @import "~@ionic/angular/css/typography.css"; 19 | @import "~@ionic/angular/css/display.css"; 20 | 21 | /* Optional CSS utils that can be commented out */ 22 | @import "~@ionic/angular/css/padding.css"; 23 | @import "~@ionic/angular/css/float-elements.css"; 24 | @import "~@ionic/angular/css/text-alignment.css"; 25 | @import "~@ionic/angular/css/text-transformation.css"; 26 | @import "~@ionic/angular/css/flex-utils.css"; 27 | 28 | @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); 29 | 30 | * { 31 | font-family: "Roboto", sans-serif; 32 | } 33 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ionic App 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 22 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 23 | 24 | /** 25 | * Web Animations `@angular/platform-browser/animations` 26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 28 | */ 29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 30 | 31 | /** 32 | * By default, zone.js will patch all possible macroTask and DomEvents 33 | * user can disable parts of macroTask/DomEvents patch by setting following flags 34 | * because those flags need to be set before `zone.js` being loaded, and webpack 35 | * will put import in the top of bundle, so user need to create a separate file 36 | * in this directory (for example: zone-flags.ts), and put the following flags 37 | * into that file, and then add the following code before importing zone.js. 38 | * import './zone-flags.ts'; 39 | * 40 | * The flags allowed in zone-flags.ts are listed here. 41 | * 42 | * The following flags will work for all browsers. 43 | * 44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 46 | * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 47 | * 48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 50 | * 51 | * (window as any).__Zone_enable_cross_context_check = true; 52 | * 53 | */ 54 | 55 | import './zone-flags'; 56 | 57 | /*************************************************************************************************** 58 | * Zone JS is required by default for Angular itself. 59 | */ 60 | 61 | import 'zone.js/dist/zone'; // Included with Angular CLI. 62 | 63 | 64 | /*************************************************************************************************** 65 | * APPLICATION IMPORTS 66 | */ 67 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/theme/variables.scss: -------------------------------------------------------------------------------- 1 | // Ionic Variables and Theming. For more info, please see: 2 | // http://ionicframework.com/docs/theming/ 3 | 4 | /** Ionic CSS Variables **/ 5 | :root { 6 | /** primary **/ 7 | --ion-color-primary: #3880ff; 8 | --ion-color-primary-rgb: 56, 128, 255; 9 | --ion-color-primary-contrast: #ffffff; 10 | --ion-color-primary-contrast-rgb: 255, 255, 255; 11 | --ion-color-primary-shade: #3171e0; 12 | --ion-color-primary-tint: #4c8dff; 13 | 14 | /** secondary **/ 15 | --ion-color-secondary: #3dc2ff; 16 | --ion-color-secondary-rgb: 61, 194, 255; 17 | --ion-color-secondary-contrast: #ffffff; 18 | --ion-color-secondary-contrast-rgb: 255, 255, 255; 19 | --ion-color-secondary-shade: #36abe0; 20 | --ion-color-secondary-tint: #50c8ff; 21 | 22 | /** tertiary **/ 23 | --ion-color-tertiary: #5260ff; 24 | --ion-color-tertiary-rgb: 82, 96, 255; 25 | --ion-color-tertiary-contrast: #ffffff; 26 | --ion-color-tertiary-contrast-rgb: 255, 255, 255; 27 | --ion-color-tertiary-shade: #4854e0; 28 | --ion-color-tertiary-tint: #6370ff; 29 | 30 | /** success **/ 31 | --ion-color-success: #2dd36f; 32 | --ion-color-success-rgb: 45, 211, 111; 33 | --ion-color-success-contrast: #ffffff; 34 | --ion-color-success-contrast-rgb: 255, 255, 255; 35 | --ion-color-success-shade: #28ba62; 36 | --ion-color-success-tint: #42d77d; 37 | 38 | /** warning **/ 39 | --ion-color-warning: #ffc409; 40 | --ion-color-warning-rgb: 255, 196, 9; 41 | --ion-color-warning-contrast: #000000; 42 | --ion-color-warning-contrast-rgb: 0, 0, 0; 43 | --ion-color-warning-shade: #e0ac08; 44 | --ion-color-warning-tint: #ffca22; 45 | 46 | /** danger **/ 47 | --ion-color-danger: #eb445a; 48 | --ion-color-danger-rgb: 235, 68, 90; 49 | --ion-color-danger-contrast: #ffffff; 50 | --ion-color-danger-contrast-rgb: 255, 255, 255; 51 | --ion-color-danger-shade: #cf3c4f; 52 | --ion-color-danger-tint: #ed576b; 53 | 54 | /** dark **/ 55 | --ion-color-dark: #222428; 56 | --ion-color-dark-rgb: 34, 36, 40; 57 | --ion-color-dark-contrast: #ffffff; 58 | --ion-color-dark-contrast-rgb: 255, 255, 255; 59 | --ion-color-dark-shade: #1e2023; 60 | --ion-color-dark-tint: #383a3e; 61 | 62 | /** medium **/ 63 | --ion-color-medium: #92949c; 64 | --ion-color-medium-rgb: 146, 148, 156; 65 | --ion-color-medium-contrast: #ffffff; 66 | --ion-color-medium-contrast-rgb: 255, 255, 255; 67 | --ion-color-medium-shade: #808289; 68 | --ion-color-medium-tint: #9d9fa6; 69 | 70 | /** light **/ 71 | --ion-color-light: #f4f5f8; 72 | --ion-color-light-rgb: 244, 245, 248; 73 | --ion-color-light-contrast: #000000; 74 | --ion-color-light-contrast-rgb: 0, 0, 0; 75 | --ion-color-light-shade: #d7d8da; 76 | --ion-color-light-tint: #f5f6f9; 77 | } 78 | 79 | @media (prefers-color-scheme: dark) { 80 | /* 81 | * Dark Colors 82 | * ------------------------------------------- 83 | */ 84 | 85 | body { 86 | --ion-color-primary: #428cff; 87 | --ion-color-primary-rgb: 66,140,255; 88 | --ion-color-primary-contrast: #ffffff; 89 | --ion-color-primary-contrast-rgb: 255,255,255; 90 | --ion-color-primary-shade: #3a7be0; 91 | --ion-color-primary-tint: #5598ff; 92 | 93 | --ion-color-secondary: #50c8ff; 94 | --ion-color-secondary-rgb: 80,200,255; 95 | --ion-color-secondary-contrast: #ffffff; 96 | --ion-color-secondary-contrast-rgb: 255,255,255; 97 | --ion-color-secondary-shade: #46b0e0; 98 | --ion-color-secondary-tint: #62ceff; 99 | 100 | --ion-color-tertiary: #6a64ff; 101 | --ion-color-tertiary-rgb: 106,100,255; 102 | --ion-color-tertiary-contrast: #ffffff; 103 | --ion-color-tertiary-contrast-rgb: 255,255,255; 104 | --ion-color-tertiary-shade: #5d58e0; 105 | --ion-color-tertiary-tint: #7974ff; 106 | 107 | --ion-color-success: #2fdf75; 108 | --ion-color-success-rgb: 47,223,117; 109 | --ion-color-success-contrast: #000000; 110 | --ion-color-success-contrast-rgb: 0,0,0; 111 | --ion-color-success-shade: #29c467; 112 | --ion-color-success-tint: #44e283; 113 | 114 | --ion-color-warning: #ffd534; 115 | --ion-color-warning-rgb: 255,213,52; 116 | --ion-color-warning-contrast: #000000; 117 | --ion-color-warning-contrast-rgb: 0,0,0; 118 | --ion-color-warning-shade: #e0bb2e; 119 | --ion-color-warning-tint: #ffd948; 120 | 121 | --ion-color-danger: #ff4961; 122 | --ion-color-danger-rgb: 255,73,97; 123 | --ion-color-danger-contrast: #ffffff; 124 | --ion-color-danger-contrast-rgb: 255,255,255; 125 | --ion-color-danger-shade: #e04055; 126 | --ion-color-danger-tint: #ff5b71; 127 | 128 | --ion-color-dark: #f4f5f8; 129 | --ion-color-dark-rgb: 244,245,248; 130 | --ion-color-dark-contrast: #000000; 131 | --ion-color-dark-contrast-rgb: 0,0,0; 132 | --ion-color-dark-shade: #d7d8da; 133 | --ion-color-dark-tint: #f5f6f9; 134 | 135 | --ion-color-medium: #989aa2; 136 | --ion-color-medium-rgb: 152,154,162; 137 | --ion-color-medium-contrast: #000000; 138 | --ion-color-medium-contrast-rgb: 0,0,0; 139 | --ion-color-medium-shade: #86888f; 140 | --ion-color-medium-tint: #a2a4ab; 141 | 142 | --ion-color-light: #222428; 143 | --ion-color-light-rgb: 34,36,40; 144 | --ion-color-light-contrast: #ffffff; 145 | --ion-color-light-contrast-rgb: 255,255,255; 146 | --ion-color-light-shade: #1e2023; 147 | --ion-color-light-tint: #383a3e; 148 | } 149 | 150 | /* 151 | * iOS Dark Theme 152 | * ------------------------------------------- 153 | */ 154 | 155 | .ios body { 156 | --ion-background-color: #000000; 157 | --ion-background-color-rgb: 0,0,0; 158 | 159 | --ion-text-color: #ffffff; 160 | --ion-text-color-rgb: 255,255,255; 161 | 162 | --ion-color-step-50: #0d0d0d; 163 | --ion-color-step-100: #1a1a1a; 164 | --ion-color-step-150: #262626; 165 | --ion-color-step-200: #333333; 166 | --ion-color-step-250: #404040; 167 | --ion-color-step-300: #4d4d4d; 168 | --ion-color-step-350: #595959; 169 | --ion-color-step-400: #666666; 170 | --ion-color-step-450: #737373; 171 | --ion-color-step-500: #808080; 172 | --ion-color-step-550: #8c8c8c; 173 | --ion-color-step-600: #999999; 174 | --ion-color-step-650: #a6a6a6; 175 | --ion-color-step-700: #b3b3b3; 176 | --ion-color-step-750: #bfbfbf; 177 | --ion-color-step-800: #cccccc; 178 | --ion-color-step-850: #d9d9d9; 179 | --ion-color-step-900: #e6e6e6; 180 | --ion-color-step-950: #f2f2f2; 181 | 182 | --ion-toolbar-background: #0d0d0d; 183 | 184 | --ion-item-background: #000000; 185 | } 186 | 187 | 188 | /* 189 | * Material Design Dark Theme 190 | * ------------------------------------------- 191 | */ 192 | 193 | .md body { 194 | --ion-background-color: #121212; 195 | --ion-background-color-rgb: 18,18,18; 196 | 197 | --ion-text-color: #ffffff; 198 | --ion-text-color-rgb: 255,255,255; 199 | 200 | --ion-border-color: #222222; 201 | 202 | --ion-color-step-50: #1e1e1e; 203 | --ion-color-step-100: #2a2a2a; 204 | --ion-color-step-150: #363636; 205 | --ion-color-step-200: #414141; 206 | --ion-color-step-250: #4d4d4d; 207 | --ion-color-step-300: #595959; 208 | --ion-color-step-350: #656565; 209 | --ion-color-step-400: #717171; 210 | --ion-color-step-450: #7d7d7d; 211 | --ion-color-step-500: #898989; 212 | --ion-color-step-550: #949494; 213 | --ion-color-step-600: #a0a0a0; 214 | --ion-color-step-650: #acacac; 215 | --ion-color-step-700: #b8b8b8; 216 | --ion-color-step-750: #c4c4c4; 217 | --ion-color-step-800: #d0d0d0; 218 | --ion-color-step-850: #dbdbdb; 219 | --ion-color-step-900: #e7e7e7; 220 | --ion-color-step-950: #f3f3f3; 221 | 222 | --ion-item-background: #1e1e1e; 223 | 224 | --ion-toolbar-background: #1f1f1f; 225 | 226 | --ion-tab-bar-background: #1f1f1f; 227 | } 228 | 229 | ion-title.title-large { 230 | --color: white; 231 | } 232 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "include": [ 8 | "src/**/*.ts" 9 | ], 10 | "exclude": [ 11 | "src/test.ts", 12 | "src/**/*.spec.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "esnext", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "typeRoots": [ 15 | "node_modules/@types" 16 | ], 17 | "lib": [ 18 | "es2018", 19 | "dom" 20 | ] 21 | }, 22 | "angularCompilerOptions": { 23 | "fullTemplateTypeCheck": true, 24 | "strictInjectionParameters": true 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /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/zone-flags.ts", 13 | "src/polyfills.ts" 14 | ], 15 | "include": [ 16 | "src/**/*.spec.ts", 17 | "src/**/*.d.ts" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rulesDirectory": [ 4 | "codelyzer" 5 | ], 6 | "rules": { 7 | "array-type": false, 8 | "arrow-parens": false, 9 | "deprecation": { 10 | "severity": "warn" 11 | }, 12 | "import-blacklist": [ 13 | true, 14 | "rxjs/Rx" 15 | ], 16 | "interface-name": false, 17 | "max-classes-per-file": false, 18 | "max-line-length": [ 19 | true, 20 | 140 21 | ], 22 | "member-access": false, 23 | "member-ordering": [ 24 | true, 25 | { 26 | "order": [ 27 | "static-field", 28 | "instance-field", 29 | "static-method", 30 | "instance-method" 31 | ] 32 | } 33 | ], 34 | "no-consecutive-blank-lines": false, 35 | "no-console": [ 36 | true, 37 | "debug", 38 | "info", 39 | "time", 40 | "timeEnd", 41 | "trace" 42 | ], 43 | "no-empty": false, 44 | "no-inferrable-types": [ 45 | true, 46 | "ignore-params" 47 | ], 48 | "no-non-null-assertion": true, 49 | "no-redundant-jsdoc": true, 50 | "no-switch-case-fall-through": true, 51 | "no-use-before-declare": true, 52 | "no-var-requires": false, 53 | "object-literal-key-quotes": [ 54 | true, 55 | "as-needed" 56 | ], 57 | "object-literal-sort-keys": false, 58 | "ordered-imports": false, 59 | "quotemark": [ 60 | true, 61 | "single" 62 | ], 63 | "trailing-comma": false, 64 | "no-output-on-prefix": true, 65 | "no-inputs-metadata-property": true, 66 | "no-host-metadata-property": true, 67 | "no-input-rename": true, 68 | "no-output-rename": true, 69 | "use-lifecycle-interface": true, 70 | "use-pipe-transform-interface": true, 71 | "one-variable-per-declaration": false, 72 | "component-class-suffix": [true, "Page", "Component"], 73 | "directive-class-suffix": true, 74 | "directive-selector": [ 75 | true, 76 | "attribute", 77 | "app", 78 | "camelCase" 79 | ], 80 | "component-selector": [ 81 | true, 82 | "element", 83 | "app", 84 | "page", 85 | "kebab-case" 86 | ] 87 | } 88 | } 89 | --------------------------------------------------------------------------------