Error 404: A Wild Error Appeared
3 | 4 |
5 | ![ash and pikachu sad]()
14 |
15 |
7 |
9 | }
10 |
11 |
13 |
15 |
17 |
19 |
2 |
7 |
--------------------------------------------------------------------------------
/src/app/core/components/decorative-header/decorative-header.component.scss:
--------------------------------------------------------------------------------
1 | @use 'base/media-queries' as mq;
2 |
3 | $svg-width: 200px;
4 |
5 | :host {
6 | .decorative-header__container {
7 | position: relative;
8 | display: flex;
9 | flex-direction: column-reverse;
10 | padding: var(--spacing-r-3xl);
11 | margin-block-end: var(--spacing-r-4xl);
12 | overflow: hidden;
13 | background: var(--septenary-contrast);
14 | border-radius: var(--border-radius-xl);
15 | transition: background 0.3s ease;
16 |
17 | @include mq.for-tablet-portrait-up {
18 | flex-direction: row;
19 | align-items: center;
20 | justify-content: space-between;
21 | }
22 |
23 | .decorative-header__image {
24 | width: $svg-width;
25 | height: auto;
26 | margin-bottom: var(--spacing-r-xl);
27 |
28 | // stylelint-disable selector-pseudo-element-no-unknown
29 | ::ng-deep svg {
30 | overflow: unset;
31 | }
32 |
33 | @include mq.for-tablet-portrait-up {
34 | margin-bottom: 0;
35 | }
36 | }
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/app/core/components/decorative-header/decorative-header.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
2 | import type { SafeHtml } from '@angular/platform-browser';
3 | import { DomSanitizer } from '@angular/platform-browser';
4 | import { FileService } from '~core/services/storage/file.service';
5 | import { rxResource } from '@angular/core/rxjs-interop';
6 |
7 | @Component({
8 | selector: 'app-decorative-header',
9 | templateUrl: './decorative-header.component.html',
10 | styleUrl: './decorative-header.component.scss',
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export class DecorativeHeaderComponent {
14 | private readonly fileService = inject(FileService);
15 | private readonly domSanitizer = inject(DomSanitizer);
16 |
17 | readonly svgUrl = input
3 |
5 |
6 | ¡Welcome back!
3 | 72 |My account
3 | 76 |
77 | ![ash standing]()
86 |
87 | ¡Register and complete your Pokédex!
3 | 149 |
6 | Angular
7 | Example App
8 |
9 | 12 | This project is a modern, real-world application designed as a foundation for creating new 13 | Angular-based projects and also a practical resource for learning. 14 |
15 | 16 |17 | It comes with features like internationalization, standalone components, a more logical folder 18 | structure, etc, making it a great starting point for building scalable Angular apps. 19 |
20 | 21 |22 | Whether you’re looking for a boilerplate or a solid base project, this setup is designed to help 23 | you create clean, maintainable code with ease. 24 |
25 | 26 |27 | This project leverages the PokeAPI to provide fun and practical examples, making it 28 | easier to understand key concepts in Angular development. By using data from the Pokémon 29 | universe, it offers a familiar and engaging way to showcase features like fetching data, 30 | handling API calls, and displaying dynamic content. 31 |
32 | 33 |
34 | ![ash and pikachu]()
42 |
43 |
44 | Key features
45 | 46 |
47 |
48 |
49 |
51 |
52 |
58 | Learn more about Signals
59 |
60 |
61 |
62 |
64 |
65 |
71 | Explore Internationalization
72 |
73 |
74 |
75 |
77 |
78 |
84 | Start with Reactive Forms
85 |
86 |
87 |
88 |
90 |
91 |
97 | Discover Angular Animations
98 |
99 |
100 | Angular Signals
50 |Unlock reactivity with Angular Signals.
53 |54 | Signals provide a declarative way to manage state and reactivity in your application, 55 | simplifying data flow and improving performance. 56 |
57 |Internationalization
63 |Build apps for a global audience.
66 |67 | Angular’s internationalization tools make it seamless to localize your app, handle 68 | translations, and format dates, numbers, and currencies for any locale. 69 |
70 |Reactive Forms
76 |Effortless form handling and validation.
79 |80 | Reactive Forms empower you to create robust, dynamic forms with a model-driven approach, 81 | making validation, dynamic updates, and testing a breeze. 82 |
83 |Animations
89 |Bring your UI to life with Angular Animations.
92 |93 | Create smooth transitions and engaging effects with Angular’s powerful animation API, 94 | making your application visually appealing and interactive. 95 |
96 |
101 | ![pokemon charizard]()
109 |
110 |
111 | ![pokemon blastoise]()
119 |
120 |
121 |
123 | Users seeing this page: {{ activeUsersResource.value().activeUsers }}
122 |
3 |
5 | }
6 |
7 |
8 |
2 |
62 |
--------------------------------------------------------------------------------
/src/app/features/pokemon/components/pokedex/pokedex.component.scss:
--------------------------------------------------------------------------------
1 | @use 'base/media-queries' as mq;
2 |
3 | $pokedex-red: #cd112f;
4 | $pokedex-black: #000;
5 | $pokedex-dark-gray: #222;
6 | $pokedex-light-gray: #dedede;
7 | $pokedex-green: #52af5f;
8 | $pokedex-blue: #08cbf8;
9 | $pokedex-white: #fff;
10 | $pokedex-text-dark: #032d28;
11 |
12 | :host {
13 | .pokedex__container {
14 | position: relative;
15 |
16 | &.closed {
17 | .pokedex__flap-container {
18 | transform: rotateX(180deg) translate(0, -14px);
19 | }
20 |
21 | .pokedex__joystick-container {
22 | left: -100px;
23 | }
24 |
25 | .pokedex__pad-container::before {
26 | background: $pokedex-black;
27 | }
28 | }
29 |
30 | .pokedex__separator,
31 | .pokedex__bottom-part-container {
32 | background: $pokedex-red;
33 | border: var(--spacing-xs) solid $pokedex-black;
34 | }
35 |
36 | .pokedex__flap-container {
37 | position: absolute;
38 | width: 100%;
39 | height: 100%;
40 | transform: rotateX(360deg);
41 | transform-origin: 0 100%;
42 | transition: transform 1s;
43 | transform-style: preserve-3d;
44 |
45 | figure {
46 | position: absolute;
47 | display: block;
48 | width: 100%;
49 | height: 100%;
50 | margin: 0;
51 | backface-visibility: hidden;
52 | }
53 |
54 | .pokedex__flap-front,
55 | .pokedex__flap-back {
56 | background: $pokedex-red;
57 | border: var(--spacing-xs) solid $pokedex-black;
58 | }
59 |
60 | .pokedex__flap-front {
61 | border-bottom-right-radius: var(--spacing-3xl);
62 | border-bottom-left-radius: var(--spacing-3xl);
63 | transform: rotateX(180deg);
64 | }
65 |
66 | .pokedex__flap-back {
67 | border-top-left-radius: 10px;
68 | border-top-right-radius: var(--spacing-3xl);
69 |
70 | &::before {
71 | position: absolute;
72 | width: 50px;
73 | height: 100px;
74 | margin-top: 23px;
75 | margin-left: -52px;
76 | content: ' ';
77 | background: $pokedex-red;
78 | border: var(--spacing-sx) solid $pokedex-black;
79 | border-right-width: 0;
80 | border-top-left-radius: 50px;
81 | border-bottom-left-radius: 50px;
82 | }
83 | }
84 | }
85 |
86 | .pokedex__top-part-container {
87 | position: relative;
88 | z-index: 11;
89 | width: 230px;
90 | height: 150px;
91 | margin-left: 70px;
92 | cursor: pointer;
93 | perspective: 800px;
94 | }
95 |
96 | .pokedex__separator {
97 | position: relative;
98 | z-index: 10;
99 | width: 230px;
100 | height: 10px;
101 | margin-left: 70px;
102 | border-bottom-width: 0;
103 | }
104 |
105 | .pokedex__bottom-part-container {
106 | position: relative;
107 | z-index: 10;
108 | display: flex;
109 | flex-direction: row;
110 | width: 300px;
111 | height: 150px;
112 | border-top-left-radius: 75px;
113 | border-bottom-right-radius: var(--spacing-3xl);
114 | border-bottom-left-radius: 75px;
115 | }
116 | }
117 | }
118 |
--------------------------------------------------------------------------------
/src/app/features/pokemon/components/pokedex/pokedex.component.ts:
--------------------------------------------------------------------------------
1 | import type { OnInit, WritableSignal } from '@angular/core';
2 | import {
3 | ChangeDetectionStrategy,
4 | Component,
5 | CUSTOM_ELEMENTS_SCHEMA,
6 | DestroyRef,
7 | effect,
8 | inject,
9 | input,
10 | signal,
11 | } from '@angular/core';
12 | import type { Pokemon } from '~features/pokemon/types/pokemon.type';
13 | import { PokemonImageComponent } from '~features/pokemon/components/pokemon-image/pokemon-image.component';
14 | import { FirstTitleCasePipe } from '~core/pipes/first-title-case.pipe';
15 | import { UserService } from '~features/authentication/services/user.service';
16 | import type { User } from '~features/authentication/types/user.type';
17 | import { BattleEvent } from '~features/pokemon/components/pokedex/enums/pokedex-action.enum';
18 | import { AlertStore } from '~core/services/ui/alert.store';
19 | import { translations } from '../../../../../locale/translations';
20 | import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
21 |
22 | @Component({
23 | selector: 'app-pokedex',
24 | templateUrl: './pokedex.component.html',
25 | styleUrls: ['./pokedex.component.scss', './pokedex-pads.component.scss'],
26 | changeDetection: ChangeDetectionStrategy.OnPush,
27 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
28 | imports: [PokemonImageComponent, FirstTitleCasePipe],
29 | })
30 | export class PokedexComponent implements OnInit {
31 | private readonly userService = inject(UserService);
32 | private readonly alertStore = inject(AlertStore);
33 | private readonly destroyRef = inject(DestroyRef);
34 |
35 | readonly pokemonBattleEvent = input.required
8 |
27 |
28 |
9 |
11 |
25 |
26 |
12 |
24 |
13 |
15 |
16 | @if (pokemon()) {
17 |
23 | {{pokemon()?.name | firstTitleCase}}
18 |N.º: {{pokemon()?.order}}
19 |Height: {{pokemon()?.height}} dm
20 |Weight: {{pokemon()?.weight}} hg
21 | } 22 |
29 |
56 |
30 |
31 |
32 |
33 |
34 | @if (userHasCaught()) {
35 |
55 | 36 | 🎯 Nice catch, {{user?.name}}! You’re one step closer to being a Pokémon Master—keep it 37 | up! 🌟 38 |
39 | } @else if (userHasPokemon()) { 40 |Already got this one, keep going!
41 | } @else { 42 |Still gotta catch 'em all, this one's missing from your Pokédex!
43 |
44 |
50 | POKEBALL
51 |
52 |
53 | }
54 |
57 |
61 |
58 |
59 |
60 |
2 |
49 |
--------------------------------------------------------------------------------
/src/app/features/pokemon/components/pokemon-battlefield/pokemon-battlefield.component.scss:
--------------------------------------------------------------------------------
1 | @use 'base/media-queries' as mq;
2 | @use 'components/pages';
3 |
4 | $battle-terrain-container-border-color: #444;
5 |
6 | :host {
7 | .pokemon-battlefield__container {
8 | position: relative;
9 | width: 285px;
10 | height: 160px;
11 | background-image: url('https://res.cloudinary.com/ismaestro/image/upload/angularexampleapp/assets/images/battle-grass.png');
12 | background-repeat: no-repeat;
13 | background-position: center;
14 | background-size: cover;
15 | border: 3px solid $battle-terrain-container-border-color;
16 | border-radius: var(--border-radius-lg);
17 | box-shadow: 0 var(--spacing-sm) var(--spacing-md) rgb(0 0 0 / 30%);
18 |
19 | @include mq.for-tablet-up {
20 | width: 512px;
21 | height: 288px;
22 | }
23 |
24 | .pokemon-battlefield__trainer-container {
25 | .pokemon-battlefield__trainer-image {
26 | position: absolute;
27 | bottom: 0;
28 | left: 70px;
29 | width: 45px;
30 | height: auto;
31 | opacity: 0;
32 | transition: opacity 1s ease-in-out;
33 |
34 | @include mq.for-tablet-up {
35 | bottom: 0;
36 | left: 150px;
37 | width: 65px;
38 | }
39 | }
40 |
41 | .trainer-1 {
42 | opacity: 1;
43 | }
44 |
45 | &.animate .trainer-1 {
46 | animation:
47 | trainer-throw-pokeball 0s 0.3s forwards,
48 | stay-visible 0s 0.9s forwards;
49 | }
50 |
51 | &.animate .trainer-2 {
52 | animation: trainer-throw-pokeball 0.3s 0.4s forwards;
53 | }
54 |
55 | &.animate .trainer-3 {
56 | animation: trainer-throw-pokeball 0.3s 0.4s forwards;
57 | }
58 |
59 | &.animate .trainer-4 {
60 | animation: trainer-throw-pokeball 0.3s 0.6s forwards;
61 | }
62 | }
63 |
64 | .pokemon-battlefield__pokemon-image-container {
65 | opacity: 0;
66 | transform: translateY(30px);
67 | transition:
68 | opacity 0.5s ease-in-out,
69 | transform 0.5s ease-in-out;
70 |
71 | &.loaded {
72 | opacity: 1;
73 | transform: translateY(-5px);
74 | }
75 | }
76 | }
77 | }
78 |
79 | @keyframes trainer-throw-pokeball {
80 | 0% {
81 | opacity: 1;
82 | }
83 |
84 | 50% {
85 | opacity: 1;
86 | }
87 |
88 | 100% {
89 | opacity: 0;
90 | }
91 | }
92 |
93 | @keyframes stay-visible {
94 | 0% {
95 | opacity: 1;
96 | }
97 |
98 | 100% {
99 | opacity: 1;
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/src/app/features/pokemon/components/pokemon-battlefield/pokemon-battlefield.component.ts:
--------------------------------------------------------------------------------
1 | import type { OnInit, WritableSignal } from '@angular/core';
2 | import { ChangeDetectionStrategy, Component, effect, input, signal } from '@angular/core';
3 | import type { Pokemon } from '~features/pokemon/types/pokemon.type';
4 | import { PokemonImageComponent } from '~features/pokemon/components/pokemon-image/pokemon-image.component';
5 | import { NgOptimizedImage } from '@angular/common';
6 | import { BattleEvent } from '~features/pokemon/components/pokedex/enums/pokedex-action.enum';
7 | import { CatchAnimationComponent } from '~features/pokemon/components/catch-animation/catch-animation.component';
8 |
9 | @Component({
10 | selector: 'app-pokemon-battlefield',
11 | templateUrl: './pokemon-battlefield.component.html',
12 | styleUrl: './pokemon-battlefield.component.scss',
13 | changeDetection: ChangeDetectionStrategy.OnPush,
14 | imports: [PokemonImageComponent, CatchAnimationComponent, NgOptimizedImage],
15 | })
16 | export class PokemonBattlefieldComponent implements OnInit {
17 | readonly pokemonBattleEvent = input.required
3 | ![Trainer frame 1]()
12 | ![Trainer frame 2]()
20 | ![Trainer frame 3]()
28 | ![Trainer frame 4]()
36 |
37 |
38 |
39 |
40 |
46 |
47 |
48 | {{ pokemon()?.name | firstTitleCase }}
5 |
8 |
9 | ![pokemon]()
10 |
11 | N.º: {{pokemon()?.order}}
12 |Height: {{pokemon()?.height}} dm
13 |Weight: {{pokemon()?.weight}} hg
14 |
23 |
25 |
2 |
14 |
16 |
17 | @if (searchState().showButton) {
18 |
19 | ![pokeball]()
29 |
30 | }
31 |
32 |
--------------------------------------------------------------------------------
/src/app/features/pokemon/components/pokemon-search-input/pokemon-search-input.component.scss:
--------------------------------------------------------------------------------
1 | $pokemon-search-input-width: 230px;
2 | $pokemon-search-loading-image-size: 20px;
3 |
4 | :host {
5 | width: $pokemon-search-input-width;
6 |
7 | .search__container {
8 | display: flex;
9 | align-items: center;
10 |
11 | .search__input.has-action {
12 | margin-right: var(--spacing-lg);
13 | }
14 |
15 | .search__loading-image {
16 | width: $pokemon-search-loading-image-size;
17 | height: $pokemon-search-loading-image-size;
18 | }
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/features/pokemon/components/pokemon-search-input/pokemon-search-input.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ChangeDetectionStrategy,
3 | Component, computed,
4 | CUSTOM_ELEMENTS_SCHEMA,
5 | DestroyRef,
6 | inject,
7 | input,
8 | signal,
9 | } from '@angular/core';
10 | import { PokemonService } from '~features/pokemon/services/pokemon.service';
11 | import { SlInputIconFocusDirective } from '~core/directives/sl-input-icon-focus.directive';
12 | import { POKEMON_URLS } from '~core/constants/urls.constants';
13 | import { Router } from '@angular/router';
14 | import { NgOptimizedImage } from '@angular/common';
15 | import { translations } from '../../../../../locale/translations';
16 | import { AlertStore } from '~core/services/ui/alert.store';
17 | import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
18 | import { TrimDirective } from '~core/directives/trim.directive';
19 |
20 | import '@shoelace-style/shoelace/dist/components/button/button.js';
21 | import '@shoelace-style/shoelace/dist/components/input/input.js';
22 | import '@shoelace-style/shoelace/dist/components/icon/icon.js';
23 |
24 | @Component({
25 | changeDetection: ChangeDetectionStrategy.OnPush,
26 | selector: 'app-pokemon-search-input',
27 | templateUrl: './pokemon-search-input.component.html',
28 | styleUrl: './pokemon-search-input.component.scss',
29 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
30 | imports: [SlInputIconFocusDirective, NgOptimizedImage, TrimDirective],
31 | })
32 | export class PokemonSearchInputComponent {
33 | private readonly router = inject(Router);
34 | private readonly pokemonService = inject(PokemonService);
35 | private readonly alertStore = inject(AlertStore);
36 | private readonly destroyRef = inject(DestroyRef);
37 |
38 | readonly title = inputMy Pokemon
3 |
5 |
9 |
10 | @if (!userPokemons?.length) {
11 |
12 |
29 | } @else {
30 |
13 |
18 | 14 | Uh-oh, it looks like you haven’t caught any Pokémon yet! Need help finding a pokemon? 15 | Try using the search bar to track them down. Gotta catch ‘em all! 16 |
17 |
19 | ![ash jumping with a pokeball]()
27 |
28 | -
31 | @for (pokemon of userPokemons$ | ngrxPush; track pokemon.id) {
32 |
-
33 |
34 |
35 | }
36 |
-
41 |
-
42 |
43 |
44 | -
45 |
46 |
47 | -
48 |
49 |
50 |
5 |
7 | }
8 |
--------------------------------------------------------------------------------
/src/app/features/pokemon/pages/pokemon-detail/pokemon-detail.component.scss:
--------------------------------------------------------------------------------
1 | @use 'base/media-queries' as mq;
2 | @use 'components/pages';
3 |
4 | $pokedex-container-offset: 60px;
5 |
6 | :host {
7 | @include pages.read-page;
8 |
9 | align-items: center;
10 |
11 | .pokedex__container {
12 | margin: var(--spacing-r-4xl) 0;
13 |
14 | @include mq.for-tablet-up {
15 | margin: var(--spacing-r-4xl) $pokedex-container-offset 0 0;
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/features/pokemon/pages/pokemon-detail/pokemon-detail.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ChangeDetectionStrategy,
3 | Component,
4 | CUSTOM_ELEMENTS_SCHEMA,
5 | effect,
6 | inject,
7 | signal,
8 | } from '@angular/core';
9 | import { PokemonService } from '~features/pokemon/services/pokemon.service';
10 | import type { Pokemon } from '~features/pokemon/types/pokemon.type';
11 | import { ActivatedRoute } from '@angular/router';
12 | import { PokemonBattlefieldComponent } from '~features/pokemon/components/pokemon-battlefield/pokemon-battlefield.component';
13 | import { PokedexComponent } from '~features/pokemon/components/pokedex/pokedex.component';
14 | import { BattleEvent } from '~features/pokemon/components/pokedex/enums/pokedex-action.enum';
15 | import { translations } from '../../../../../locale/translations';
16 | import { AlertStore } from '~core/services/ui/alert.store';
17 | import { toSignal } from '@angular/core/rxjs-interop';
18 | import { map } from 'rxjs';
19 |
20 | @Component({
21 | selector: 'app-pokemon-detail',
22 | templateUrl: './pokemon-detail.component.html',
23 | styleUrl: './pokemon-detail.component.scss',
24 | changeDetection: ChangeDetectionStrategy.OnPush,
25 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
26 | imports: [PokemonBattlefieldComponent, PokedexComponent],
27 | })
28 | export class PokemonDetailComponent {
29 | private readonly activatedRoute = inject(ActivatedRoute);
30 | private readonly pokemonService = inject(PokemonService);
31 | private readonly alertStore = inject(AlertStore);
32 |
33 | readonly pokemonId = toSignal(
34 | this.activatedRoute.paramMap.pipe(map((parameters) => parameters.get('pokemonId') ?? '')),
35 | { initialValue: '' },
36 | );
37 | readonly pokemonResource = this.pokemonService.getPokemonResource(this.pokemonId);
38 | readonly pokemon = signal