├── .editorconfig
├── .firebaserc
├── .gitignore
├── .vscode
    ├── extensions.json
    ├── launch.json
    ├── settings.json
    └── tasks.json
├── CODEOWNERS
├── LICENSE
├── README.md
├── angular.json
├── firebase.json
├── package-lock.json
├── package.json
├── preview.png
├── public
    ├── angular.png
    ├── background.png
    ├── favicon.ico
    └── search-bar.png
├── src
    ├── app
    │   ├── app-error-hander.spec.ts
    │   ├── app-error-handler.ts
    │   ├── app.component.html
    │   ├── app.component.scss
    │   ├── app.component.spec.ts
    │   ├── app.component.ts
    │   ├── app.config.ts
    │   ├── app.routes.ts
    │   ├── auth.interceptor.spec.ts
    │   ├── auth.interceptor.ts
    │   ├── characters
    │   │   ├── character-card
    │   │   │   ├── character-card.component.html
    │   │   │   ├── character-card.component.spec.ts
    │   │   │   └── character-card.component.ts
    │   │   ├── character-detail
    │   │   │   ├── character-detail.component.html
    │   │   │   ├── character-detail.component.spec.ts
    │   │   │   └── character-detail.component.ts
    │   │   ├── character-list
    │   │   │   ├── character-list.component.html
    │   │   │   ├── character-list.component.scss
    │   │   │   ├── character-list.component.spec.ts
    │   │   │   └── character-list.component.ts
    │   │   ├── character.resolver.spec.ts
    │   │   ├── character.resolver.ts
    │   │   ├── characters.service.spec.ts
    │   │   └── characters.service.ts
    │   ├── comics
    │   │   ├── comic-detail
    │   │   │   ├── comic-detail.component.spec.ts
    │   │   │   └── comic-detail.component.ts
    │   │   ├── comic-list
    │   │   │   ├── comic-list.component.html
    │   │   │   ├── comic-list.component.spec.ts
    │   │   │   └── comic-list.component.ts
    │   │   ├── comic.model.ts
    │   │   ├── comics.service.spec.ts
    │   │   └── comics.service.ts
    │   └── core
    │   │   ├── character.model.ts
    │   │   ├── core.service.spec.ts
    │   │   ├── core.service.ts
    │   │   ├── footer
    │   │       ├── footer.component.html
    │   │       ├── footer.component.spec.ts
    │   │       └── footer.component.ts
    │   │   ├── header
    │   │       ├── header.component.html
    │   │       ├── header.component.scss
    │   │       ├── header.component.spec.ts
    │   │       └── header.component.ts
    │   │   ├── loading.interceptor.spec.ts
    │   │   ├── loading.interceptor.ts
    │   │   ├── marvel-response.model.ts
    │   │   ├── sidebar
    │   │       ├── sidebar.component.html
    │   │       ├── sidebar.component.spec.ts
    │   │       └── sidebar.component.ts
    │   │   └── thumbnail.model.ts
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── index.html
    ├── main.ts
    ├── styles.scss
    └── testing
    │   └── mock-data.ts
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.ts]
12 | quote_type = single
13 | ij_typescript_use_double_quotes = false
14 | 
15 | [*.md]
16 | max_line_length = off
17 | trim_trailing_whitespace = false
18 | 


--------------------------------------------------------------------------------
/.firebaserc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "projects": {
 3 |     "default": "angular-superheroes"
 4 |   },
 5 |   "targets": {
 6 |     "angular-superheroes": {
 7 |       "hosting": {
 8 |         "angular-heroes": [
 9 |           "angular-superheroes"
10 |         ]
11 |       }
12 |     }
13 |   }
14 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
 2 | 
 3 | # Compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | /bazel-out
 8 | 
 9 | # Node
10 | /node_modules
11 | npm-debug.log
12 | yarn-error.log
13 | 
14 | # IDEs and editors
15 | .idea/
16 | .project
17 | .classpath
18 | .c9/
19 | *.launch
20 | .settings/
21 | *.sublime-workspace
22 | 
23 | # Visual Studio Code
24 | .vscode/*
25 | !.vscode/settings.json
26 | !.vscode/tasks.json
27 | !.vscode/launch.json
28 | !.vscode/extensions.json
29 | .history/*
30 | 
31 | # Miscellaneous
32 | /.angular/cache
33 | .sass-cache/
34 | /connect.lock
35 | /coverage
36 | /libpeerconnection.log
37 | testem.log
38 | /typings
39 | 
40 | # System files
41 | .DS_Store
42 | Thumbs.db
43 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3 |   "recommendations": ["angular.ng-template"]
4 | }
5 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 3 |   "version": "0.2.0",
 4 |   "configurations": [
 5 |     {
 6 |       "name": "ng serve",
 7 |       "type": "chrome",
 8 |       "request": "launch",
 9 |       "preLaunchTask": "npm: start",
10 |       "url": "http://localhost:4200/"
11 |     },
12 |     {
13 |       "name": "ng test",
14 |       "type": "chrome",
15 |       "request": "launch",
16 |       "preLaunchTask": "npm: test",
17 |       "url": "http://localhost:9876/debug.html"
18 |     }
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "typescript.preferences.importModuleSpecifier": "relative",
3 |     "typescript.preferences.quoteStyle": "single"
4 | }
5 | 


--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
 3 |   "version": "2.0.0",
 4 |   "tasks": [
 5 |     {
 6 |       "type": "npm",
 7 |       "script": "start",
 8 |       "isBackground": true,
 9 |       "problemMatcher": {
10 |         "owner": "typescript",
11 |         "pattern": "$tsc",
12 |         "background": {
13 |           "activeOnStart": true,
14 |           "beginsPattern": {
15 |             "regexp": "(.*?)"
16 |           },
17 |           "endsPattern": {
18 |             "regexp": "bundle generation complete"
19 |           }
20 |         }
21 |       }
22 |     },
23 |     {
24 |       "type": "npm",
25 |       "script": "test",
26 |       "isBackground": true,
27 |       "problemMatcher": {
28 |         "owner": "typescript",
29 |         "pattern": "$tsc",
30 |         "background": {
31 |           "activeOnStart": true,
32 |           "beginsPattern": {
33 |             "regexp": "(.*?)"
34 |           },
35 |           "endsPattern": {
36 |             "regexp": "bundle generation complete"
37 |           }
38 |         }
39 |       }
40 |     }
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/CODEOWNERS:
--------------------------------------------------------------------------------
1 | *       @bampakoa
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Aristeidis Bampakos
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Angular Heroes
 2 | 
 3 | An Angular application that uses Angular Material and interacts with the [Marvel Comics API](https://developer.marvel.com/documentation/getting_started). The purpose of the application is to demonstrate how to apply common Angular techniques and use some of the Angular Material components.
 4 | 
 5 | It provides a basic search engine over the characters and comics Marvel database. It allows to find a hero character and view information such as basic details and comics.
 6 | 
 7 | <img src="https://github.com/bampakoa/angular-heroes/blob/master/preview.png?raw=true" alt="Preview">
 8 | 
 9 | ## Setup
10 | 
11 | Clone this repo to your desktop and run `npm install` to install all the dependencies.
12 | 
13 | ## Usage
14 | 
15 | Before you start, you must acquire a developer key from [Marvel Developer Portal](https://developer.marvel.com/). After you get one, 
16 | replace `apiKey` variable in `src\app\auth-interceptor.service.ts` file with the newly acquired **public** key.
17 | 
18 | ```
19 | const apiKey = '<Your public key here>';
20 | ```
21 | 
22 | Run `ng serve` to start the application. You will then be able to access it at http://localhost:4200
23 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "angular-heroes": {
  7 |       "projectType": "application",
  8 |       "schematics": {
  9 |         "@schematics/angular:component": {
 10 |           "style": "scss"
 11 |         }
 12 |       },
 13 |       "root": "",
 14 |       "sourceRoot": "src",
 15 |       "prefix": "app",
 16 |       "architect": {
 17 |         "build": {
 18 |           "builder": "@angular-devkit/build-angular:application",
 19 |           "options": {
 20 |             "outputPath": "dist/angular-heroes",
 21 |             "index": "src/index.html",
 22 |             "browser": "src/main.ts",
 23 |             "tsConfig": "tsconfig.app.json",
 24 |             "assets": [
 25 |               {
 26 |                 "glob": "**/*",
 27 |                 "input": "public"
 28 |               }
 29 |             ],
 30 |             "styles": [
 31 |               "@angular/material/prebuilt-themes/azure-blue.css",
 32 |               "src/styles.scss"
 33 |             ],
 34 |             "scripts": []
 35 |           },
 36 |           "configurations": {
 37 |             "production": {
 38 |               "budgets": [
 39 |                 {
 40 |                   "type": "initial",
 41 |                   "maximumWarning": "500kB",
 42 |                   "maximumError": "1MB"
 43 |                 },
 44 |                 {
 45 |                   "type": "anyComponentStyle",
 46 |                   "maximumWarning": "4kB",
 47 |                   "maximumError": "8kB"
 48 |                 }
 49 |               ],
 50 |               "fileReplacements": [
 51 |                 {
 52 |                   "replace": "src/environments/environment.ts",
 53 |                   "with": "src/environments/environment.prod.ts"
 54 |                 }
 55 |               ],
 56 |               "outputHashing": "all"
 57 |             },
 58 |             "development": {
 59 |               "optimization": false,
 60 |               "extractLicenses": false,
 61 |               "sourceMap": true
 62 |             }
 63 |           },
 64 |           "defaultConfiguration": "production"
 65 |         },
 66 |         "serve": {
 67 |           "builder": "@angular-devkit/build-angular:dev-server",
 68 |           "configurations": {
 69 |             "production": {
 70 |               "buildTarget": "angular-heroes:build:production"
 71 |             },
 72 |             "development": {
 73 |               "buildTarget": "angular-heroes:build:development"
 74 |             }
 75 |           },
 76 |           "defaultConfiguration": "development"
 77 |         },
 78 |         "extract-i18n": {
 79 |           "builder": "@angular-devkit/build-angular:extract-i18n"
 80 |         },
 81 |         "test": {
 82 |           "builder": "@angular-devkit/build-angular:karma",
 83 |           "options": {
 84 |             "tsConfig": "tsconfig.spec.json",
 85 |             "assets": [
 86 |               {
 87 |                 "glob": "**/*",
 88 |                 "input": "public"
 89 |               }
 90 |             ],
 91 |             "styles": [
 92 |               "src/styles.scss"
 93 |             ],
 94 |             "scripts": []
 95 |           }
 96 |         }
 97 |       }
 98 |     }
 99 |   }
100 | }
101 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "hosting": [
 3 |     {
 4 |       "target": "angular-heroes",
 5 |       "public": "dist/angular-heroes/browser",
 6 |       "ignore": [
 7 |         "firebase.json",
 8 |         "**/.*",
 9 |         "**/node_modules/**"
10 |       ],
11 |       "rewrites": [
12 |         {
13 |           "source": "**",
14 |           "destination": "/index.html"
15 |         }
16 |       ]
17 |     }
18 |   ]
19 | }
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-heroes",
 3 |   "version": "0.0.0",
 4 |   "description": "Angular Heroes",
 5 |   "authors": [
 6 |     "Aristeidis Bampakos"
 7 |   ],
 8 |   "scripts": {
 9 |     "ng": "ng",
10 |     "start": "ng serve",
11 |     "build": "ng build",
12 |     "watch": "ng build --watch --configuration development",
13 |     "test": "ng test",
14 |     "lint": "ng lint"
15 |   },
16 |   "private": true,
17 |   "dependencies": {
18 |     "@angular/animations": "19.0.0",
19 |     "@angular/cdk": "19.0.0",
20 |     "@angular/common": "19.0.0",
21 |     "@angular/compiler": "19.0.0",
22 |     "@angular/core": "19.0.0",
23 |     "@angular/forms": "19.0.0",
24 |     "@angular/material": "19.0.0",
25 |     "@angular/platform-browser": "19.0.0",
26 |     "@angular/platform-browser-dynamic": "19.0.0",
27 |     "@angular/router": "19.0.0",
28 |     "rxjs": "~7.8.0",
29 |     "tslib": "^2.3.0"
30 |   },
31 |   "devDependencies": {
32 |     "@angular-devkit/build-angular": "^19.0.2",
33 |     "@angular/cli": "19.0.2",
34 |     "@angular/compiler-cli": "19.0.0",
35 |     "@types/jasmine": "~5.1.0",
36 |     "jasmine-core": "~5.4.0",
37 |     "karma": "~6.4.0",
38 |     "karma-chrome-launcher": "~3.2.0",
39 |     "karma-coverage": "~2.2.0",
40 |     "karma-jasmine": "~5.1.0",
41 |     "karma-jasmine-html-reporter": "~2.1.0",
42 |     "typescript": "~5.6.2"
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bampakoa/angular-heroes/44bd0556a707719fe6ed78c043d93e556088075c/preview.png


--------------------------------------------------------------------------------
/public/angular.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bampakoa/angular-heroes/44bd0556a707719fe6ed78c043d93e556088075c/public/angular.png


--------------------------------------------------------------------------------
/public/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bampakoa/angular-heroes/44bd0556a707719fe6ed78c043d93e556088075c/public/background.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bampakoa/angular-heroes/44bd0556a707719fe6ed78c043d93e556088075c/public/favicon.ico


--------------------------------------------------------------------------------
/public/search-bar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bampakoa/angular-heroes/44bd0556a707719fe6ed78c043d93e556088075c/public/search-bar.png


--------------------------------------------------------------------------------
/src/app/app-error-hander.spec.ts:
--------------------------------------------------------------------------------
 1 | import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 2 | import { TestBed } from '@angular/core/testing';
 3 | import { MatSnackBar } from '@angular/material/snack-bar';
 4 | 
 5 | import { AppErrorHandler } from './app-error-handler';
 6 | 
 7 | describe('AppErrorHandler', () => {
 8 |   let service: AppErrorHandler;
 9 |   let snackbarSpy: jasmine.SpyObj<MatSnackBar>;
10 |   let consoleSpy: jasmine.Spy;
11 | 
12 |   beforeEach(() => {
13 |     snackbarSpy = jasmine.createSpyObj('MatSnackBar', ['open']);
14 |     consoleSpy = spyOn(console, 'log');
15 | 
16 |     TestBed.configureTestingModule({
17 |       providers: [
18 |         provideExperimentalZonelessChangeDetection(),
19 |         AppErrorHandler,
20 |         { provide: MatSnackBar, useValue: snackbarSpy }
21 |       ]
22 |     });
23 | 
24 |     service = TestBed.inject(AppErrorHandler);
25 |   });
26 | 
27 |   it('should be created', () => {
28 |     expect(service).toBeTruthy();
29 |   });
30 | 
31 |   it('should handle an error', () => {
32 |     const error = { message: 'Fake error' } as Error;
33 |     service.handleError(error);
34 |     expect(snackbarSpy.open).toHaveBeenCalledWith('Fake error');
35 |     expect(consoleSpy).toHaveBeenCalledWith(error);
36 |   });
37 | });
38 | 


--------------------------------------------------------------------------------
/src/app/app-error-handler.ts:
--------------------------------------------------------------------------------
 1 | import { ErrorHandler, Injectable, Injector, inject } from '@angular/core';
 2 | import { MatSnackBar } from '@angular/material/snack-bar';
 3 | 
 4 | @Injectable()
 5 | export class AppErrorHandler implements ErrorHandler {
 6 |   private injector = inject(Injector);
 7 | 
 8 |   handleError(error: Error) {
 9 |     this.injector.get(MatSnackBar).open(error.message);
10 |     console.log(error);
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <div class="container">
 2 |   <app-header />
 3 |   <div class="content">
 4 |     @if (showProgress()) {
 5 |       <mat-progress-bar mode="indeterminate" />
 6 |     }
 7 |     <mat-drawer-container>
 8 |       <mat-drawer mode="over" position="end">
 9 |         <router-outlet />
10 |       </mat-drawer>
11 |       <mat-drawer-content>
12 |         <app-character-list />
13 |       </mat-drawer-content>
14 |     </mat-drawer-container>
15 |   </div>
16 |   <app-footer />
17 | </div>
18 | 


--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   height: 100%;
 3 |   min-height: 100%;
 4 |   min-width: 100%;
 5 |   width: 100%;
 6 |   display: flex;
 7 |   flex-direction: column;
 8 | }
 9 | 
10 | .content {
11 |   background-image: url('../../public/background.png');
12 |   overflow: auto;
13 |   flex-grow: 1;
14 |   flex-shrink: 1;
15 | }
16 | 
17 | mat-drawer {
18 |   position: fixed;
19 |   width: 320px;
20 | }
21 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { provideHttpClient } from '@angular/common/http';
 2 | import { provideExperimentalZonelessChangeDetection, signal } from '@angular/core';
 3 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 4 | import { provideNoopAnimations } from '@angular/platform-browser/animations';
 5 | 
 6 | import { AppComponent } from './app.component';
 7 | import { ContextService } from './core/core.service';
 8 | 
 9 | describe('AppComponent', () => {
10 |   let fixture: ComponentFixture<AppComponent>;
11 |   let component: AppComponent;
12 |   const contextServiceStub: Partial<ContextService> = {
13 |     showProgress: signal(true)
14 |   };
15 | 
16 |   beforeEach(async () => {
17 |     TestBed.configureTestingModule({
18 |       imports: [AppComponent],
19 |       providers: [
20 |         provideExperimentalZonelessChangeDetection(),
21 |         provideNoopAnimations(),
22 |         provideHttpClient(),
23 |         { provide: ContextService, useValue: contextServiceStub }
24 |       ]
25 |     });
26 |     fixture = TestBed.createComponent(AppComponent);
27 |     component = fixture.componentInstance;
28 |     await fixture.whenStable();
29 |   });
30 | 
31 |   it('should create', () => {
32 |     expect(component).toBeTruthy();
33 |   });
34 | 
35 |   it('should display progress bar', () => {
36 |     expect(fixture.nativeElement.querySelector('mat-progress-bar')).not.toBeNull();
37 |   });
38 | });
39 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, inject } from '@angular/core';
 2 | import { MatProgressBar } from '@angular/material/progress-bar';
 3 | import { MatDrawer, MatDrawerContainer, MatDrawerContent } from '@angular/material/sidenav';
 4 | import { RouterOutlet } from '@angular/router';
 5 | 
 6 | import { CharacterListComponent } from './characters/character-list/character-list.component';
 7 | import { ContextService } from './core/core.service';
 8 | import { FooterComponent } from './core/footer/footer.component';
 9 | import { HeaderComponent } from './core/header/header.component';
10 | 
11 | @Component({
12 |   selector: 'app-root',
13 |   templateUrl: './app.component.html',
14 |   styleUrl: './app.component.scss',
15 |   imports: [
16 |     HeaderComponent,
17 |     FooterComponent,
18 |     MatDrawerContainer,
19 |     MatDrawer,
20 |     MatDrawerContent,
21 |     CharacterListComponent,
22 |     RouterOutlet,
23 |     MatProgressBar
24 |   ]
25 | })
26 | export class AppComponent {
27 |   showProgress = inject(ContextService).showProgress;
28 | }
29 | 


--------------------------------------------------------------------------------
/src/app/app.config.ts:
--------------------------------------------------------------------------------
 1 | import { provideHttpClient, withInterceptors } from '@angular/common/http';
 2 | import { ApplicationConfig, ErrorHandler, provideExperimentalZonelessChangeDetection } from '@angular/core';
 3 | import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
 4 | import { provideAnimations } from '@angular/platform-browser/animations';
 5 | import { provideRouter } from '@angular/router';
 6 | 
 7 | import { AppErrorHandler } from './app-error-handler';
 8 | import { routes } from './app.routes';
 9 | import { authInterceptor } from './auth.interceptor';
10 | import { loadingInterceptor } from './core/loading.interceptor';
11 | 
12 | export const appConfig: ApplicationConfig = {
13 |   providers: [
14 |     provideExperimentalZonelessChangeDetection(),
15 |     provideRouter(routes),
16 |     provideHttpClient(withInterceptors([loadingInterceptor, authInterceptor])),
17 |     provideAnimations(),
18 |     { provide: ErrorHandler, useClass: AppErrorHandler },
19 |     { provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: { duration: 3000 } }
20 |   ]
21 | };
22 | 


--------------------------------------------------------------------------------
/src/app/app.routes.ts:
--------------------------------------------------------------------------------
 1 | import { Routes } from '@angular/router';
 2 | 
 3 | import { characterResolver } from './characters/character.resolver';
 4 | import { SidebarComponent } from './core/sidebar/sidebar.component';
 5 | 
 6 | export const routes: Routes = [
 7 |   {
 8 |     path: ':id',
 9 |     component: SidebarComponent,
10 |     resolve: {
11 |       character: characterResolver
12 |     }
13 |   }
14 | ];
15 | 


--------------------------------------------------------------------------------
/src/app/auth.interceptor.spec.ts:
--------------------------------------------------------------------------------
 1 | import { HttpClient, HttpInterceptorFn, provideHttpClient, withInterceptors } from '@angular/common/http';
 2 | import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
 3 | import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 4 | import { TestBed } from '@angular/core/testing';
 5 | 
 6 | import { authInterceptor } from './auth.interceptor';
 7 | 
 8 | describe('authInterceptor', () => {
 9 |   const interceptor: HttpInterceptorFn = (req, next) => 
10 |     TestBed.runInInjectionContext(() => authInterceptor(req, next));
11 | 
12 |   beforeEach(() => {
13 |     TestBed.configureTestingModule({
14 |       providers: [
15 |         provideExperimentalZonelessChangeDetection(),
16 |         provideHttpClient(withInterceptors([authInterceptor])),
17 |         provideHttpClientTesting()
18 |       ]
19 |     });
20 |   });
21 | 
22 |   it('should be created', () => {
23 |     expect(interceptor).toBeTruthy();
24 |   });
25 | 
26 |   it('should set API key', () => {
27 |     TestBed.inject(HttpClient).get('/test').subscribe();
28 |     const req = TestBed.inject(HttpTestingController).expectOne('/test?apikey=%3CYour%20public%20key%20here%3E');
29 |     req.flush('');
30 |   });
31 | });
32 | 


--------------------------------------------------------------------------------
/src/app/auth.interceptor.ts:
--------------------------------------------------------------------------------
1 | import { HttpInterceptorFn } from '@angular/common/http';
2 | 
3 | export const authInterceptor: HttpInterceptorFn = (req, next) => {
4 |   const apiKey = '<Your public key here>';
5 |   const authReq = req.clone({ params: req.params.set('apikey', apiKey) });
6 |   return next(authReq);
7 | };
8 | 


--------------------------------------------------------------------------------
/src/app/characters/character-card/character-card.component.html:
--------------------------------------------------------------------------------
1 | <img [ngSrc]="getCharacterImage()!" width="464" height="261" alt="photo of {{character()?.name}}">
2 | <mat-grid-tile-header>
3 |   <h3 mat-line>{{character()?.name}}</h3>
4 |   <a mat-icon-button [routerLink]="['/', character()?.id]">
5 |     <mat-icon>info</mat-icon>
6 |   </a>
7 | </mat-grid-tile-header>
8 | 


--------------------------------------------------------------------------------
/src/app/characters/character-card/character-card.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { Component, provideExperimentalZonelessChangeDetection } from '@angular/core';
 2 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 3 | import { By } from '@angular/platform-browser';
 4 | import { provideRouter, RouterLink } from '@angular/router';
 5 | 
 6 | import { CharacterCardComponent } from './character-card.component';
 7 | import { character } from '../../../testing/mock-data';
 8 | import { ContextService } from '../../core/core.service';
 9 | 
10 | @Component({
11 |   template: '<app-character-card [character]="character" />',
12 |   imports: [CharacterCardComponent]
13 | })
14 | class TestHostComponent {
15 |   character = character;
16 | }
17 | 
18 | describe('CharacterCardComponent', () => {
19 |   let component: TestHostComponent;
20 |   let fixture: ComponentFixture<TestHostComponent>;
21 |   let contextServiceSpy: jasmine.SpyObj<ContextService>;
22 | 
23 |   beforeEach(() => {
24 |     contextServiceSpy = jasmine.createSpyObj('ContextService', ['getImage']);
25 |     contextServiceSpy.getImage.and.returnValue('http://fakeimage');
26 | 
27 |     TestBed.configureTestingModule({
28 |       imports: [TestHostComponent],
29 |       providers: [
30 |         provideExperimentalZonelessChangeDetection(),
31 |         provideRouter([]),
32 |         { provide: ContextService, useValue: contextServiceSpy }
33 |       ]
34 |     });
35 |     fixture = TestBed.createComponent(TestHostComponent);
36 |     component = fixture.componentInstance;
37 | 
38 |     fixture.detectChanges();
39 |   });
40 | 
41 |   it('should display character image', () => {
42 |     const imageDisplay: HTMLImageElement = fixture.nativeElement.querySelector('img');
43 |     expect(imageDisplay.src).toBe('http://fakeimage/');
44 |     expect(imageDisplay.alt).toContain(component.character.name);
45 |   });
46 | 
47 |   it('should display character name', () => {
48 |     const nameDisplay: HTMLElement = fixture.nativeElement.querySelector('h3');
49 |     expect(nameDisplay.textContent).toEqual(component.character.name);
50 |   });
51 | 
52 |   it('should have a RouterLink', () => {
53 |     const linkDe = fixture.debugElement.query(By.directive(RouterLink));
54 |     const routerLink = linkDe.injector.get(RouterLink);
55 |     expect(routerLink.href).toBe('/1');
56 |   });
57 | });
58 | 


--------------------------------------------------------------------------------
/src/app/characters/character-card/character-card.component.ts:
--------------------------------------------------------------------------------
 1 | import { NgOptimizedImage } from '@angular/common';
 2 | import { Component, inject, input } from '@angular/core';
 3 | import { MatIconAnchor } from '@angular/material/button';
 4 | import { MatLine } from '@angular/material/core';
 5 | import { MatGridTileText, MatGridTileHeaderCssMatStyler } from '@angular/material/grid-list';
 6 | import { MatIcon } from '@angular/material/icon';
 7 | import { RouterLink } from '@angular/router';
 8 | 
 9 | import { Character } from '../../core/character.model';
10 | import { ContextService } from '../../core/core.service';
11 | 
12 | @Component({
13 |   selector: 'app-character-card',
14 |   templateUrl: './character-card.component.html',
15 |   imports: [NgOptimizedImage, MatGridTileText, MatGridTileHeaderCssMatStyler, MatLine, MatIconAnchor, MatIcon, RouterLink]
16 | })
17 | export class CharacterCardComponent {
18 |   private contextService = inject(ContextService);
19 | 
20 |   readonly character = input<Character>();
21 | 
22 |   getCharacterImage() {
23 |     const character = this.character();
24 |     if (!character) { return; }
25 |     return this.contextService.getImage('landscape_incredible', character.thumbnail);
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/app/characters/character-detail/character-detail.component.html:
--------------------------------------------------------------------------------
 1 | <mat-card appearance="outlined">
 2 |   <mat-card-header>
 3 |     <img mat-card-avatar [ngSrc]="getAvatar()!" width="100" height="100">
 4 |     <mat-card-title>{{character()?.name}}</mat-card-title>
 5 |     <mat-card-subtitle>{{character()?.id}}</mat-card-subtitle>
 6 |   </mat-card-header>
 7 |   <img mat-card-image [ngSrc]="getCharacterImage()!" width="300" height="450">
 8 |   <mat-card-content>
 9 |     <p>{{character()?.description}}</p>
10 |   </mat-card-content>
11 |   <mat-card-actions>
12 |     @for (url of character()?.urls; track url) {
13 |       <a mat-button target="_blank" [href]="url.url">{{url.type | uppercase}}</a>
14 |     }
15 |   </mat-card-actions>
16 | </mat-card>
17 | 


--------------------------------------------------------------------------------
/src/app/characters/character-detail/character-detail.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { HarnessLoader } from '@angular/cdk/testing';
 2 | import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 3 | import { Component, provideExperimentalZonelessChangeDetection } from '@angular/core';
 4 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 5 | import { MatCardHarness } from '@angular/material/card/testing';
 6 | import { By } from '@angular/platform-browser';
 7 | 
 8 | import { CharacterDetailComponent } from './character-detail.component';
 9 | import { character } from '../../../testing/mock-data';
10 | import { ContextService } from '../../core/core.service';
11 | 
12 | @Component({
13 |   template: '<app-character-detail [character]="character" />',
14 |   imports: [CharacterDetailComponent]
15 | })
16 | class TestHostComponent {
17 |   character = character;
18 | }
19 | 
20 | describe('CharacterDetailComponent', () => {
21 |   let component: CharacterDetailComponent;
22 |   let fixture: ComponentFixture<TestHostComponent>;
23 |   let loader: HarnessLoader;
24 |   let contextServiceSpy: jasmine.SpyObj<ContextService>;
25 |   let imageDisplay: HTMLImageElement[];
26 |   let cardDisplay: MatCardHarness;
27 | 
28 |   beforeEach(async () => {
29 |     contextServiceSpy = jasmine.createSpyObj('ContextService', ['getImage']);
30 |     contextServiceSpy.getImage.and.returnValue('http://fakeimage');
31 | 
32 |     TestBed.configureTestingModule({
33 |       imports: [TestHostComponent],
34 |       providers: [
35 |         provideExperimentalZonelessChangeDetection(),
36 |         { provide: ContextService, useValue: contextServiceSpy }
37 |       ]
38 |     });
39 |     fixture = TestBed.createComponent(TestHostComponent);
40 |     component = fixture.debugElement.query(By.directive(CharacterDetailComponent)).componentInstance;
41 |     loader = TestbedHarnessEnvironment.loader(fixture);
42 | 
43 |     imageDisplay = fixture.nativeElement.querySelectorAll('img');
44 |     cardDisplay = await loader.getHarness(MatCardHarness);
45 |   });
46 | 
47 |   it('should display mat-card component', () => {
48 |     expect(fixture.nativeElement.querySelector('mat-card')).not.toBeNull();
49 |   });
50 | 
51 |   it('should display avatar', () => {
52 |     expect(imageDisplay[0].src).toEqual('http://fakeimage/');
53 |   });
54 | 
55 |   it('should display name', async () => {
56 |     expect(await cardDisplay.getTitleText()).toBe(character.name);
57 |   });
58 | 
59 |   it('should display id', async () => {
60 |     expect(await cardDisplay.getSubtitleText()).toBe(character.id.toString());
61 |   });
62 | 
63 |   it('should display image', () => {
64 |     expect(imageDisplay[1].src).toEqual('http://fakeimage/');
65 |   });
66 | 
67 |   it('should display description', () => {
68 |     const descrDisplay: HTMLElement = fixture.nativeElement.querySelector('p');
69 |     expect(descrDisplay.textContent).toContain(character.description);
70 |   });
71 | 
72 |   it('should display character URLs', () => {
73 |     const links: HTMLAnchorElement[] = fixture.nativeElement.querySelectorAll('a');
74 |     expect(links.length).toBe(1);
75 |   });
76 | 
77 |   it('should get avatar', () => {
78 |     component.getAvatar();
79 |     expect(contextServiceSpy.getImage).toHaveBeenCalledWith('standard_medium', character.thumbnail);
80 |   });
81 | 
82 |   it('should get image', () => {
83 |     component.getAvatar();
84 |     expect(contextServiceSpy.getImage).toHaveBeenCalledWith('portrait_uncanny', character.thumbnail);
85 |   });
86 | });
87 | 


--------------------------------------------------------------------------------
/src/app/characters/character-detail/character-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import { NgOptimizedImage, UpperCasePipe } from '@angular/common';
 2 | import { Component, inject, input } from '@angular/core';
 3 | import { MatAnchor } from '@angular/material/button';
 4 | import {
 5 |   MatCard,
 6 |   MatCardHeader,
 7 |   MatCardAvatar,
 8 |   MatCardTitle,
 9 |   MatCardSubtitle,
10 |   MatCardImage,
11 |   MatCardContent,
12 |   MatCardActions
13 | } from '@angular/material/card';
14 | 
15 | import { Character } from '../../core/character.model';
16 | import { ContextService } from '../../core/core.service';
17 | 
18 | @Component({
19 |   selector: 'app-character-detail',
20 |   templateUrl: './character-detail.component.html',
21 |   imports: [
22 |     MatCard,
23 |     MatCardHeader,
24 |     NgOptimizedImage,
25 |     MatCardAvatar,
26 |     MatCardTitle,
27 |     MatCardSubtitle,
28 |     MatCardImage,
29 |     MatCardContent,
30 |     MatCardActions,
31 |     MatAnchor,
32 |     UpperCasePipe
33 |   ]
34 | })
35 | export class CharacterDetailComponent {
36 |   private contextService = inject(ContextService);
37 | 
38 |   readonly character = input<Character>();
39 | 
40 |   getAvatar() {
41 |     const character = this.character();
42 |     if (!character) { return; }
43 |     return this.contextService.getImage('standard_medium', character.thumbnail);
44 |   }
45 | 
46 |   getCharacterImage() {
47 |     const character = this.character();
48 |     if (!character) { return; }
49 |     return this.contextService.getImage('portrait_uncanny', character.thumbnail);
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/app/characters/character-list/character-list.component.html:
--------------------------------------------------------------------------------
 1 | <div class="search">
 2 |   <mat-form-field>
 3 |     <input matInput placeholder="Search by name" #searchBox (keyup)="search(searchBox.value)">
 4 |     @if (searchBox?.value) {
 5 |       <button matSuffix mat-icon-button aria-label="Clear" (click)="searchBox.value = ''">
 6 |         <mat-icon>close</mat-icon>
 7 |       </button>
 8 |     }
 9 |   </mat-form-field>
10 | </div>
11 | <mat-grid-list cols="4" rowHeight="250">
12 |   @for (character of characters$ | async; track character.id) {
13 |     <mat-grid-tile>
14 |       <app-character-card [character]="character" />
15 |     </mat-grid-tile>
16 |   }
17 | </mat-grid-list>
18 | 


--------------------------------------------------------------------------------
/src/app/characters/character-list/character-list.component.scss:
--------------------------------------------------------------------------------
 1 | mat-grid-list {
 2 |   margin: 40px;
 3 | }
 4 | 
 5 | mat-grid-tile {
 6 |   border: 10px solid black;
 7 | }
 8 | 
 9 | mat-form-field {
10 |   margin: 55px 42px;
11 |   width: 315px;
12 | }
13 | 
14 | .search {
15 |   background-image: url('../../../../public/search-bar.png');
16 |   background-repeat: no-repeat;
17 |   background-size: 320px 60px;
18 |   background-position-x: 40px;
19 |   background-position-y: 53px;
20 | }
21 | 


--------------------------------------------------------------------------------
/src/app/characters/character-list/character-list.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 2 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 3 | import { MatSnackBar } from '@angular/material/snack-bar';
 4 | import { provideNoopAnimations } from '@angular/platform-browser/animations';
 5 | import { provideRouter } from '@angular/router';
 6 | import { of } from 'rxjs';
 7 | 
 8 | import { fakeMarvelResponseData } from '../../../testing/mock-data';
 9 | import { CharacterService } from '../characters.service';
10 | import { CharacterListComponent } from './character-list.component';
11 | 
12 | describe('CharacterListComponent', () => {
13 |   let component: CharacterListComponent;
14 |   let fixture: ComponentFixture<CharacterListComponent>;
15 |   let characterServiceSpy: jasmine.SpyObj<CharacterService>;
16 |   let snackbarSpy: jasmine.SpyObj<MatSnackBar>;
17 | 
18 |   beforeEach(async () => {
19 |     snackbarSpy = jasmine.createSpyObj('MatSnackBar', ['open']);
20 |     
21 |     characterServiceSpy = jasmine.createSpyObj('CharacterService', ['getAll']);
22 |     characterServiceSpy.getAll.and.returnValue(of(fakeMarvelResponseData));
23 | 
24 |     TestBed.configureTestingModule({
25 |       imports: [CharacterListComponent],
26 |       providers: [
27 |         provideExperimentalZonelessChangeDetection(),
28 |         provideNoopAnimations(),
29 |         provideRouter([]),
30 |         { provide: CharacterService, useValue: characterServiceSpy },
31 |         { provide: MatSnackBar, useValue: snackbarSpy }
32 |       ]
33 |     });
34 |     fixture = TestBed.createComponent(CharacterListComponent);
35 |     component = fixture.componentInstance;
36 |     await fixture.whenStable();
37 |   });
38 | 
39 |   it('should create', () => {
40 |     expect(component).toBeTruthy();
41 |   });
42 | 
43 |   it('should search', () => {
44 |     const spy = spyOn(component, 'search');
45 |     const searchInput: HTMLInputElement = fixture.nativeElement.querySelector('input');
46 |     searchInput.dispatchEvent(new CustomEvent('keyup'));
47 |     expect(spy.calls.any()).toBeTrue();
48 |   });
49 | 
50 |   it('should display characters', (done: DoneFn) => {
51 |     component.characters$.subscribe(async () => {
52 |       await fixture.whenStable();
53 |       const cardsDisplay = fixture.nativeElement.querySelectorAll('app-character-card');
54 |       expect(cardsDisplay.length).toBe(1);
55 |       done();
56 |     });
57 |     component.search('123');
58 |   });
59 | });
60 | 


--------------------------------------------------------------------------------
/src/app/characters/character-list/character-list.component.ts:
--------------------------------------------------------------------------------
 1 | import { AsyncPipe } from '@angular/common';
 2 | import { Component, inject } from '@angular/core';
 3 | import { MatIconButton } from '@angular/material/button';
 4 | import { MatFormField, MatSuffix } from '@angular/material/form-field';
 5 | import { MatGridList, MatGridTile } from '@angular/material/grid-list';
 6 | import { MatIcon } from '@angular/material/icon';
 7 | import { MatInput } from '@angular/material/input';
 8 | import {
 9 |   MatSnackBar,
10 |   MatSnackBarRef,
11 |   TextOnlySnackBar
12 | } from '@angular/material/snack-bar';
13 | import { catchError, debounceTime, distinctUntilChanged, EMPTY, filter, map, Subject, switchMap } from 'rxjs';
14 | 
15 | import { environment } from '../../../environments/environment';
16 | import { CharacterCardComponent } from '../character-card/character-card.component';
17 | import { CharacterService } from '../characters.service';
18 | 
19 | @Component({
20 |   selector: 'app-character-list',
21 |   templateUrl: './character-list.component.html',
22 |   styleUrl: './character-list.component.scss',
23 |   imports: [
24 |     MatFormField,
25 |     MatInput,
26 |     MatIconButton,
27 |     MatSuffix,
28 |     MatIcon,
29 |     MatGridList,
30 |     MatGridTile,
31 |     CharacterCardComponent,
32 |     AsyncPipe
33 |   ]
34 | })
35 | export class CharacterListComponent {
36 |   private snackbar = inject(MatSnackBar);
37 |   private characterService = inject(CharacterService);
38 |   private searchTerms = new Subject<string>();
39 |   private matSnackBarRef: MatSnackBarRef<TextOnlySnackBar> | undefined;
40 | 
41 |   characters$ = this.searchTerms.pipe(
42 |     filter(term => term.length >= 3),
43 |     debounceTime(300),
44 |     distinctUntilChanged(),
45 |     switchMap(term => {
46 |       this.matSnackBarRef?.dismiss();
47 | 
48 |       return this.characterService.getAll(term).pipe(
49 |         catchError(() => EMPTY)
50 |       );
51 |     }),
52 |     map(({ results: heroes, total }) => {
53 |       // Show notification when total results are more than the pre-defined limit
54 |       if (total > environment.charactersLimit) {
55 |         this.showWarning('too-many-results');
56 |       }
57 | 
58 |       // Show notification when there are no results
59 |       if (total === 0) {
60 |         this.showWarning('no-results');
61 |       }
62 | 
63 |       return heroes;
64 |     })
65 |   );
66 | 
67 |   search(name: string) {
68 |     this.searchTerms.next(name);
69 |   }
70 | 
71 |   private showWarning(reason: 'too-many-results' | 'no-results') {
72 |     let message = '';
73 | 
74 |     switch (reason) {
75 |       case 'too-many-results':
76 |         message = 'There are more results of your search that are not currently displayed. Please try to refine your search criteria.';
77 |         break;
78 |       case 'no-results':
79 |         message = 'There are no results found. Please try to refine your search criteria.';
80 |         break;
81 |     }
82 | 
83 |     this.matSnackBarRef = this.snackbar.open(message, 'Dismiss', { duration: 5000 });
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/src/app/characters/character.resolver.spec.ts:
--------------------------------------------------------------------------------
 1 | import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 2 | import { TestBed } from '@angular/core/testing';
 3 | import { ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot } from '@angular/router';
 4 | import { Observable, of } from 'rxjs';
 5 | 
 6 | import { characterResolver } from './character.resolver';
 7 | import { CharacterService } from './characters.service';
 8 | import { character } from '../../testing/mock-data';
 9 | import { Character } from '../core/character.model';
10 | 
11 | describe('characterResolver', () => {
12 |   const executeResolver: ResolveFn<Character> = (...resolverParameters) => 
13 |       TestBed.runInInjectionContext(() => characterResolver(...resolverParameters));
14 |   let characterServiceSpy: jasmine.SpyObj<CharacterService>;
15 | 
16 |   beforeEach(() => {
17 |     characterServiceSpy = jasmine.createSpyObj('CharacterService', ['getSingle']);
18 |     characterServiceSpy.getSingle.and.returnValue(of(character));
19 | 
20 |     TestBed.configureTestingModule({
21 |       providers: [
22 |         provideExperimentalZonelessChangeDetection(),
23 |         { provide: CharacterService, useValue: characterServiceSpy }
24 |       ]
25 |     });
26 |   });
27 | 
28 |   it('should be created', () => {
29 |     expect(executeResolver).toBeTruthy();
30 |   });
31 |   
32 |   it('should return character', () => {
33 |     const snapshot = new ActivatedRouteSnapshot();
34 |     snapshot.params = { id: 1 };
35 | 
36 |     const character$ = executeResolver(snapshot, {} as RouterStateSnapshot) as Observable<Character>;
37 |     character$.subscribe(data => expect(data).toEqual(character));
38 |   });
39 | });
40 | 


--------------------------------------------------------------------------------
/src/app/characters/character.resolver.ts:
--------------------------------------------------------------------------------
 1 | import { inject } from '@angular/core';
 2 | import { ResolveFn } from '@angular/router';
 3 | 
 4 | import { CharacterService } from './characters.service';
 5 | import { Character } from '../core/character.model';
 6 | 
 7 | export const characterResolver: ResolveFn<Character> = route => {
 8 |   const charactersService = inject(CharacterService);
 9 |   const id = route.paramMap.get('id');
10 |   return charactersService.getSingle(+id!);
11 | };
12 | 


--------------------------------------------------------------------------------
/src/app/characters/characters.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { provideHttpClient } from '@angular/common/http';
 2 | import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
 3 | import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 4 | import { TestBed } from '@angular/core/testing';
 5 | 
 6 | import { CharacterService } from './characters.service';
 7 | import { environment } from '../../environments/environment';
 8 | import { character, fakeMarvelResponseData } from '../../testing/mock-data';
 9 | import { ContextService } from '../core/core.service';
10 | 
11 | describe('CharacterService', () => {
12 |   let service: CharacterService;
13 |   let httpTestingController: HttpTestingController;
14 |   let contextServiceSpy: jasmine.SpyObj<ContextService>;
15 |   const url = `${environment.apiUrl}characters?nameStartsWith=fakename&limit=${environment.charactersLimit}`;
16 | 
17 |   beforeEach(() => {
18 |     contextServiceSpy = jasmine.createSpyObj('ContextService', ['handleError']);
19 | 
20 |     TestBed.configureTestingModule({
21 |       providers: [
22 |         CharacterService,
23 |         { provide: ContextService, useValue: contextServiceSpy },
24 |         provideExperimentalZonelessChangeDetection(),
25 |         provideHttpClient(),
26 |         provideHttpClientTesting()
27 |       ]
28 |     });
29 | 
30 |     service = TestBed.inject(CharacterService);
31 |     httpTestingController = TestBed.inject(HttpTestingController);
32 |   });
33 | 
34 |   it('should be created', () => {
35 |     expect(service).toBeTruthy();
36 |   });
37 | 
38 |   it('should get characters', () => {
39 |     service.getAll('fakename').subscribe(characters => expect(characters).toEqual(fakeMarvelResponseData));
40 |     const req = httpTestingController.expectOne(url);
41 |     expect(req.request.method).toEqual('GET');
42 |     req.flush({ data: fakeMarvelResponseData });
43 |   });
44 | 
45 |   it('should set copyright', () => {
46 |     service.getAll('fakename').subscribe();
47 |     const req = httpTestingController.expectOne(url);
48 |     req.flush({
49 |       attributionText: 'fakeAttribution',
50 |       data: fakeMarvelResponseData
51 |     });
52 |     expect(contextServiceSpy.copyright).toEqual('fakeAttribution');
53 |   });
54 | 
55 |   it('should get character', () => {
56 |     service.getSingle(1).subscribe(data => expect(data).toEqual(character));
57 |     const req = httpTestingController.expectOne(environment.apiUrl + 'characters/1');
58 |     expect(req.request.method).toEqual('GET');
59 |     req.flush({ data: fakeMarvelResponseData });
60 |   });
61 | 
62 |   afterEach(() => httpTestingController.verify());
63 | });
64 | 


--------------------------------------------------------------------------------
/src/app/characters/characters.service.ts:
--------------------------------------------------------------------------------
 1 | import { HttpClient, HttpParams } from '@angular/common/http';
 2 | import { Injectable, inject } from '@angular/core';
 3 | import { catchError, map } from 'rxjs';
 4 | 
 5 | import { environment } from '../../environments/environment';
 6 | import { Character } from '../core/character.model';
 7 | import { ContextService } from '../core/core.service';
 8 | import { MarvelResponse } from '../core/marvel-response.model';
 9 | 
10 | @Injectable({
11 |   providedIn: 'root'
12 | })
13 | export class CharacterService {
14 |   private http = inject(HttpClient);
15 |   private contextService = inject(ContextService);
16 | 
17 |   getAll(term: string) {
18 |     const options = new HttpParams()
19 |       .set('nameStartsWith', term)
20 |       .set('limit', environment.charactersLimit);
21 | 
22 |     return this.http.get<MarvelResponse<Character>>(environment.apiUrl + 'characters', { params: options }).pipe(
23 |       map(response => {
24 |         if (!this.contextService.copyright) {
25 |           this.contextService.copyright = response.attributionText;
26 |         }
27 |         return response.data;
28 |       }),
29 |       catchError(this.contextService.handleError)
30 |     );
31 |   }
32 | 
33 |   getSingle(id: number) {
34 |     return this.http.get<MarvelResponse<Character>>(`${environment.apiUrl}characters/${id}`).pipe(
35 |       map(response => response.data.results[0])
36 |     );
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/app/comics/comic-detail/comic-detail.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { Component, provideExperimentalZonelessChangeDetection } from '@angular/core';
 2 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 3 | 
 4 | import { ContextService } from '../../core/core.service';
 5 | import { Comic } from '../comic.model';
 6 | import { ComicDetailComponent } from './comic-detail.component';
 7 | 
 8 | const fakeComic: Partial<Comic> = {
 9 |   id: 1,
10 |   digitalId: 1,
11 |   thumbnail: {
12 |     path: 'Fake path',
13 |     extension: 'fake'
14 |   }
15 | };
16 | 
17 | @Component({
18 |   template: '<app-comic-detail [comic]="comic" />',
19 |   imports: [ComicDetailComponent]
20 | })
21 | class TestHostComponent {
22 |   comic = fakeComic;
23 | }
24 | 
25 | describe('ComicDetailComponent', () => {
26 |   let fixture: ComponentFixture<TestHostComponent>;
27 |   let contextServiceSpy: jasmine.SpyObj<ContextService>;
28 | 
29 |   beforeEach(async () => {
30 |     contextServiceSpy = jasmine.createSpyObj('ContextService', ['getImage']);
31 |     contextServiceSpy.getImage.and.returnValue('http://fakeimage/');
32 | 
33 |     TestBed.configureTestingModule({
34 |       imports: [TestHostComponent],
35 |       providers: [
36 |         provideExperimentalZonelessChangeDetection(),
37 |         { provide: ContextService, useValue: contextServiceSpy }
38 |       ]
39 |     });
40 |     fixture = TestBed.createComponent(TestHostComponent);
41 |     await fixture.whenStable();
42 |   });
43 | 
44 |   it('should display link', () => {
45 |     const linkDisplay: HTMLAnchorElement = fixture.nativeElement.querySelector('a');
46 |     expect(linkDisplay.href).toBe('https://read.marvel.com/#/book/1');
47 |   });
48 | 
49 |   it('should display image', () => {
50 |     const imageDisplay: HTMLImageElement = fixture.nativeElement.querySelector('img');
51 |     expect(imageDisplay.src).toEqual('http://fakeimage/');
52 |   });
53 | });
54 | 


--------------------------------------------------------------------------------
/src/app/comics/comic-detail/comic-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import { NgOptimizedImage } from '@angular/common';
 2 | import { Component, inject, input } from '@angular/core';
 3 | 
 4 | import { ContextService } from '../../core/core.service';
 5 | import { Comic } from '../comic.model';
 6 | 
 7 | @Component({
 8 |   selector: 'app-comic-detail',
 9 |   template: `
10 |     <a href="https://read.marvel.com/#/book/{{comic()?.digitalId}}" target="_blank">
11 |       <img [ngSrc]="getComicImage()!" width="168" height="252">
12 |     </a>
13 |   `,
14 |   imports: [NgOptimizedImage]
15 | })
16 | export class ComicDetailComponent {
17 |   private contextService = inject(ContextService);
18 | 
19 |   readonly comic = input<Comic>();
20 | 
21 |   getComicImage() {
22 |     const comic = this.comic();
23 |     if (!comic) { return; }
24 |     return this.contextService.getImage('portrait_fantastic', comic.thumbnail);
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/app/comics/comic-list/comic-list.component.html:
--------------------------------------------------------------------------------
1 | <mat-grid-list cols="1" rowHeight="300">
2 |   @for (comic of comics$ | async; track comic.id) {
3 |     <mat-grid-tile>
4 |       <app-comic-detail [comic]="comic" />
5 |     </mat-grid-tile>
6 |   }
7 | </mat-grid-list>
8 | 


--------------------------------------------------------------------------------
/src/app/comics/comic-list/comic-list.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { Component, provideExperimentalZonelessChangeDetection } from '@angular/core';
 2 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 3 | import { By } from '@angular/platform-browser';
 4 | import { of } from 'rxjs';
 5 | 
 6 | import { Character } from '../../core/character.model';
 7 | import { Comic } from '../comic.model';
 8 | import { ComicService } from '../comics.service';
 9 | import { ComicListComponent } from './comic-list.component';
10 | 
11 | const fakeComics: Comic[] = [
12 |   {
13 |     id: 1,
14 |     digitalId: 1,
15 |     thumbnail: {
16 |       path: 'Fake path',
17 |       extension: 'fake'
18 |     }
19 |   },
20 |   {
21 |     id: 2,
22 |     digitalId: 0,
23 |     thumbnail: {
24 |       path: 'Fake path',
25 |       extension: 'fake'
26 |     }
27 |   }
28 | ];
29 | 
30 | @Component({
31 |   template: '<app-comic-list [character]="character" />',
32 |   imports: [ComicListComponent]
33 | })
34 | class TestHostComponent {
35 |   character = { id: 1 } as Character;
36 | }
37 | 
38 | describe('ComicListComponent', () => {
39 |   let component: ComicListComponent;
40 |   let fixture: ComponentFixture<TestHostComponent>;
41 |   let comicServiceSpy: jasmine.SpyObj<ComicService>;
42 | 
43 |   beforeEach(async () => {
44 |     comicServiceSpy = jasmine.createSpyObj('ComicService', ['getAll']);
45 |     comicServiceSpy.getAll.and.returnValue(of(fakeComics));
46 | 
47 |     TestBed.configureTestingModule({
48 |       imports: [TestHostComponent],
49 |       providers: [
50 |         provideExperimentalZonelessChangeDetection(),
51 |         { provide: ComicService, useValue: comicServiceSpy }
52 |       ]
53 |     });
54 |     fixture = TestBed.createComponent(TestHostComponent);
55 |     component = fixture.debugElement.query(By.directive(ComicListComponent)).componentInstance;
56 |     await fixture.whenStable();
57 |   });
58 | 
59 |   it('should display comics', () => {
60 |     const comicDetailDisplay: HTMLElement[] = fixture.nativeElement.querySelectorAll('app-comic-detail');
61 |     expect(comicDetailDisplay.length).toBe(1);
62 |   });
63 | });
64 | 


--------------------------------------------------------------------------------
/src/app/comics/comic-list/comic-list.component.ts:
--------------------------------------------------------------------------------
 1 | import { AsyncPipe } from '@angular/common';
 2 | import { Component, OnChanges, inject, input } from '@angular/core';
 3 | import { MatGridList, MatGridTile } from '@angular/material/grid-list';
 4 | import { EMPTY, map, Observable } from 'rxjs';
 5 | 
 6 | import { Character } from '../../core/character.model';
 7 | import { ComicDetailComponent } from '../comic-detail/comic-detail.component';
 8 | import { Comic } from '../comic.model';
 9 | import { ComicService } from '../comics.service';
10 | 
11 | @Component({
12 |   selector: 'app-comic-list',
13 |   templateUrl: './comic-list.component.html',
14 |   imports: [MatGridList, MatGridTile, ComicDetailComponent, AsyncPipe]
15 | })
16 | export class ComicListComponent implements OnChanges {
17 |   private comicService = inject(ComicService);
18 | 
19 |   readonly character = input<Character>();
20 |   comics$: Observable<Comic[]> = EMPTY;
21 | 
22 |   ngOnChanges() {
23 |     const character = this.character();
24 |     if (character) {
25 |       this.comics$ = this.comicService.getAll(character.id).pipe(
26 |         map(comics => comics.filter(c => c.digitalId > 0))
27 |       );
28 |     }
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/app/comics/comic.model.ts:
--------------------------------------------------------------------------------
1 | import { Thumbnail } from '../core/thumbnail.model';
2 | 
3 | export interface Comic {
4 |   id: number;
5 |   digitalId: number;
6 |   thumbnail: Thumbnail;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/app/comics/comics.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 2 | import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
 3 | import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 4 | import { TestBed } from '@angular/core/testing';
 5 | 
 6 | import { Comic } from './comic.model';
 7 | import { ComicService } from './comics.service';
 8 | import { environment } from '../../environments/environment';
 9 | import { ContextService } from '../core/core.service';
10 | 
11 | const fakeComics = [{ id: 1 }] as Comic[];
12 | 
13 | describe('ComicService', () => {
14 |   let service: ComicService;
15 |   let httpTestingController: HttpTestingController;
16 |   let contextServiceSpy: jasmine.SpyObj<ContextService>;
17 | 
18 |   beforeEach(() => {
19 |     contextServiceSpy = jasmine.createSpyObj('ContextService', ['handleError']);
20 | 
21 |     TestBed.configureTestingModule({
22 |       providers: [
23 |         ComicService,
24 |         { provide: ContextService, useValue: contextServiceSpy },
25 |         provideExperimentalZonelessChangeDetection(),
26 |         provideHttpClient(withInterceptorsFromDi()),
27 |         provideHttpClientTesting()
28 |       ]
29 |     });
30 | 
31 |     service = TestBed.inject(ComicService);
32 |     httpTestingController = TestBed.inject(HttpTestingController);
33 |   });
34 | 
35 |   it('should be created', () => {
36 |     expect(service).toBeTruthy();
37 |   });
38 | 
39 |   it('should get comics', () => {
40 |     service.getAll(1).subscribe(comics => expect(comics).toEqual(fakeComics));
41 |     const req = httpTestingController.expectOne(environment.apiUrl + 'characters/1/comics');
42 |     expect(req.request.method).toEqual('GET');
43 |     req.flush({
44 |       data: { results: fakeComics }
45 |     });
46 |   });
47 | 
48 |   afterEach(() => httpTestingController.verify());
49 | });
50 | 


--------------------------------------------------------------------------------
/src/app/comics/comics.service.ts:
--------------------------------------------------------------------------------
 1 | import { HttpClient } from '@angular/common/http';
 2 | import { Injectable, inject } from '@angular/core';
 3 | import { catchError, map } from 'rxjs';
 4 | 
 5 | import { Comic } from './comic.model';
 6 | import { environment } from '../../environments/environment';
 7 | import { ContextService } from '../core/core.service';
 8 | import { MarvelResponse } from '../core/marvel-response.model';
 9 | 
10 | @Injectable({
11 |   providedIn: 'root'
12 | })
13 | export class ComicService {
14 |   private http = inject(HttpClient);
15 |   private contextService = inject(ContextService);
16 | 
17 |   getAll(characterId: number) {
18 |     return this.http.get<MarvelResponse<Comic>>(`${environment.apiUrl}characters/${characterId}/comics`).pipe(
19 |       map(response => response.data.results),
20 |       catchError(this.contextService.handleError)
21 |     );
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/app/core/character.model.ts:
--------------------------------------------------------------------------------
 1 | import { Thumbnail } from '../core/thumbnail.model';
 2 | 
 3 | export interface Character {
 4 |   id: number;
 5 |   name: string;
 6 |   description: string;
 7 |   thumbnail: Thumbnail;
 8 |   urls: Url[];
 9 | }
10 | 
11 | interface Url {
12 |   type: string;
13 |   url: string;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/app/core/core.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { HttpErrorResponse } from '@angular/common/http';
 2 | import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 3 | import { TestBed } from '@angular/core/testing';
 4 | import { MatSnackBar } from '@angular/material/snack-bar';
 5 | import { catchError, EMPTY } from 'rxjs';
 6 | 
 7 | import { ContextService } from './core.service';
 8 | import { Thumbnail } from './thumbnail.model';
 9 | 
10 | describe('ContextService', () => {
11 |   let service: ContextService;
12 |   let snackbarSpy: jasmine.SpyObj<MatSnackBar>;
13 | 
14 |   beforeEach(() => {
15 |     snackbarSpy = jasmine.createSpyObj('MatSnackBar', ['open']);
16 | 
17 |     TestBed.configureTestingModule({
18 |       providers: [
19 |         provideExperimentalZonelessChangeDetection(),
20 |         ContextService,
21 |         { provide: MatSnackBar, useValue: snackbarSpy }
22 |       ]
23 |     });
24 | 
25 |     service = TestBed.inject(ContextService);
26 |   });
27 | 
28 |   it('should be created', () => {
29 |     expect(service).toBeTruthy();
30 |   });
31 | 
32 |   it('should get image', () => {
33 |     const fakeThumbnail: Thumbnail = {
34 |       path: 'fakePath',
35 |       extension: 'fake'
36 |     };
37 |     expect(service.getImage('fakeVariant', fakeThumbnail)).toBe('fakePath/fakeVariant.fake');
38 |   });
39 | 
40 |   it('should throw an error', () => {
41 |     const error = {
42 |       error: new ErrorEvent('Fake error')
43 |     } as HttpErrorResponse;
44 |     expect(() => service.handleError(error)).toThrow();
45 |   });
46 | 
47 |   it('should display an error', () => {
48 |     const error = {
49 |       error: 'Fake error'
50 |     } as HttpErrorResponse;
51 |     service.handleError(error);
52 |     expect(snackbarSpy.open.calls.any()).toBeTrue();
53 |   });
54 | 
55 |   it('should return an error', () => {
56 |     const error = {
57 |       error: 'Fake error'
58 |     } as HttpErrorResponse;
59 |     service.handleError(error).pipe(
60 |       catchError(err => {
61 |         expect(err).toEqual(error);
62 |         return EMPTY;
63 |       })
64 |     ).subscribe();
65 |   });
66 | });
67 | 


--------------------------------------------------------------------------------
/src/app/core/core.service.ts:
--------------------------------------------------------------------------------
 1 | import { HttpErrorResponse } from '@angular/common/http';
 2 | import { Injectable, inject, signal } from '@angular/core';
 3 | import { MatSnackBar } from '@angular/material/snack-bar';
 4 | import { throwError } from 'rxjs';
 5 | 
 6 | import { Thumbnail } from './thumbnail.model';
 7 | 
 8 | @Injectable({
 9 |   providedIn: 'root'
10 | })
11 | export class ContextService {
12 |   private snackbar = inject(MatSnackBar);
13 | 
14 |   copyright = '';
15 |   showProgress = signal(false);
16 | 
17 |   getImage(variant: string, thumbnail: Thumbnail) {
18 |     return `${thumbnail.path}/${variant}.${thumbnail.extension}`;
19 |   }
20 | 
21 |   handleError = (error: HttpErrorResponse) => {
22 |     if (error.error instanceof ErrorEvent) {
23 |       // A client-side or network error occurred. Throw it so that it can be handled by the global application error handler.
24 |       throw error;
25 |     } else {
26 |       // The backend returned an unsuccessful response code.
27 |       // The response body may contain clues as to what went wrong,
28 |       this.snackbar.open('Something bad happened! Please try again later.');
29 |     }
30 |     // return an ErrorObservable with a user-facing error message
31 |     return throwError(() => error);
32 |   };
33 | }
34 | 


--------------------------------------------------------------------------------
/src/app/core/footer/footer.component.html:
--------------------------------------------------------------------------------
1 | <mat-toolbar color="primary">
2 |   <mat-toolbar-row>
3 |     <small>{{contextService.copyright}}</small>
4 |   </mat-toolbar-row>
5 | </mat-toolbar>
6 | 


--------------------------------------------------------------------------------
/src/app/core/footer/footer.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 2 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 3 | 
 4 | import { ContextService } from '../core.service';
 5 | import { FooterComponent } from './footer.component';
 6 | 
 7 | describe('FooterComponent', () => {
 8 |   let fixture: ComponentFixture<FooterComponent>;
 9 |   let component: FooterComponent;
10 |   const contextServiceStub: Partial<ContextService> = {
11 |     copyright: 'Fake copyright'
12 |   };
13 | 
14 |   beforeEach(async () => {
15 |     TestBed.configureTestingModule({
16 |       imports: [FooterComponent],
17 |       providers: [
18 |         provideExperimentalZonelessChangeDetection(),
19 |         { provide: ContextService, useValue: contextServiceStub }
20 |       ]
21 |     });
22 | 
23 |     fixture = TestBed.createComponent(FooterComponent);
24 |     component = fixture.componentInstance;
25 |     await fixture.whenStable();
26 |   });
27 | 
28 |   it('should create', () => {
29 |     expect(component).toBeTruthy();
30 |   });
31 | 
32 |   it('should display copyright info', () => {
33 |     const footerDisplay: HTMLElement = fixture.nativeElement.querySelector('small');
34 |     expect(footerDisplay.textContent).toContain(contextServiceStub.copyright);
35 |   });
36 | });
37 | 


--------------------------------------------------------------------------------
/src/app/core/footer/footer.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, inject } from '@angular/core';
 2 | import { MatToolbar, MatToolbarRow } from '@angular/material/toolbar';
 3 | 
 4 | import { ContextService } from '../core.service';
 5 | 
 6 | @Component({
 7 |   selector: 'app-footer',
 8 |   templateUrl: './footer.component.html',
 9 |   imports: [MatToolbar, MatToolbarRow]
10 | })
11 | export class FooterComponent {
12 |   contextService = inject(ContextService);
13 | }
14 | 


--------------------------------------------------------------------------------
/src/app/core/header/header.component.html:
--------------------------------------------------------------------------------
 1 | <mat-toolbar color="primary">
 2 |   <mat-toolbar-row>
 3 |     <a class="logo" mat-icon-button href="https://www.angular.dev/" target="_blank">
 4 |       <img ngSrc="angular.png" fill priority>
 5 |     </a>
 6 |     <h2>Angular Heroes</h2>
 7 |     <a mat-icon-button href="https://github.com/bampakoa/angular-heroes" target="_blank" matTooltip="View code">
 8 |       <mat-icon>code</mat-icon>
 9 |     </a>
10 |   </mat-toolbar-row>
11 | </mat-toolbar>
12 | 


--------------------------------------------------------------------------------
/src/app/core/header/header.component.scss:
--------------------------------------------------------------------------------
1 | h2 {
2 |   flex: 1 1 auto;
3 | }
4 | 
5 | mat-icon {
6 |   color: white;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/app/core/header/header.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 2 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 3 | 
 4 | import { HeaderComponent } from './header.component';
 5 | 
 6 | describe('HeaderComponent', () => {
 7 |   let fixture: ComponentFixture<HeaderComponent>;
 8 |   let component: HeaderComponent;
 9 | 
10 |   beforeEach(() => {
11 |     TestBed.configureTestingModule({
12 |       imports: [HeaderComponent],
13 |       providers: [provideExperimentalZonelessChangeDetection()]
14 |     });
15 |     fixture = TestBed.createComponent(HeaderComponent);
16 |     component = fixture.componentInstance;
17 |   });
18 | 
19 |   it('should create', () => {
20 |     expect(component).toBeTruthy();
21 |   });
22 | });
23 | 


--------------------------------------------------------------------------------
/src/app/core/header/header.component.ts:
--------------------------------------------------------------------------------
 1 | import { NgOptimizedImage } from '@angular/common';
 2 | import { Component } from '@angular/core';
 3 | import { MatIconAnchor } from '@angular/material/button';
 4 | import { MatIcon } from '@angular/material/icon';
 5 | import { MatToolbar, MatToolbarRow } from '@angular/material/toolbar';
 6 | import { MatTooltip } from '@angular/material/tooltip';
 7 | 
 8 | @Component({
 9 |   selector: 'app-header',
10 |   templateUrl: './header.component.html',
11 |   styleUrl: './header.component.scss',
12 |   imports: [
13 |     MatToolbar,
14 |     MatToolbarRow,
15 |     MatIconAnchor,
16 |     MatIcon,
17 |     MatTooltip,
18 |     NgOptimizedImage
19 |   ]
20 | })
21 | export class HeaderComponent {}
22 | 


--------------------------------------------------------------------------------
/src/app/core/loading.interceptor.spec.ts:
--------------------------------------------------------------------------------
 1 | import { HttpClient, HttpInterceptorFn, provideHttpClient, withInterceptors } from '@angular/common/http';
 2 | import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
 3 | import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 4 | import { TestBed } from '@angular/core/testing';
 5 | 
 6 | import { ContextService } from './core.service';
 7 | import { loadingInterceptor } from './loading.interceptor';
 8 | 
 9 | describe('loadingInterceptor', () => {
10 |   const interceptor: HttpInterceptorFn = (req, next) => 
11 |     TestBed.runInInjectionContext(() => loadingInterceptor(req, next));
12 | 
13 |   beforeEach(() => {
14 |     TestBed.configureTestingModule({
15 |       providers: [
16 |         provideExperimentalZonelessChangeDetection(),
17 |         provideHttpClient(withInterceptors([loadingInterceptor])),
18 |         provideHttpClientTesting()
19 |       ]
20 |     });
21 |   });
22 | 
23 |   it('should be created', () => {
24 |     expect(interceptor).toBeTruthy();
25 |   });
26 | 
27 |   it('should set progress', () => {
28 |     const contextService = TestBed.inject(ContextService);
29 |     contextService.showProgress.set(true);
30 |     
31 |     TestBed.inject(HttpClient).get('/test').subscribe();
32 |     const req = TestBed.inject(HttpTestingController).expectOne('/test');
33 |     req.flush('');
34 |     
35 |     expect(contextService.showProgress()).toBeFalse();
36 |   });
37 | });
38 | 


--------------------------------------------------------------------------------
/src/app/core/loading.interceptor.ts:
--------------------------------------------------------------------------------
 1 | import { HttpInterceptorFn } from '@angular/common/http';
 2 | import { inject } from '@angular/core';
 3 | import { finalize } from 'rxjs';
 4 | 
 5 | import { ContextService } from './core.service';
 6 | 
 7 | export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
 8 |   const contextService = inject(ContextService);
 9 |   contextService.showProgress.set(true);
10 |   
11 |   return next(req).pipe(
12 |     finalize(() => contextService.showProgress.set(false))
13 |   );
14 | };
15 | 


--------------------------------------------------------------------------------
/src/app/core/marvel-response.model.ts:
--------------------------------------------------------------------------------
 1 | export interface MarvelResponseData<T> {
 2 |   total: number;
 3 |   results: T[];
 4 | }
 5 | 
 6 | export interface MarvelResponse<T> {
 7 |   attributionText: string;
 8 |   data: MarvelResponseData<T>;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/app/core/sidebar/sidebar.component.html:
--------------------------------------------------------------------------------
 1 | <mat-tab-group #tabGroup>
 2 |   <mat-tab label="Details">
 3 |     <app-character-detail [character]="character" />
 4 |   </mat-tab>
 5 |   <mat-tab label="Comics">
 6 |     @defer (when tabGroup.selectedIndex === 1) {
 7 |       <app-comic-list [character]="character" />
 8 |     }
 9 |   </mat-tab>
10 | </mat-tab-group>
11 | 


--------------------------------------------------------------------------------
/src/app/core/sidebar/sidebar.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { Component, provideExperimentalZonelessChangeDetection } from '@angular/core';
 2 | import { TestBed } from '@angular/core/testing';
 3 | import { MatDrawer } from '@angular/material/sidenav';
 4 | import { By } from '@angular/platform-browser';
 5 | import { provideNoopAnimations } from '@angular/platform-browser/animations';
 6 | import { provideRouter, RouterOutlet } from '@angular/router';
 7 | import { RouterTestingHarness } from '@angular/router/testing';
 8 | import { of } from 'rxjs';
 9 | 
10 | import { SidebarComponent } from './sidebar.component';
11 | import { character } from '../../../testing/mock-data';
12 | 
13 | @Component({
14 |   template: `
15 |     <mat-drawer>
16 |       <router-outlet />
17 |     </mat-drawer>
18 |   `,
19 |   imports: [SidebarComponent, MatDrawer, RouterOutlet]
20 | })
21 | class TestHostComponent { }
22 | 
23 | describe('SidebarComponent', () => {
24 |   beforeEach(async () => {
25 |     await TestBed.configureTestingModule({
26 |       providers: [
27 |         provideExperimentalZonelessChangeDetection(),
28 |         provideRouter([{
29 |           path: '',
30 |           component: TestHostComponent,
31 |           children: [ 
32 |             {
33 |               path: ':id',
34 |               component: SidebarComponent,
35 |               resolve: {
36 |                 character: () => of(character)
37 |               }
38 |             }
39 |           ]
40 |         }]),
41 |         provideNoopAnimations()
42 |       ]
43 |     })
44 |   });
45 | 
46 |   it('should navigate', async () => {
47 |     const harness = await RouterTestingHarness.create();
48 |     await harness.navigateByUrl('/1');
49 |     const component = harness.routeDebugElement?.query(By.directive(SidebarComponent)).componentInstance;
50 |     expect(component.tab()!.selectedIndex).toBe(0);
51 |     expect(component.character).toEqual(character);
52 |   });
53 | });
54 | 


--------------------------------------------------------------------------------
/src/app/core/sidebar/sidebar.component.ts:
--------------------------------------------------------------------------------
 1 | import { ChangeDetectionStrategy, Component, inject, OnInit, viewChild } from '@angular/core';
 2 | import { MatDrawer } from '@angular/material/sidenav';
 3 | import { MatTab, MatTabGroup } from '@angular/material/tabs';
 4 | import { ActivatedRoute } from '@angular/router';
 5 | 
 6 | import { CharacterDetailComponent } from '../../characters/character-detail/character-detail.component';
 7 | import { ComicListComponent } from '../../comics/comic-list/comic-list.component';
 8 | import { Character } from '../character.model';
 9 | 
10 | @Component({
11 |   selector: 'app-sidebar',
12 |   imports: [
13 |     MatTabGroup,
14 |     MatTab,
15 |     CharacterDetailComponent,
16 |     ComicListComponent
17 |   ],
18 |   templateUrl: './sidebar.component.html',
19 |   changeDetection: ChangeDetectionStrategy.OnPush
20 | })
21 | export class SidebarComponent implements OnInit {
22 |   private route = inject(ActivatedRoute);
23 |   private drawer = inject(MatDrawer);
24 |   
25 |   character: Character | undefined;
26 |   readonly tab = viewChild(MatTabGroup);
27 | 
28 |   ngOnInit() {
29 |     this.route.data.subscribe(data => {
30 |       this.tab()!.selectedIndex = 0;
31 |       this.drawer.toggle();
32 |       this.character = data['character'];
33 |     });
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/app/core/thumbnail.model.ts:
--------------------------------------------------------------------------------
1 | export interface Thumbnail {
2 |   extension: string;
3 |   path: string;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   apiUrl: 'https://gateway.marvel.com/v1/public/',
3 |   charactersLimit: 20
4 | };
5 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   apiUrl: 'https://gateway.marvel.com/v1/public/',
3 |   charactersLimit: 100
4 | };
5 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Angular Heroes</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 |   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" rel="stylesheet">
10 |   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
11 | </head>
12 | <body>
13 |   <app-root></app-root>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { bootstrapApplication } from '@angular/platform-browser';
2 | 
3 | import { AppComponent } from './app/app.component';
4 | import { appConfig } from './app/app.config';
5 | 
6 | bootstrapApplication(AppComponent, appConfig)
7 |   .catch(err => console.error(err));
8 | 


--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
 1 | /* You can add global styles to this file, and also import other style files */
 2 | @use '@angular/material' as mat;
 3 | 
 4 | :root {
 5 |   @include mat.toolbar-overrides((
 6 |     container-background-color: #673ab7,
 7 |     container-text-color: white
 8 |   ));
 9 | 
10 |   @include mat.icon-button-overrides((
11 |     icon-color: white
12 |   ));
13 | 
14 |   @include mat.sidenav-overrides((
15 |     content-background-color: transparent
16 |   ));
17 | }
18 | 
19 | app-character-list {
20 |   @include mat.icon-button-overrides((
21 |     icon-color: --sys-on-surface-variant
22 |   ));
23 | }
24 | 
25 | html, body { height: 100%; }
26 | body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
27 | 
28 | a[mat-icon-button] {
29 |   padding-top: 5px !important;
30 | }


--------------------------------------------------------------------------------
/src/testing/mock-data.ts:
--------------------------------------------------------------------------------
 1 | import { Character } from '../app/core/character.model';
 2 | import { MarvelResponseData } from '../app/core/marvel-response.model';
 3 | 
 4 | export const character = {
 5 |   id: 1,
 6 |   name: '',
 7 |   description: 'Super hero with magic powers',
 8 |   thumbnail: {
 9 |     path: '',
10 |     extension: ''
11 |   },
12 |   urls: [
13 |     {
14 |       url: 'fakeUrl',
15 |       type: 'png'
16 |     }
17 |   ]
18 | };
19 | 
20 | export const fakeMarvelResponseData: MarvelResponseData<Character> = {
21 |   results: [character],
22 |   total: 1
23 | };
24 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 3 | {
 4 |   "extends": "./tsconfig.json",
 5 |   "compilerOptions": {
 6 |     "outDir": "./out-tsc/app",
 7 |     "types": []
 8 |   },
 9 |   "files": [
10 |     "src/main.ts"
11 |   ],
12 |   "include": [
13 |     "src/**/*.d.ts"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 3 | {
 4 |   "compileOnSave": false,
 5 |   "compilerOptions": {
 6 |     "outDir": "./dist/out-tsc",
 7 |     "strict": true,
 8 |     "noImplicitOverride": true,
 9 |     "noPropertyAccessFromIndexSignature": true,
10 |     "noImplicitReturns": true,
11 |     "noFallthroughCasesInSwitch": true,
12 |     "skipLibCheck": true,
13 |     "isolatedModules": true,
14 |     "esModuleInterop": true,
15 |     "experimentalDecorators": true,
16 |     "moduleResolution": "bundler",
17 |     "importHelpers": true,
18 |     "target": "ES2022",
19 |     "module": "ES2022"
20 |   },
21 |   "angularCompilerOptions": {
22 |     "enableI18nLegacyMessageIdFormat": false,
23 |     "strictInjectionParameters": true,
24 |     "strictInputAccessModifiers": true,
25 |     "strictTemplates": true
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 3 | {
 4 |   "extends": "./tsconfig.json",
 5 |   "compilerOptions": {
 6 |     "outDir": "./out-tsc/spec",
 7 |     "types": [
 8 |       "jasmine"
 9 |     ]
10 |   },
11 |   "include": [
12 |     "src/**/*.spec.ts",
13 |     "src/**/*.d.ts"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------