├── .gitignore ├── .prettierrc ├── README.md ├── angular.json ├── browserslist ├── package-lock.json ├── package.json ├── src ├── app │ ├── app-routing.module.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── heroes │ │ └── components │ │ │ └── heroes │ │ │ ├── heroes.component.html │ │ │ ├── heroes.component.scss │ │ │ └── heroes.component.ts │ ├── pages │ │ └── heroes │ │ │ ├── components │ │ │ └── heroes │ │ │ │ ├── heroes.component.html │ │ │ │ ├── heroes.component.scss │ │ │ │ └── heroes.component.ts │ │ │ ├── heroes-routing.module.ts │ │ │ ├── heroes.module.ts │ │ │ ├── heroes.service.ts │ │ │ └── models │ │ │ └── hero.ts │ └── shared │ │ ├── components │ │ └── placeholder │ │ │ ├── placeholder.component.html │ │ │ ├── placeholder.component.scss │ │ │ └── placeholder.component.ts │ │ ├── header │ │ ├── header.component.html │ │ ├── header.component.scss │ │ └── header.component.ts │ │ ├── modules │ │ ├── app-firebase.module.ts │ │ └── app-material.module.ts │ │ └── shared.module.ts ├── assets │ ├── .gitkeep │ └── images │ │ └── default-hero.png ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts └── styles.scss ├── tsconfig.app.json └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | .angulardoc.json -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loiane/angular-firebase-heroes/5174ea0fbe74042f62899e596b928ce58772fdbc/.prettierrc -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AngularFirebaseHeroes 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.3. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 28 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "angular-firebase-heroes": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "style": "scss", 11 | "skipTests": true 12 | }, 13 | "@schematics/angular:class": { 14 | "skipTests": true 15 | }, 16 | "@schematics/angular:directive": { 17 | "skipTests": true 18 | }, 19 | "@schematics/angular:guard": { 20 | "skipTests": true 21 | }, 22 | "@schematics/angular:module": { 23 | "skipTests": true 24 | }, 25 | "@schematics/angular:pipe": { 26 | "skipTests": true 27 | }, 28 | "@schematics/angular:service": { 29 | "skipTests": true 30 | } 31 | }, 32 | "root": "", 33 | "sourceRoot": "src", 34 | "prefix": "app", 35 | "architect": { 36 | "build": { 37 | "builder": "@angular-devkit/build-angular:browser", 38 | "options": { 39 | "outputPath": "dist/angular-firebase-heroes", 40 | "index": "src/index.html", 41 | "main": "src/main.ts", 42 | "polyfills": "src/polyfills.ts", 43 | "tsConfig": "tsconfig.app.json", 44 | "aot": false, 45 | "assets": [ 46 | "src/favicon.ico", 47 | "src/assets" 48 | ], 49 | "styles": [ 50 | "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", 51 | "src/styles.scss" 52 | ], 53 | "scripts": [] 54 | }, 55 | "configurations": { 56 | "production": { 57 | "fileReplacements": [ 58 | { 59 | "replace": "src/environments/environment.ts", 60 | "with": "src/environments/environment.prod.ts" 61 | } 62 | ], 63 | "optimization": true, 64 | "outputHashing": "all", 65 | "sourceMap": false, 66 | "extractCss": true, 67 | "namedChunks": false, 68 | "aot": true, 69 | "extractLicenses": true, 70 | "vendorChunk": false, 71 | "buildOptimizer": true, 72 | "budgets": [ 73 | { 74 | "type": "initial", 75 | "maximumWarning": "2mb", 76 | "maximumError": "5mb" 77 | }, 78 | { 79 | "type": "anyComponentStyle", 80 | "maximumWarning": "6kb", 81 | "maximumError": "10kb" 82 | } 83 | ] 84 | } 85 | } 86 | }, 87 | "serve": { 88 | "builder": "@angular-devkit/build-angular:dev-server", 89 | "options": { 90 | "browserTarget": "angular-firebase-heroes:build" 91 | }, 92 | "configurations": { 93 | "production": { 94 | "browserTarget": "angular-firebase-heroes:build:production" 95 | } 96 | } 97 | }, 98 | "extract-i18n": { 99 | "builder": "@angular-devkit/build-angular:extract-i18n", 100 | "options": { 101 | "browserTarget": "angular-firebase-heroes:build" 102 | } 103 | } 104 | } 105 | } 106 | }, 107 | "defaultProject": "angular-firebase-heroes" 108 | } -------------------------------------------------------------------------------- /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'. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-firebase-heroes", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "~8.2.4", 15 | "@angular/cdk": "~8.2.3", 16 | "@angular/common": "~8.2.4", 17 | "@angular/compiler": "~8.2.4", 18 | "@angular/core": "~8.2.4", 19 | "@angular/fire": "^5.2.1", 20 | "@angular/flex-layout": "^8.0.0-beta.27", 21 | "@angular/forms": "~8.2.4", 22 | "@angular/material": "^8.2.3", 23 | "@angular/platform-browser": "~8.2.4", 24 | "@angular/platform-browser-dynamic": "~8.2.4", 25 | "@angular/router": "~8.2.4", 26 | "firebase": "^7.3.0", 27 | "hammerjs": "^2.0.8", 28 | "rxjs": "~6.4.0", 29 | "tslib": "^1.10.0", 30 | "zone.js": "~0.9.1" 31 | }, 32 | "devDependencies": { 33 | "@angular-devkit/build-angular": "~0.803.3", 34 | "@angular/cli": "~8.3.3", 35 | "@angular/compiler-cli": "~8.2.4", 36 | "@angular/language-service": "~8.2.4", 37 | "@types/node": "~8.9.4", 38 | "ts-node": "~7.0.0", 39 | "tslint": "~5.15.0", 40 | "typescript": "~3.5.3" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | { path: '', pathMatch: 'full', redirectTo: 'heroes'}, 6 | { 7 | path: 'heroes', 8 | loadChildren: () => import('./pages/heroes/heroes.module').then(m => m.HeroesModule) 9 | } 10 | ]; 11 | 12 | @NgModule({ 13 | imports: [RouterModule.forRoot(routes)], 14 | exports: [RouterModule] 15 | }) 16 | export class AppRoutingModule { } 17 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | template: ` 6 | 7 | 8 | `, 9 | styles: [] 10 | }) 11 | export class AppComponent { 12 | title = 'angular-firebase-heroes'; 13 | } 14 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { environment } from './../environments/environment.prod'; 2 | import { AngularFireModule } from '@angular/fire'; 3 | import { AppFirebaseModule } from './shared/modules/app-firebase.module'; 4 | import { NgModule } from '@angular/core'; 5 | import { BrowserModule } from '@angular/platform-browser'; 6 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 7 | 8 | import { AppRoutingModule } from './app-routing.module'; 9 | import { AppComponent } from './app.component'; 10 | import { HeaderComponent } from './shared/header/header.component'; 11 | import { AppMaterialModule } from './shared/modules/app-material.module'; 12 | 13 | @NgModule({ 14 | declarations: [ 15 | AppComponent, 16 | HeaderComponent 17 | ], 18 | imports: [ 19 | BrowserModule, 20 | AppRoutingModule, 21 | BrowserAnimationsModule, 22 | AppFirebaseModule, 23 | AngularFireModule.initializeApp(environment.firebase), 24 | AppMaterialModule 25 | ], 26 | providers: [], 27 | bootstrap: [AppComponent] 28 | }) 29 | export class AppModule { } 30 | -------------------------------------------------------------------------------- /src/app/heroes/components/heroes/heroes.component.html: -------------------------------------------------------------------------------- 1 |

heroes works!

2 | -------------------------------------------------------------------------------- /src/app/heroes/components/heroes/heroes.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loiane/angular-firebase-heroes/5174ea0fbe74042f62899e596b928ce58772fdbc/src/app/heroes/components/heroes/heroes.component.scss -------------------------------------------------------------------------------- /src/app/heroes/components/heroes/heroes.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-heroes', 5 | templateUrl: './heroes.component.html', 6 | styleUrls: ['./heroes.component.scss'] 7 | }) 8 | export class HeroesComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/pages/heroes/components/heroes/heroes.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Heroes List

3 | 4 | 5 | default hero avatar 10 |

11 | 15 |

16 |

17 | 21 |

22 |
23 | favorite 24 |
25 | 26 | 27 | 28 | 29 | 30 | hero avatar 35 | 36 |

37 | 38 | {{ hero.name }} 39 | 40 |

41 |
42 | {{hero.likes | number:'.0'}} 43 | 44 | favorite 45 | 46 | 47 | delete 48 | 49 |
50 | 51 | 52 |
53 | -------------------------------------------------------------------------------- /src/app/pages/heroes/components/heroes/heroes.component.scss: -------------------------------------------------------------------------------- 1 | .mat-list { 2 | display: table; 3 | 4 | .mat-list-text { 5 | text-align: left !important; 6 | } 7 | } 8 | 9 | .hero-actions { 10 | align-items: center; 11 | display: flex; 12 | padding-bottom: 1rem; 13 | margin-left: 1rem; 14 | padding-bottom: 0; 15 | 16 | .icon-remove { 17 | padding-left: 0.5rem; 18 | color: darkslategrey; 19 | cursor: pointer; 20 | } 21 | } 22 | 23 | .icon-grey { 24 | color: lightgray; 25 | cursor: pointer; 26 | } 27 | 28 | .icon-red { 29 | color: #dc143c; 30 | cursor: pointer; 31 | } 32 | 33 | .detail { 34 | color: rgba(0, 0, 0, 0.54); 35 | font-size: 14px; 36 | text-transform: none; 37 | text-decoration: none; 38 | } 39 | -------------------------------------------------------------------------------- /src/app/pages/heroes/components/heroes/heroes.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Observable } from 'rxjs'; 3 | 4 | import { HeroesService } from '../../heroes.service'; 5 | 6 | @Component({ 7 | selector: 'app-heroes', 8 | templateUrl: './heroes.component.html', 9 | styleUrls: ['./heroes.component.scss'] 10 | }) 11 | export class HeroesComponent implements OnInit { 12 | 13 | heroes$: Observable; 14 | 15 | constructor(private service: HeroesService) { } 16 | 17 | ngOnInit() { 18 | this.heroes$ = this.service.getHeroes(); 19 | } 20 | 21 | trackByFn(index: any) { 22 | return index; 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /src/app/pages/heroes/heroes-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | 4 | import { HeroesComponent } from './components/heroes/heroes.component'; 5 | 6 | const routes: Routes = [ 7 | { path: '', component: HeroesComponent } 8 | ]; 9 | 10 | @NgModule({ 11 | imports: [RouterModule.forChild(routes)], 12 | exports: [RouterModule] 13 | }) 14 | export class HeroesRoutingModule { } 15 | -------------------------------------------------------------------------------- /src/app/pages/heroes/heroes.module.ts: -------------------------------------------------------------------------------- 1 | import { HeroesService } from './heroes.service'; 2 | import { CommonModule } from '@angular/common'; 3 | import { NgModule } from '@angular/core'; 4 | 5 | import { SharedModule } from './../../shared/shared.module'; 6 | import { HeroesComponent } from './components/heroes/heroes.component'; 7 | import { HeroesRoutingModule } from './heroes-routing.module'; 8 | 9 | @NgModule({ 10 | declarations: [HeroesComponent], 11 | imports: [ 12 | CommonModule, 13 | HeroesRoutingModule, 14 | SharedModule 15 | ] 16 | }) 17 | export class HeroesModule { } 18 | -------------------------------------------------------------------------------- /src/app/pages/heroes/heroes.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { AngularFirestore } from '@angular/fire/firestore'; 3 | import { MatSnackBar } from '@angular/material/snack-bar'; 4 | import { map, tap } from 'rxjs/operators'; 5 | 6 | import { Hero } from './models/hero'; 7 | 8 | @Injectable({ 9 | providedIn: "root" 10 | }) 11 | export class HeroesService { 12 | constructor(private db: AngularFirestore, private snackBar: MatSnackBar) {} 13 | 14 | getHeroes() { 15 | return this.db 16 | .collection("heroes", ref => 17 | ref.orderBy("default", "desc").orderBy("likes", "desc") 18 | ) 19 | .snapshotChanges() 20 | .pipe( 21 | map(actions => 22 | actions.map(action => { 23 | const doc = action.payload.doc; 24 | return new Hero({ id: doc.id, ...doc.data() }); 25 | }) 26 | ) 27 | ); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/app/pages/heroes/models/hero.ts: -------------------------------------------------------------------------------- 1 | export class Hero { 2 | id: string; 3 | name: string; 4 | likes: number; 5 | default: boolean; 6 | avatarUrl: string; 7 | 8 | constructor(hero: any = {}) { 9 | this.id = hero.id; 10 | this.name = hero.name || ""; 11 | this.likes = hero.likes || 0; 12 | this.default = hero.default || false; 13 | this.avatarUrl = hero.avatarUrl || ""; 14 | } 15 | 16 | like() { 17 | this.likes += 1; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/app/shared/components/placeholder/placeholder.component.html: -------------------------------------------------------------------------------- 1 |
5 | -------------------------------------------------------------------------------- /src/app/shared/components/placeholder/placeholder.component.scss: -------------------------------------------------------------------------------- 1 | @keyframes placeHolderShimmer { 2 | 0% { 3 | background-position: -468px 0; 4 | } 5 | 100% { 6 | background-position: 468px 0; 7 | } 8 | } 9 | 10 | .placeholder-animation { 11 | animation-duration: 1.25s; 12 | animation-fill-mode: forwards; 13 | animation-iteration-count: infinite; 14 | animation-name: placeHolderShimmer; 15 | animation-timing-function: linear; 16 | background: darkgray; 17 | background: linear-gradient(to right, lightgray 10%, #dddddd 18%, #eeeeee 33%); 18 | position: relative; 19 | background-size: 1000px 100px; 20 | } 21 | -------------------------------------------------------------------------------- /src/app/shared/components/placeholder/placeholder.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-placeholder', 5 | templateUrl: './placeholder.component.html', 6 | styleUrls: ['./placeholder.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush 8 | }) 9 | export class PlaceholderComponent implements OnInit { 10 | 11 | @Input() height: string; 12 | @Input() width: string; 13 | 14 | constructor() { } 15 | 16 | ngOnInit() { 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /src/app/shared/header/header.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 |
7 | -------------------------------------------------------------------------------- /src/app/shared/header/header.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loiane/angular-firebase-heroes/5174ea0fbe74042f62899e596b928ce58772fdbc/src/app/shared/header/header.component.scss -------------------------------------------------------------------------------- /src/app/shared/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-header', 5 | templateUrl: './header.component.html', 6 | styleUrls: ['./header.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush 8 | }) 9 | export class HeaderComponent implements OnInit { 10 | 11 | constructor() { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /src/app/shared/modules/app-firebase.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { AngularFireModule } from '@angular/fire'; 3 | import { AngularFirestoreModule } from '@angular/fire/firestore'; 4 | import { CommonModule } from '@angular/common'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | CommonModule 9 | ], 10 | exports: [ 11 | AngularFireModule, 12 | AngularFirestoreModule 13 | ] 14 | }) 15 | export class AppFirebaseModule { } 16 | -------------------------------------------------------------------------------- /src/app/shared/modules/app-material.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { FlexLayoutModule } from '@angular/flex-layout'; 3 | import { MatButtonModule } from '@angular/material/button'; 4 | import { MatIconModule } from '@angular/material/icon'; 5 | import { MatListModule } from '@angular/material/list'; 6 | import { MatSnackBarModule } from '@angular/material/snack-bar'; 7 | import { MatToolbarModule } from '@angular/material/toolbar'; 8 | 9 | @NgModule({ 10 | exports: [ 11 | FlexLayoutModule, 12 | MatToolbarModule, 13 | MatButtonModule, 14 | MatListModule, 15 | MatIconModule, 16 | MatSnackBarModule 17 | ] 18 | }) 19 | export class AppMaterialModule { } 20 | -------------------------------------------------------------------------------- /src/app/shared/shared.module.ts: -------------------------------------------------------------------------------- 1 | import { AppMaterialModule } from './modules/app-material.module'; 2 | import { NgModule } from '@angular/core'; 3 | import { CommonModule } from '@angular/common'; 4 | import { PlaceholderComponent } from './components/placeholder/placeholder.component'; 5 | 6 | @NgModule({ 7 | declarations: [PlaceholderComponent], 8 | imports: [ 9 | CommonModule, 10 | AppMaterialModule 11 | ], 12 | exports: [ 13 | CommonModule, 14 | AppMaterialModule, 15 | PlaceholderComponent 16 | ] 17 | }) 18 | export class SharedModule { } 19 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loiane/angular-firebase-heroes/5174ea0fbe74042f62899e596b928ce58772fdbc/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/images/default-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loiane/angular-firebase-heroes/5174ea0fbe74042f62899e596b928ce58772fdbc/src/assets/images/default-hero.png -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | firebase: { 4 | apiKey: "AIzaSyAVHd7cd8PGaE8P1deYBRN8uEMgnH553yM", 5 | authDomain: "angular-heroes-rt.firebaseapp.com", 6 | databaseURL: "https://angular-heroes-rt.firebaseio.com", 7 | projectId: "angular-heroes-rt", 8 | storageBucket: "angular-heroes-rt.appspot.com", 9 | messagingSenderId: "1011288716689", 10 | appId: "1:1011288716689:web:9cb3b164486cdff1d19630", 11 | measurementId: "G-WEMFSDCQLC" 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /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 | firebase: { 8 | apiKey: "AIzaSyAVHd7cd8PGaE8P1deYBRN8uEMgnH553yM", 9 | authDomain: "angular-heroes-rt.firebaseapp.com", 10 | databaseURL: "https://angular-heroes-rt.firebaseio.com", 11 | projectId: "angular-heroes-rt", 12 | storageBucket: "angular-heroes-rt.appspot.com", 13 | messagingSenderId: "1011288716689", 14 | appId: "1:1011288716689:web:9cb3b164486cdff1d19630", 15 | measurementId: "G-WEMFSDCQLC" 16 | } 17 | }; 18 | 19 | /* 20 | * For easier debugging in development mode, you can import the following file 21 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 22 | * 23 | * This import should be commented out in production mode because it will have a negative impact 24 | * on performance if an error is thrown. 25 | */ 26 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 27 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loiane/angular-firebase-heroes/5174ea0fbe74042f62899e596b928ce58772fdbc/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularFirebaseHeroes 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import 'hammerjs'; 2 | import { enableProdMode } from '@angular/core'; 3 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 4 | 5 | import { AppModule } from './app/app.module'; 6 | import { environment } from './environments/environment'; 7 | 8 | if (environment.production) { 9 | enableProdMode(); 10 | } 11 | 12 | platformBrowserDynamic().bootstrapModule(AppModule) 13 | .catch(err => console.error(err)); 14 | -------------------------------------------------------------------------------- /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__UNPATCHED_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 | /*************************************************************************************************** 56 | * Zone JS is required by default for Angular itself. 57 | */ 58 | import 'zone.js/dist/zone'; // Included with Angular CLI. 59 | 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | html, body { height: 100%; } 4 | body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } 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 | ], 14 | "exclude": [ 15 | "src/test.ts", 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /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 | "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 | --------------------------------------------------------------------------------