-
- :clap::clap::tada::tada::tada::tada::clap::clap: -
-
- Base project made with much :heart:. Contains CRUD, advanced patterns, generated library, and much more! -
-
-
- -
- DEMO HERE +
-
- Example app with Angular 13 + Angular CLI + i18n + Graphql
-
-
- :clap::clap::tada::tada::tada::tada::clap::clap:
-
-
- Base project made with much :heart:. Contains CRUD, advanced patterns, generated library, and much more!
-
-
-
-
-
- DEMO HERE
+
+ Your all-in-one real-world Angular starter — built for learning, productivity, and scaling.
+
+ Crafted with ❤️ to showcase real best practices in action: standalone components, signals, routing, i18n, authentication and more.
+
+ 🔥 Live Demo
+
+ 
 Tom Gamull 🚇 |
+  mansyaprime 💻 |
+  codeimmortal 💻 |
+  tomasfse 💻 |
+  golu 💻 |
+  rancyr 💻 |
+  codingphasedotcom 💻 |
+
 Max 💻 |
+  Karajan 💻 |
+  Carl Chan 💻 |
+  Dyeimys Franco Correa 💻 |
+  Anartz Mugika Ledo 💻 |
+  OrlPep 💻 |
+
- All notable changes to this project will be documented in this file. See - standard-version - for commit guidelines. -
--
- src/app/modules/hero/shared/hero.model.ts
-
-
- Deserializable
-
- Properties- |
-
| - - | -
- Methods- |
-
-
|
-
-constructor(hero: any)
- |
- ||||||
|
- Defined in src/app/modules/hero/shared/hero.model.ts:10
- |
- ||||||
|
-
- Parameters :
-
-
|
-
| - - - alterEgo - - - | -
- Type : string
-
- |
-
|
- Defined in src/app/modules/hero/shared/hero.model.ts:7
- |
-
| - - - id - - - | -
- Type : string
-
- |
-
|
- Defined in src/app/modules/hero/shared/hero.model.ts:5
- |
-
| - - - image - - - | -
- Type : string
-
- |
-
|
- Defined in src/app/modules/hero/shared/hero.model.ts:9
- |
-
| - - - published - - - | -
- Type : boolean
-
- |
-
|
- Defined in src/app/modules/hero/shared/hero.model.ts:8
- |
-
| - - - realName - - - | -
- Type : string
-
- |
-
|
- Defined in src/app/modules/hero/shared/hero.model.ts:6
- |
-
| - - - usersVoted - - - | -
- Type : User[]
-
- |
-
|
- Defined in src/app/modules/hero/shared/hero.model.ts:10
- |
-
| - - - deserialize - - - | -||||||
-deserialize(input: any)
- |
- ||||||
|
- Defined in src/app/modules/hero/shared/hero.model.ts:21
- |
- ||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- this
-
-
-
-
- |
-
import { Deserializable } from '~shared/interfaces/deserializable.interface';
-import { User } from '../../user/shared/user.model';
-
-export class Hero implements Deserializable {
- id: string;
- realName: string;
- alterEgo: string;
- published: boolean;
- image: string;
- usersVoted: User[];
-
- constructor(hero: any = {}) {
- this.id = hero.id;
- this.realName = hero.realName || '';
- this.alterEgo = hero.alterEgo || '';
- this.published = hero.published || false;
- this.image = hero.image || '';
- this.usersVoted = hero.usersVoted || [];
- }
-
- deserialize(input: any) {
- Object.assign(this, input);
- return this;
- }
-}
--
- src/app/modules/user/shared/user.model.ts
-
-
- Deserializable
-
- Properties- |
-
| - - | -
- Methods- |
-
-
|
-
-constructor(user: any)
- |
- ||||||
|
- Defined in src/app/modules/user/shared/user.model.ts:15
- |
- ||||||
|
-
- Parameters :
-
-
|
-
| - - - email - - - | -
- Type : string
-
- |
-
|
- Defined in src/app/modules/user/shared/user.model.ts:11
- |
-
| - - - firstname - - - | -
- Type : string
-
- |
-
|
- Defined in src/app/modules/user/shared/user.model.ts:12
- |
-
| - - - heroes - - - | -
- Type : Hero[]
-
- |
-
|
- Defined in src/app/modules/user/shared/user.model.ts:15
- |
-
| - - - id - - - | -
- Type : string
-
- |
-
|
- Defined in src/app/modules/user/shared/user.model.ts:10
- |
-
| - - - lastname - - - | -
- Type : string
-
- |
-
|
- Defined in src/app/modules/user/shared/user.model.ts:13
- |
-
| - - - role - - - | -
- Type : Role
-
- |
-
|
- Defined in src/app/modules/user/shared/user.model.ts:14
- |
-
| - - - deserialize - - - | -||||||
-deserialize(input: any)
- |
- ||||||
|
- Defined in src/app/modules/user/shared/user.model.ts:26
- |
- ||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- this
-
-
-
-
- |
-
import { Deserializable } from '~shared/interfaces/deserializable.interface';
-import { Hero } from '../../hero/shared/hero.model';
-
-export enum Role {
- ADMIN = 'ADMIN',
- USER = 'USER',
-}
-
-export class User implements Deserializable {
- id: string;
- email: string;
- firstname: string;
- lastname: string;
- role: Role;
- heroes: Hero[];
-
- constructor(user: any = {}) {
- this.id = user.id;
- this.email = user.email;
- this.firstname = user.firstname;
- this.lastname = user.lastname;
- this.role = user.role;
- this.heroes = user.heroes;
- }
-
- deserialize(input: any) {
- Object.assign(this, input);
- return this;
- }
-}
--
- src/app/app.component.ts
-
-
- OnInit
-
| selector | -app-root |
-
| templateUrl | -./app.component.html |
-
- Properties- |
-
-
|
-
- Methods- |
-
-
|
-
-constructor(title: Title, meta: Meta, snackBar: MatSnackBar, router: Router, renderer: Renderer2, doc: Document, locale: string)
- |
- ||||||||||||||||||||||||
|
- Defined in src/app/app.component.ts:16
- |
- ||||||||||||||||||||||||
|
-
- Parameters :
-
-
|
-
| - - - checkBrowser - - - | -
-checkBrowser()
- |
-
|
- Defined in src/app/app.component.ts:60
- |
-
|
-
-
- Returns :
- void
-
- |
-
| - - - checkBrowserFeatures - - - | -
-checkBrowserFeatures()
- |
-
|
- Defined in src/app/app.component.ts:68
- |
-
|
-
-
- Returns :
- boolean
-
- |
-
| - - - ngOnInit - - - | -
-ngOnInit()
- |
-
|
- Defined in src/app/app.component.ts:31
- |
-
|
-
-
- Returns :
- void
-
- |
-
| - - - onEvents - - - | -
-onEvents()
- |
-
|
- Defined in src/app/app.component.ts:38
- |
-
|
-
-
- Returns :
- void
-
- |
-
| - - - isOnline - - - | -
- Type : boolean
-
- |
-
|
- Defined in src/app/app.component.ts:16
- |
-
import { Component, Inject, LOCALE_ID, OnInit, Renderer2 } from '@angular/core';
-import { Meta, Title } from '@angular/platform-browser';
-import { NavigationEnd, Router } from '@angular/router';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { DOCUMENT } from '@angular/common';
-import { RoutesConfig } from './configs/routes.config';
-import { UtilsHelperService } from '~app/modules/core/services/utils-helper.service';
-
-declare const Modernizr: any;
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
-})
-export class AppComponent implements OnInit {
- isOnline: boolean;
-
- constructor(
- private title: Title,
- private meta: Meta,
- private snackBar: MatSnackBar,
- private router: Router,
- private renderer: Renderer2,
- @Inject(DOCUMENT) doc: Document,
- @Inject(LOCALE_ID) locale: string
- ) {
- this.isOnline = navigator.onLine;
- renderer.setAttribute(doc.documentElement, 'lang', locale);
- }
-
- ngOnInit() {
- this.title.setTitle('App title');
-
- this.onEvents();
- this.checkBrowser();
- }
-
- onEvents() {
- this.router.events.subscribe((event: any) => {
- if (event instanceof NavigationEnd) {
- switch (event.urlAfterRedirects) {
- case '/':
- this.meta.updateTag({
- name: 'description',
- content: 'Home meta description',
- });
- break;
- case '/' + RoutesConfig.routesNames.hero.basePath:
- this.title.setTitle('Heroes list');
- this.meta.updateTag({
- name: 'description',
- content: 'Heroes meta description',
- });
- break;
- }
- }
- });
- }
-
- checkBrowser() {
- if (UtilsHelperService.isBrowserValid()) {
- this.checkBrowserFeatures();
- } else {
- this.snackBar.open('Change your browser', 'OK');
- }
- }
-
- checkBrowserFeatures() {
- let supported = true;
- for (const feature in Modernizr) {
- if (
- Modernizr.hasOwnProperty(feature) &&
- typeof Modernizr[feature] === 'boolean' &&
- Modernizr[feature] === false
- ) {
- supported = false;
- break;
- }
- }
-
- if (!supported) {
- this.snackBar.open('Update your browser', 'OK');
- }
-
- return supported;
- }
-}
-<div>
- <app-header></app-header>
- <router-outlet *ngIf="isOnline; else isOffline"></router-outlet>
- <ng-template #isOffline>
- <div>
- <p class="offline-error" i18n>Without connection we can not load anything!</p>
- </div>
- </ng-template>
-</div>
-<app-footer></app-footer>
--
- src/app/modules/root/pages/error404-page/error404-page.component.ts
-
| selector | -app-error404-page |
-
| styleUrls | -./error404-page.component.scss |
-
| templateUrl | -./error404-page.component.html |
-
-constructor()
- |
-
| - - | -
import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-error404-page',
- templateUrl: './error404-page.component.html',
- styleUrls: ['./error404-page.component.scss'],
-})
-export class Error404PageComponent {
- constructor() {}
-}
-<h1 class="header__title" i18n>404 Error</h1>
-<p class="explanation" i18n>May the force be with you</p>
-<img alt="404 image star wars" src="./assets/images/404.gif" />
-
- ./error404-page.component.scss
-
@import '../../../../styles/mixins';
-
-img {
- @include push--auto();
- display: block;
-}
-
-.explanation {
- margin: 1rem 0;
- text-align: center;
- font-size: 1.2rem;
- font-weight: 300;
-}
--
- src/app/modules/root/shared/footer/footer.component.ts
-
| selector | -app-footer |
-
| styleUrls | -./footer.component.scss |
-
| templateUrl | -./footer.component.html |
-
-constructor()
- |
-
| - - | -
import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-footer',
- templateUrl: './footer.component.html',
- styleUrls: ['./footer.component.scss'],
-})
-export class FooterComponent {
- constructor() {}
-}
-<footer>
- <div
- fxFlex
- fxLayout="row"
- fxLayout.xs="column"
- fxLayoutAlign="center center"
- class.xs="footer-xs"
- >
- <div fxFlex="33">
- <span i18n>Angular Example App</span>
- </div>
- <div fxFlex="33" class="text--center">
- <lib-ngx-example-library></lib-ngx-example-library>
- </div>
- <div fxFlex class="text--right" class.xs="footer-xs">
- <a href="https://angular.io/" rel="noreferrer" target="_blank">
- <img alt="angular logo" src="./assets/images/angular.svg" />
- </a>
- </div>
- </div>
-</footer>
-
- ./footer.component.scss
-
@import '../../../../styles/mixins';
-
-footer {
- padding: calculateRem(8px) calculateRem(16px);
- color: $secondary--color;
- background: $primary--color;
- margin-top: 2rem;
- position: sticky;
- top: 100%;
-
- img {
- width: 25%;
- }
-}
-
-.footer-xs {
- text-align: center;
- padding-top: 1rem;
-}
--
- src/app/modules/root/shared/header/header.component.ts
-
-
- OnInit
-
| selector | -app-header |
-
| styleUrls | -./header.component.scss |
-
| templateUrl | -./header.component.html |
-
- Properties- |
-
-
|
-
- Methods- |
-
-
|
-
-constructor(appConfig: any, routesConfig: any, storageService: StorageService, authService: AuthService, router: Router)
- |
- ||||||||||||||||||
| - - | -||||||||||||||||||
|
-
- Parameters :
-
-
|
-
| - - - changeLanguage - - - | -||||||
-changeLanguage(language: string)
- |
- ||||||
| - - | -||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- void
-
-
-
-
- |
-
| - - - logOut - - - | -
-logOut()
- |
-
| - - | -
|
-
-
- Returns :
- void
-
- |
-
| - - - ngOnInit - - - | -
-ngOnInit()
- |
-
| - - | -
|
-
-
- Returns :
- void
-
- |
-
| - - - Public - appConfig - - - | -
- Type : any
-
- |
-
|
- Decorators :
- -
- @Inject(APP_CONFIG)
- |
-
| - - | -
| - - - currentUrl - - - | -
- Type : string
-
- |
-
| - - | -
| - - - isLoggedIn - - - | -
- Type : boolean
-
- |
-
| - - | -
| - - - languages - - - | -
- Type : any[]
-
- |
-
| - - | -
| - - - Public - routesConfig - - - | -
- Type : any
-
- |
-
|
- Decorators :
- -
- @Inject(ROUTES_CONFIG)
- |
-
| - - | -
| - - - selectedLanguage - - - | -
- Type : string
-
- |
-
| - - | -
import { Component, Inject, OnInit } from '@angular/core';
-import { APP_CONFIG } from '~app/configs/app.config';
-import { NavigationEnd, Router } from '@angular/router';
-import { ROUTES_CONFIG, RoutesConfig } from '~app/configs/routes.config';
-import { AuthService } from '../../../auth/auth.service';
-import { StorageService } from '~shared/services/storage.service';
-
-@Component({
- selector: 'app-header',
- templateUrl: './header.component.html',
- styleUrls: ['./header.component.scss'],
-})
-export class HeaderComponent implements OnInit {
- selectedLanguage: string;
- currentUrl: string;
- languages: any[];
- isLoggedIn: boolean;
-
- constructor(
- @Inject(APP_CONFIG) public appConfig: any,
- @Inject(ROUTES_CONFIG) public routesConfig: any,
- private storageService: StorageService,
- private authService: AuthService,
- private router: Router
- ) {
- this.selectedLanguage = '';
- this.currentUrl = '';
- this.languages = [
- { name: 'en', label: 'English' },
- { name: 'es', label: 'Español' },
- ];
- this.isLoggedIn = this.authService.isLoggedIn();
- }
-
- ngOnInit() {
- this.selectedLanguage = this.storageService.getCookie('language') || 'en';
- this.router.events.subscribe(event => {
- if (event instanceof NavigationEnd) {
- this.currentUrl = event.url;
- this.isLoggedIn = this.authService.isLoggedIn();
- }
- });
- }
-
- changeLanguage(language: string): void {
- this.storageService.setCookie('language', language);
- this.selectedLanguage = language;
- }
-
- logOut(): void {
- this.storageService.removeCookie('accessToken');
- this.isLoggedIn = this.authService.isLoggedIn();
- this.router.navigate([RoutesConfig.routes.home]);
- }
-}
-<header>
- <nav>
- <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center">
- <div fxFlex="40">
- <a mat-raised-button [routerLink]="routesConfig.routes.home" i18n> Home </a>
- <a
- mat-raised-button
- *ngIf="isLoggedIn"
- [routerLink]="routesConfig.routes.hero.myHeroes"
- i18n
- >My Heroes</a
- >
- </div>
- <div fxFlex class="text--right">
- <app-search-bar></app-search-bar>
- <button aria-label="select language button" mat-icon-button [matMenuTriggerFor]="matmenu">
- <mat-icon>language</mat-icon>
- </button>
- <mat-menu #matmenu="matMenu">
- <div mat-menu-item *ngFor="let lang of languages">
- <a
- class="language-link"
- href="{{ lang.name === 'en' ? currentUrl : '/' + lang.name + currentUrl }}"
- (click)="changeLanguage(lang.name)"
- >
- <mat-icon>flag</mat-icon>
- <span>{{ lang.label }}</span>
- </a>
- </div>
- </mat-menu>
- <a
- mat-raised-button
- *ngIf="!isLoggedIn"
- [routerLink]="routesConfig.routes.auth.signUp"
- i18n
- >
- Sign Up
- </a>
- <a mat-raised-button *ngIf="!isLoggedIn" [routerLink]="routesConfig.routes.auth.logIn" i18n>
- Log In
- </a>
- <a mat-raised-button *ngIf="isLoggedIn" (click)="logOut()"> Log out </a>
- </div>
- </div>
- </nav>
-</header>
-
- ./header.component.scss
-
@import '../../../../styles/mixins';
-
-:host(app-header) {
- padding-top: 0;
- padding-bottom: 6.5rem;
- display: grid;
-
- header {
- position: fixed;
- z-index: 999;
- width: 100%;
-
- nav {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- padding: 0 calculateRem(16px);
- color: $secondary--color;
- height: 4rem;
- background: $primary--color;
-
- .mat-raised-button {
- color: $primary--color;
- margin-right: 1rem;
- }
-
- .progress-bar {
- display: flex;
- align-content: center;
- align-items: center;
- height: calculateRem(5px);
- }
-
- a {
- text-transform: uppercase;
- }
-
- .icon__image {
- width: calculateRem(20px);
- height: calculateRem(20px);
- }
-
- img {
- vertical-align: middle;
- }
-
- #today {
- font-size: 0.7rem;
- }
-
- #logo {
- display: flex;
- margin-right: 1rem;
-
- a {
- width: 4.25rem;
- height: 4.25rem;
-
- img {
- width: 100%;
- height: auto;
- opacity: 0.8;
-
- &:hover {
- opacity: 1;
- }
- }
- }
- }
- }
- }
-}
-
-@media (max-width: 807px) {
- #today {
- width: 50%;
- }
-
- #logo {
- display: none;
- }
-}
-
-@media (max-width: 680px) {
- :host(app-header) {
- padding-top: 0;
- padding-bottom: 1rem;
-
- header {
- position: relative;
-
- nav {
- height: 7rem;
- display: flex;
- padding: 1rem 2rem 0;
-
- > div {
- margin-top: 1rem;
- }
-
- #today {
- margin-top: 1rem;
- }
- }
- }
- }
-}
-
-@media (max-width: 425px) {
- :host(app-header) {
- padding-bottom: 0;
-
- header {
- nav {
- app-search-bar {
- width: 75%;
- }
- }
- }
- }
-}
--
- src/app/shared/components/hero-card/hero-card.component.ts
-
| changeDetection | -ChangeDetectionStrategy.OnPush |
-
| selector | -app-hero-card |
-
| styleUrls | -./hero-card.component.scss |
-
| templateUrl | -./hero-card.component.html |
-
- Properties- |
-
-
|
-
- Methods- |
-
-
|
-
- Inputs- |
-
-
|
-
-constructor(heroService: HeroService, router: Router, utilsService: UtilsService, authService: AuthService, eventsService: EventsService, routesConfig: any)
- |
- |||||||||||||||||||||
| - - | -|||||||||||||||||||||
|
-
- Parameters :
-
-
|
-
| - - hero - | -|
- Type : Hero | undefined
-
- |
- |
| - - | -|
| - - - like - - - | -||||||
-like(hero: Hero)
- |
- ||||||
| - - | -||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- Promise | void
-
-
-
-
- |
-
| - - - Public - routesConfig - - - | -
- Type : any
-
- |
-
|
- Decorators :
- -
- @Inject(ROUTES_CONFIG)
- |
-
| - - | -
import { ChangeDetectionStrategy, Component, Inject, Input } from '@angular/core';
-import { Hero } from '~modules/hero/shared/hero.model';
-import { transition, trigger, useAnimation } from '@angular/animations';
-import { fadeIn } from 'ng-animate';
-import { ROUTES_CONFIG, RoutesConfig } from '~app/configs/routes.config';
-import { HeroService } from '~modules/hero/shared/hero.service';
-import { Router } from '@angular/router';
-import { AuthService } from '~modules/auth/auth.service';
-import { UtilsService } from '../../services/utils.service';
-import { EventsService, EventsTypes } from '~modules/core/services/events.servide';
-
-@Component({
- selector: 'app-hero-card',
- templateUrl: './hero-card.component.html',
- styleUrls: ['./hero-card.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush,
- animations: [
- trigger('fadeIn', [
- transition(
- '* => *',
- useAnimation(fadeIn, {
- params: { timing: 1, delay: 0 },
- })
- ),
- ]),
- ],
-})
-export class HeroCardComponent {
- @Input() hero: Hero | undefined;
-
- constructor(
- private heroService: HeroService,
- private router: Router,
- private utilsService: UtilsService,
- private authService: AuthService,
- private eventsService: EventsService,
- @Inject(ROUTES_CONFIG) public routesConfig: any
- ) {}
-
- like(hero: Hero): Promise<void> | void {
- if (this.authService.isLoggedIn()) {
- this.heroService.voteHero(hero).subscribe(response => {
- if (!response.errors) {
- this.eventsService.send({ type: EventsTypes.UPDATE_HEROES });
- } else {
- this.utilsService.showSnackBar(response.errors[0].message, 'warning-snack-bar');
- }
- });
- } else {
- this.router.navigate([RoutesConfig.routes.auth.logIn]);
- }
- }
-}
-<mat-card class="hero-card" *ngIf="hero" [@fadeIn]="'fadeIn'">
- <mat-card-header>
- <mat-card-title>
- <a class="hero-detail-link" [routerLink]="[routesConfig.routes.hero.detail(hero.id)]">
- {{ hero.alterEgo }}
- </a>
- </mat-card-title>
- <mat-card-subtitle>
- <a class="hero-detail-link" [routerLink]="[routesConfig.routes.hero.detail(hero.id)]">
- {{ hero.realName }}
- </a>
- </mat-card-subtitle>
- <div class="flex-spacer"></div>
- <div class="hero-actions">
- {{ hero.usersVoted.length }}
- <mat-icon class="icon__like--red" (click)="like(hero)">favorite </mat-icon>
- </div>
- </mat-card-header>
- <a class="hero-detail-link" [routerLink]="[routesConfig.routes.hero.detail(hero.id)]">
- <img alt="{{ hero.realName }} hero image" [defaultImage]="hero.image" [lazyLoad]="hero.image" />
- </a>
-</mat-card>
-
- ./hero-card.component.scss
-
@import '../../../styles/mixins';
-@import '../../../styles/colors';
-
-.hero-detail-link {
- @include text-small-grey();
-}
-
-mat-card-title,
-mat-card-subtitle,
-.mat-card-image {
- cursor: pointer;
-}
-
-.hero-card {
- margin-bottom: 2rem;
- @include push--auto(2rem);
-}
-
-.progress__spinner {
- @include push--auto();
-}
-
-img {
- width: 100%;
- height: auto;
-}
-
-@media (max-width: 680px) {
- .hero-card {
- width: 80%;
- @include push--auto();
- }
-
- .mat-card {
- margin-bottom: 2rem;
- }
-}
--
- src/app/modules/hero/pages/hero-detail-page/hero-detail-page.component.ts
-
-
- OnInit
-
| selector | -app-hero-detail-page |
-
| styleUrls | -./hero-detail-page.component.scss |
-
| templateUrl | -./hero-detail-page.component.html |
-
- Properties- |
-
-
|
-
- Methods- |
-
-
|
-
-constructor(location: Location, router: Router, activatedRoute: ActivatedRoute)
- |
- ||||||||||||
| - - | -||||||||||||
|
-
- Parameters :
-
-
|
-
| - - - goBack - - - | -
-goBack()
- |
-
| - - | -
|
-
-
- Returns :
- void
-
- |
-
| - - - goToTheAnchor - - - | -
-goToTheAnchor()
- |
-
| - - | -
|
-
-
- Returns :
- void
-
- |
-
| - - - ngOnInit - - - | -
-ngOnInit()
- |
-
| - - | -
|
-
-
- Returns :
- void
-
- |
-
| - - - hero - - - | -
- Type : Hero | undefined
-
- |
-
| - - | -
import { Component, OnInit } from '@angular/core';
-import { Hero } from '../../shared/hero.model';
-import { ActivatedRoute, Router } from '@angular/router';
-import { Location } from '@angular/common';
-import { transition, trigger, useAnimation } from '@angular/animations';
-import { fadeIn } from 'ng-animate';
-import { RoutesConfig } from '../../../../configs/routes.config';
-
-@Component({
- selector: 'app-hero-detail-page',
- templateUrl: './hero-detail-page.component.html',
- styleUrls: ['./hero-detail-page.component.scss'],
- animations: [
- trigger('fadeIn', [
- transition(
- '* => *',
- useAnimation(fadeIn, {
- params: { timing: 1, delay: 0 },
- })
- ),
- ]),
- ],
-})
-export class HeroDetailPageComponent implements OnInit {
- hero: Hero | undefined;
-
- constructor(
- private location: Location,
- private router: Router,
- private activatedRoute: ActivatedRoute
- ) {}
-
- ngOnInit() {
- this.activatedRoute.snapshot.data['hero'].subscribe((hero: Hero) => {
- this.hero = hero;
- });
- }
-
- goBack(): void {
- this.location.back();
- }
-
- goToTheAnchor(): void {
- if (this.hero) {
- this.router.navigate([RoutesConfig.routes.hero.detail(this.hero.id)], {
- fragment: 'heroe-detail',
- });
- }
- }
-}
-<h1 class="header__title" i18n>Hero detail</h1>
-<div class="container" *ngIf="!hero">
- <app-hero-loading></app-hero-loading>
-</div>
-<div class="container" *ngIf="hero" [@fadeIn]="'fadeIn'">
- <ng-container>
- <app-hero-card [hero]="hero"></app-hero-card>
- <div id="hero-json">
- <pre>{{ hero | json }}</pre>
- </div>
- </ng-container>
-</div>
-<button
- *ngIf="hero"
- aria-label="Anchor the hero button"
- mat-raised-button
- type="button"
- (click)="goToTheAnchor()"
- i18n
->
- Anchor the hero
-</button>
-<button aria-label="Go back button" mat-raised-button type="button" (click)="goBack()" i18n>
- Go back
-</button>
-
- ./hero-detail-page.component.scss
-
@import '../../../../styles/mixins';
-
-.container {
- width: 65%;
- @include push--auto();
- margin-top: 2rem;
-}
-
-button {
- @include push--auto(2rem);
- display: block;
-}
-
-@media (max-width: 600px) {
- .container {
- width: 90%;
- }
-}
--
- src/app/shared/components/hero-loading/hero-loading.component.ts
-
| selector | -app-hero-loading |
-
| styleUrls | -./hero-loading.component.scss |
-
| templateUrl | -./hero-loading.component.html |
-
-constructor()
- |
-
| - - | -
import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-hero-loading',
- templateUrl: './hero-loading.component.html',
- styleUrls: ['./hero-loading.component.scss'],
-})
-export class HeroLoadingComponent {
- constructor() {}
-}
-<mat-card id="loading-card" class="hero-card">
- <mat-card-header>
- <div mat-card-avatar class="hero-header__image"></div>
- <mat-card-title>
- <app-loading-placeholder [width]="'200px'" [height]="'1rem'"></app-loading-placeholder>
- </mat-card-title>
- <mat-card-subtitle>
- <app-loading-placeholder [width]="'160px'" [height]="'1rem'"></app-loading-placeholder>
- </mat-card-subtitle>
- <div class="flex-spacer"></div>
- <div class="hero-actions">
- <mat-icon class="icon__like--grey">favorite</mat-icon>
- </div>
- </mat-card-header>
- <app-loading-placeholder [height]="'486px'"></app-loading-placeholder>
-</mat-card>
-
- ./hero-loading.component.scss
-
@import '../../../styles/colors';
-
-.hero-header__image {
- background: $grey;
-}
--
- src/app/modules/hero/components/hero-remove/hero-remove.component.ts
-
| selector | -app-hero-remove |
-
| templateUrl | -./hero-remove.component.html |
-
-constructor()
- |
-
| - - | -
import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-hero-remove',
- templateUrl: './hero-remove.component.html',
-})
-export class HeroRemoveComponent {
- constructor() {}
-}
-<h2 mat-dialog-title i18n>Delete hero</h2>
-<mat-dialog-content i18n>Are you sure?</mat-dialog-content>
-<mat-dialog-actions>
- <button aria-label="no button" mat-button mat-dialog-close i18n>No</button>
- <button aria-label="yes button" mat-button [mat-dialog-close]="true" i18n>Yes</button>
-</mat-dialog-actions>
--
- src/app/modules/root/pages/home-page/home-page.component.ts
-
-
- OnInit
-
| selector | -app-home-page |
-
| styleUrls | -./home-page.component.scss |
-
| templateUrl | -./home-page.component.html |
-
- Properties- |
-
-
|
-
- Methods- |
-
-
|
-
-constructor(heroService: HeroService, eventsService: EventsService)
- |
- |||||||||
| - - | -|||||||||
|
-
- Parameters :
-
-
|
-
| - - - ngOnInit - - - | -
-ngOnInit()
- |
-
| - - | -
|
-
-
- Returns :
- void
-
- |
-
| - - - heroes$ - - - | -
- Type : Observable<Hero[]> | undefined
-
- |
-
| - - | -
import { Component, OnInit } from '@angular/core';
-import { Hero } from '../../../hero/shared/hero.model';
-import { Observable } from 'rxjs';
-import { HeroService } from '../../../hero/shared/hero.service';
-import { EventsService, EventsTypes } from '../../../core/services/events.servide';
-
-@Component({
- selector: 'app-home-page',
- templateUrl: './home-page.component.html',
- styleUrls: ['./home-page.component.scss'],
-})
-export class HomePageComponent implements OnInit {
- heroes$: Observable<Hero[]> | undefined;
-
- constructor(private heroService: HeroService, private eventsService: EventsService) {
- // @ts-ignore
- if (window.Cypress) {
- // @ts-ignore
- window.HomePageComponent = this;
- }
- }
-
- ngOnInit() {
- this.heroes$ = this.heroService.searchHeroes({ fetchPolicy: 'no-cache' });
-
- this.eventsService.events$.subscribe(event => {
- if (event.type === EventsTypes.UPDATE_HEROES) {
- this.heroes$ = this.heroService.searchHeroes({ fetchPolicy: 'no-cache' });
- }
- });
- }
-}
-<div fxLayout="row">
- <div fxFlex="10" fxFlex.gt-sm="20"></div>
- <div fxFlex="90" fxFlex.gt-sm="80">
- <h1 class="header__title" i18n>Heroes published</h1>
- <div id="heroes-list" *ngIf="heroes$ | async as heroes; else loading">
- <ng-container *ngFor="let hero of heroes">
- <app-hero-card [hero]="hero"></app-hero-card>
- </ng-container>
- </div>
- <ng-template #loading>
- <app-hero-loading></app-hero-loading>
- </ng-template>
- </div>
- <div fxFlex="10" fxFlex.gt-sm="20"></div>
-</div>
-
- ./home-page.component.scss
-
mat-card-title,
-mat-card-subtitle,
-.mat-card-image {
- cursor: pointer;
-}
--
- src/app/shared/components/loading-placeholder/loading-placeholder.component.ts
-
| selector | -app-loading-placeholder |
-
| styleUrls | -./loading-placeholder.component.scss |
-
| templateUrl | -./loading-placeholder.component.html |
-
- Inputs- |
-
| - - | -
-constructor()
- |
-
| - - | -
| - - height - | -|
- Type : string
-
- |
- |
- Default value : ''
- |
- |
| - - | -|
| - - width - | -|
- Type : string
-
- |
- |
- Default value : ''
- |
- |
| - - | -|
import { Component, Input } from '@angular/core';
-
-@Component({
- selector: 'app-loading-placeholder',
- templateUrl: './loading-placeholder.component.html',
- styleUrls: ['./loading-placeholder.component.scss'],
-})
-export class LoadingPlaceholderComponent {
- @Input() height = '';
- @Input() width = '';
-
- constructor() {}
-}
-<div class="placeholder-animation" [ngStyle]="{ height: height, width: width }"></div>
-
- ./loading-placeholder.component.scss
-
@import 'src/app/styles/colors';
-
-@keyframes placeHolderShimmer {
- 0% {
- background-position: -468px 0;
- }
- 100% {
- background-position: 468px 0;
- }
-}
-
-.placeholder-animation {
- animation-duration: 1.25s;
- animation-fill-mode: forwards;
- animation-iteration-count: infinite;
- animation-name: placeHolderShimmer;
- animation-timing-function: linear;
- background: darkgray;
- background: linear-gradient(to right, $light-grey 10%, #dddddd 18%, #eeeeee 33%);
- position: relative;
- background-size: 1000px 100px;
-}
--
- src/app/modules/auth/pages/log-in-page/log-in-page.component.ts
-
| selector | -app-log-in-page |
-
| styleUrls | -./log-in-page.component.scss |
-
| templateUrl | -./log-in-page.component.html |
-
- Properties- |
-
| - - | -
- Methods- |
-
-
|
-
-constructor(formBuilder: FormBuilder, authService: AuthService, router: Router, utilsService: UtilsService)
- |
- |||||||||||||||
| - - | -|||||||||||||||
|
-
- Parameters :
-
-
|
-
| - - - getErrorMessage - - - | -||||||
-getErrorMessage(field: string)
- |
- ||||||
| - - | -||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- string | void
-
-
-
-
- |
-
| - - - sendForm - - - | -
-sendForm()
- |
-
| - - | -
|
-
-
- Returns :
- void
-
- |
-
| - - - email - - - | -
- Default value : new FormControl('', [Validators.required, Validators.email])
- |
-
| - - | -
| - - - hide - - - | -
- Default value : true
- |
-
| - - | -
| - - - loginForm - - - | -
- Type : any
-
- |
-
|
- Decorators :
- -
- @ViewChild('loginForm')
- |
-
| - - | -
| - - - logInForm - - - | -
- Type : FormGroup
-
- |
-
| - - | -
| - - - password - - - | -
- Default value : new FormControl('', [Validators.required])
- |
-
| - - | -
import { Component, ViewChild } from '@angular/core';
-import { transition, trigger, useAnimation } from '@angular/animations';
-import { fadeIn } from 'ng-animate';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { AuthService } from '../../auth.service';
-import { RoutesConfig } from '../../../../configs/routes.config';
-import { Router } from '@angular/router';
-import { UtilsService } from '../../../../shared/services/utils.service';
-
-@Component({
- selector: 'app-log-in-page',
- templateUrl: './log-in-page.component.html',
- styleUrls: ['./log-in-page.component.scss'],
- animations: [
- trigger('fadeIn', [
- transition(
- '* => *',
- useAnimation(fadeIn, {
- params: { timing: 1, delay: 0 },
- })
- ),
- ]),
- ],
-})
-export class LogInPageComponent {
- @ViewChild('loginForm') loginForm: any;
-
- logInForm: FormGroup;
- email = new FormControl('', [Validators.required, Validators.email]);
- password = new FormControl('', [Validators.required]);
- hide = true;
-
- constructor(
- private formBuilder: FormBuilder,
- private authService: AuthService,
- private router: Router,
- private utilsService: UtilsService
- ) {
- this.logInForm = this.formBuilder.group({
- email: this.email,
- password: this.password,
- });
- }
-
- getErrorMessage(field: string): string | void {
- // @ts-ignore
- const classField = this[field];
- if (classField?.hasError('required')) {
- return 'You must enter a value';
- } else if (classField?.hasError('email')) {
- return 'Not a valid email';
- }
- }
-
- sendForm() {
- if (this.logInForm.valid) {
- const formValue = this.logInForm.value;
- this.authService.logIn(formValue.email, formValue.password).subscribe((response: any) => {
- if (!response.errors) {
- this.router.navigate([RoutesConfig.routes.hero.myHeroes]);
- } else if (response.errors[0].code === 11000) {
- this.utilsService.showSnackBar("Nice! Let's create some heroes", 'info-snack-bar');
- }
- });
- }
- }
-}
-<mat-grid-list cols="1" rows="1" rowHeight="2:1">
- <mat-grid-tile>
- <mat-card class="login--form__box--blue">
- <div class="login--form-container">
- <p class="login--form__header-title">Try to log in!</p>
- <form class="example-container" [formGroup]="logInForm" #loginForm="ngForm">
- <p>
- <mat-form-field appearance="outline">
- <mat-label>Enter your email</mat-label>
- <input matInput placeholder="pat@example.com" [formControl]="email" required />
- <mat-error *ngIf="email.invalid">{{ getErrorMessage('email') }}</mat-error>
- </mat-form-field>
- </p>
- <p>
- <mat-form-field appearance="outline">
- <mat-label>Enter a password</mat-label>
- <input matInput [formControl]="password" [type]="hide ? 'password' : 'text'" />
- <button
- mat-icon-button
- matSuffix
- (click)="hide = !hide"
- [attr.aria-label]="'Hide password'"
- [attr.aria-pressed]="hide"
- >
- <mat-icon>{{ hide ? 'visibility_off' : 'visibility' }}</mat-icon>
- </button>
- <mat-hint
- >Must be minimum eight characters, at least one uppercase letter, one lowercase
- letter and one number</mat-hint
- >
- <mat-error *ngIf="password.invalid">{{ getErrorMessage('password') }}</mat-error>
- </mat-form-field>
- </p>
- <p>
- <button
- class="login--form__submit-button"
- mat-raised-button
- color="primary"
- (click)="sendForm()"
- >
- {{ 'Log In' | uppercase }}
- </button>
- </p>
- </form>
- </div>
- </mat-card>
- </mat-grid-tile>
-</mat-grid-list>
-
- ./log-in-page.component.scss
-
@import '../../../../styles/mixins';
-
-.login--form-container {
- text-align: center;
-
- p {
- margin-bottom: 1rem;
- }
-
- .login--form__header-title {
- margin-bottom: 2rem;
- }
-}
-
-.login--form-container .mat-form-field + .mat-form-field {
- margin-left: 8px;
-}
-
-.mat-form-field {
- width: 100%;
-}
-
-.login--form__box--blue {
- padding: 4rem;
-}
-
-:host ::ng-deep .mat-form-field-flex {
- background: rgb(245, 245, 245);
-}
-
-.login--form__header-title {
- font-weight: bold;
- font-size: 20px;
- color: #000000de;
-}
-
-.login--form__submit-button {
- margin-top: 40px;
-}
--
- src/app/modules/hero/pages/my-heroes-page/my-heroes-page.component.ts
-
-
- OnInit
-
| selector | -app-my-heroes-page |
-
| styleUrls | -./my-heroes-page.component.scss |
-
| templateUrl | -./my-heroes-page.component.html |
-
- Properties- |
-
-
|
-
- Methods- |
-
-
|
-
-constructor(heroService: HeroService, userService: UserService, dialog: MatDialog, snackBar: MatSnackBar, utilsService: UtilsService, router: Router, formBuilder: FormBuilder, routesConfig: any)
- |
- |||||||||||||||||||||||||||
| - - | -|||||||||||||||||||||||||||
|
-
- Parameters :
-
-
|
-
| - - - createNewHero - - - | -
-createNewHero()
- |
-
| - - | -
|
-
-
- Returns :
- void
-
- |
-
| - - - deleteHero - - - | -||||||
-deleteHero(hero: Hero)
- |
- ||||||
| - - | -||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- void
-
-
-
-
- |
-
| - - - loadUser - - - | -
-loadUser()
- |
-
| - - | -
|
-
-
- Returns :
- void
-
- |
-
| - - - ngOnInit - - - | -
-ngOnInit()
- |
-
| - - | -
|
-
-
- Returns :
- void
-
- |
-
| - - - Private - onChanges - - - | -
-
- onChanges()
- |
-
| - - | -
|
-
-
- Returns :
- void
-
- |
-
| - - - trackByFn - - - | -||||||
-trackByFn(index: any)
- |
- ||||||
| - - | -||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- any
-
-
-
-
- |
-
| - - - alterEgo - - - | -
- Type : FormControl
-
- |
-
| - - | -
| - - - error - - - | -
- Type : boolean
-
- |
-
| - - | -
| - - - myNgForm - - - | -
- Type : any
-
- |
-
- Default value : ''
- |
-
|
- Decorators :
- -
- @ViewChild('form', {static: false})
- |
-
| - - | -
| - - - newHeroForm - - - | -
- Type : any
-
- |
-
| - - | -
| - - - realName - - - | -
- Type : FormControl
-
- |
-
| - - | -
| - - - Public - routesConfig - - - | -
- Type : any
-
- |
-
|
- Decorators :
- -
- @Inject(ROUTES_CONFIG)
- |
-
| - - | -
| - - - user - - - | -
- Type : User | undefined
-
- |
-
| - - | -
import { Component, Inject, OnInit, ViewChild } from '@angular/core';
-import { Hero } from '../../shared/hero.model';
-import { FormBuilder, FormControl, Validators } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { Router } from '@angular/router';
-import { HeroRemoveComponent } from '../../components/hero-remove/hero-remove.component';
-import { transition, trigger, useAnimation } from '@angular/animations';
-import { fadeIn } from 'ng-animate';
-import { ROUTES_CONFIG } from '../../../../configs/routes.config';
-import { HeroService } from '../../shared/hero.service';
-import { UtilsHelperService } from '../../../core/services/utils-helper.service';
-import { UserService } from '../../../user/user.service';
-import { User } from '../../../user/shared/user.model';
-import { UtilsService } from '../../../../shared/services/utils.service';
-
-@Component({
- selector: 'app-my-heroes-page',
- templateUrl: './my-heroes-page.component.html',
- styleUrls: ['./my-heroes-page.component.scss'],
- animations: [
- trigger('fadeIn', [
- transition(
- '* => *',
- useAnimation(fadeIn, {
- params: { timing: 1, delay: 0 },
- })
- ),
- ]),
- ],
-})
-export class MyHeroesPageComponent implements OnInit {
- user: User | undefined;
- newHeroForm: any;
- error: boolean;
- realName: FormControl;
- alterEgo: FormControl;
-
- @ViewChild('form', { static: false }) myNgForm: any = ''; // just to call resetForm method
-
- constructor(
- private heroService: HeroService,
- private userService: UserService,
- private dialog: MatDialog,
- private snackBar: MatSnackBar,
- private utilsService: UtilsService,
- private router: Router,
- private formBuilder: FormBuilder,
- @Inject(ROUTES_CONFIG) public routesConfig: any
- ) {
- this.error = false;
- this.realName = new FormControl('', [Validators.required, Validators.maxLength(30)]);
- this.alterEgo = new FormControl('', [Validators.required, Validators.maxLength(30)]);
- this.newHeroForm = this.formBuilder.group({
- realName: this.realName,
- alterEgo: this.alterEgo,
- });
-
- this.onChanges();
- }
-
- ngOnInit() {
- this.loadUser();
- }
-
- loadUser() {
- this.userService.getMe({ fetchPolicy: 'no-cache' }).subscribe((user: User) => {
- this.user = user;
- });
- }
-
- createNewHero() {
- if (this.newHeroForm.valid) {
- this.heroService.createHero(new Hero(this.newHeroForm.value)).subscribe(response => {
- if (!response.errors) {
- this.myNgForm.resetForm();
- this.utilsService.showSnackBar('Hero created', 'info-snack-bar');
- this.loadUser();
- }
- });
- }
- }
-
- deleteHero(hero: Hero) {
- const dialogRef = this.dialog.open(HeroRemoveComponent);
- dialogRef.afterClosed().subscribe(result => {
- if (result) {
- this.heroService.removeHero(hero.id).subscribe(response => {
- if (!response.errors) {
- this.utilsService.showSnackBar('Hero removed', 'info-snack-bar');
- this.loadUser();
- } else {
- this.error = true;
- }
- });
- }
- });
- }
-
- trackByFn(index: any) {
- return index;
- }
-
- private onChanges() {
- this.newHeroForm.get('realName')?.valueChanges.subscribe((value: any) => {
- if (value && value.length >= 3 && UtilsHelperService.isPalindrome(value)) {
- this.snackBar.open("Yeah that's a Palindrome!", '', { duration: 2000 });
- } else {
- this.snackBar.dismiss();
- }
- });
- }
-}
-<div id="left">
- <h2 class="header__title" i18n>My heroes</h2>
- <p *ngIf="!user?.heroes?.length" class="my-heroes__no-heroes--message" i18n>
- No heroes yet, try to create one in the right side!
- </p>
- <div>
- <mat-list id="loading-list" *ngIf="!user?.heroes">
- <mat-list-item *ngFor="let i of [1, 2, 3, 4, 5, 6, 7, 8]">
- <img alt="default hero avatar" mat-list-avatar src="./assets/images/default-hero.png" />
- <h3 mat-line>
- <app-loading-placeholder [width]="'150px'" [height]="'0.9rem'"></app-loading-placeholder>
- </h3>
- <p mat-line>
- <app-loading-placeholder [width]="'100px'" [height]="'0.9rem'"></app-loading-placeholder>
- </p>
- <div class="hero-actions">
- <app-loading-placeholder [width]="'30px'" [height]="'0.9rem'"></app-loading-placeholder>
-
- <mat-icon class="icon__like--grey">favorite</mat-icon>
- </div>
- </mat-list-item>
- </mat-list>
- <mat-list>
- <mat-list-item *ngFor="let hero of user?.heroes; trackBy: trackByFn">
- <h3 mat-line [class.cp]="hero.published">
- {{ hero.alterEgo }}
- </h3>
- <p mat-line [class.cp]="hero.published">
- <span>{{ hero.realName }}</span>
- </p>
- <div class="hero-actions">
- <mat-icon class="icon__remove" *ngIf="!hero.published" (click)="deleteHero(hero)">
- delete
- </mat-icon>
- </div>
- </mat-list-item>
- </mat-list>
- </div>
-</div>
-<div id="right">
- <h2 class="header__title" i18n>Create a hero</h2>
- <div id="form-loading" *ngIf="!user?.heroes">
- <form>
- <div class="input-container">
- <app-loading-placeholder [height]="'2rem'"></app-loading-placeholder>
- </div>
- <div class="input-container">
- <app-loading-placeholder [height]="'2rem'"></app-loading-placeholder>
- </div>
-
- <button aria-label="create button" mat-raised-button [disabled]="true" i18n>Create</button>
- </form>
- </div>
- <div *ngIf="user?.heroes">
- <form
- [formGroup]="newHeroForm"
- #form="ngForm"
- ngxScrollToFirstInvalid
- (ngSubmit)="createNewHero()"
- autocomplete="on"
- >
- <mat-form-field class="input-container">
- <input
- matInput
- name="hname"
- type="text"
- placeholder="Name (Palindrome?)"
- i18n-placeholder="@@nameWithPalindrome"
- formControlName="realName"
- />
- <mat-error *ngIf="realName.errors && form.submitted">
- <ng-template [ngIf]="realName.errors['required']" i18n> Name is required </ng-template>
- <ng-template [ngIf]="realName.errors['maxlength']" i18n>
- The field is too long
- </ng-template>
- </mat-error>
- </mat-form-field>
- <mat-form-field class="input-container">
- <input
- matInput
- type="text"
- name="rname"
- placeholder="Alter ego"
- i18n-placeholder="@@realName"
- formControlName="alterEgo"
- />
- <mat-error *ngIf="alterEgo.errors && form.submitted">
- <ng-template [ngIf]="alterEgo.errors['required']" i18n> Name is required </ng-template>
- <ng-template [ngIf]="alterEgo.errors['maxlength']" i18n>
- The field is too long. Required length:
- {{ alterEgo.errors['maxlength'].requiredLength }}. Current:
- {{ alterEgo.errors['maxlength'].actualLength }}
- </ng-template>
- </mat-error>
- </mat-form-field>
- <button
- aria-label="create button"
- mat-raised-button
- type="submit"
- [disabled]="form.submitted && !newHeroForm.valid"
- i18n
- >
- Create
- </button>
- <div *ngIf="error" i18n>An error has ocurred</div>
- </form>
- </div>
-
- <div id="heroes-json">
- <h2 class="header__title" i18n>Heroes 1 and 2</h2>
- <pre *ngIf="!user?.heroes">
- <app-loading-placeholder [height]="'300px'"></app-loading-placeholder>
- </pre>
- <pre *ngIf="user?.heroes">{{ user?.heroes | slice: 0:2 | json }}</pre>
- </div>
-</div>
-<div class="clear"></div>
-
- ./my-heroes-page.component.scss
-
@import 'src/app/styles/mixins';
-@import 'src/app/styles/colors';
-
-a {
- @include text-small-grey();
-}
-
-#loading-list {
- p {
- margin-top: 0.2rem;
- }
-}
-
-#form-loading {
- .input-container {
- margin: 0.5rem 0;
- }
-}
-
-#left {
- width: 50%;
- float: left;
- margin-left: 6%;
-}
-
-#right {
- margin-left: 50%;
- text-align: center;
- padding-right: 17%;
-}
-
-.clear {
- clear: both;
-}
-
-.mat-list {
- @include push--auto();
- display: table;
-
- .mat-list-text {
- text-align: left !important;
- }
-}
-
-.hero-actions {
- margin-left: 1rem;
- padding-bottom: 0;
-
- .icon__remove {
- padding-left: 0.5rem;
- color: darkslategrey;
- cursor: pointer;
- }
-}
-
-form {
- display: grid;
- width: 80%;
- @include push--auto();
-
- .mat-raised-button {
- color: $secondary--color;
- background: $primary--color;
- width: 50%;
- @include push--auto();
- }
-
- .mat-form-field {
- width: 100%;
- }
-}
-
-#heroes-json {
- margin-top: 2rem;
-
- pre {
- margin-top: 1rem;
- }
-}
-
-.my-heroes__no-heroes--message {
- text-align: center;
- width: 20%;
- margin: 0 auto;
- line-height: 1.7rem;
-}
-
-@media (max-width: 680px) {
- #left {
- width: 100%;
- float: none;
- @include push--auto();
- }
-
- #right {
- margin: 1em auto 0;
- width: 90%;
- float: none;
- padding: 0;
- }
-}
--
- src/app/modules/root/shared/search-bar/search-bar.component.ts
-
-
- OnInit
-
| selector | -app-search-bar |
-
| styleUrls | -./search-bar.component.scss |
-
| templateUrl | -./search-bar.component.html |
-
- Properties- |
-
-
|
-
- Methods- |
-
-
|
-
-constructor(heroService: HeroService, routesConfig: any)
- |
- |||||||||
| - - | -|||||||||
|
-
- Parameters :
-
-
|
-
| - - - filterHeroes - - - | -||||||
-filterHeroes(val: string)
- |
- ||||||
| - - | -||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- Hero[]
-
-
-
-
- |
-
| - - - ngOnInit - - - | -
-ngOnInit()
- |
-
| - - | -
|
-
-
- Returns :
- void
-
- |
-
| - - - defaultHeroes - - - | -
- Type : Array<Hero>
-
- |
-
| - - | -
| - - - filteredHeroes - - - | -
- Type : any
-
- |
-
| - - | -
| - - - heroFormControl - - - | -
- Type : FormControl
-
- |
-
| - - | -
| - - - Public - routesConfig - - - | -
- Type : any
-
- |
-
|
- Decorators :
- -
- @Inject(ROUTES_CONFIG)
- |
-
| - - | -
import { map, startWith } from 'rxjs/operators';
-import { Component, Inject, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
-import { Hero } from '../../../hero/shared/hero.model';
-import { ROUTES_CONFIG } from '~app/configs/routes.config';
-import { HeroService } from '../../../hero/shared/hero.service';
-
-@Component({
- selector: 'app-search-bar',
- templateUrl: './search-bar.component.html',
- styleUrls: ['./search-bar.component.scss'],
-})
-export class SearchBarComponent implements OnInit {
- defaultHeroes: Array<Hero>;
- heroFormControl: FormControl;
- filteredHeroes: any;
-
- constructor(private heroService: HeroService, @Inject(ROUTES_CONFIG) public routesConfig: any) {
- this.defaultHeroes = [];
- this.heroFormControl = new FormControl();
- }
-
- ngOnInit() {
- this.heroService.searchHeroes({ fetchPolicy: 'no-cache' }).subscribe((heroes: Array<Hero>) => {
- this.defaultHeroes = heroes;
-
- this.heroFormControl.valueChanges
- .pipe(
- startWith(null as unknown as string),
- map(value => this.filterHeroes(value))
- )
- .subscribe(heroesFiltered => {
- this.filteredHeroes = heroesFiltered;
- });
- });
- }
-
- filterHeroes(val: string): Hero[] {
- return val
- ? this.defaultHeroes.filter(
- hero => hero.alterEgo.toLowerCase().indexOf(val.toLowerCase()) === 0
- )
- : this.defaultHeroes;
- }
-}
-<mat-form-field id="search-input">
- <input
- matInput
- placeholder="Look for a hero!"
- i18n-placeholder
- [matAutocomplete]="heroesAutocomplete"
- [formControl]="heroFormControl"
- />
-</mat-form-field>
-
-<mat-autocomplete #heroesAutocomplete="matAutocomplete">
- <mat-option *ngFor="let hero of filteredHeroes" [value]="hero.name">
- <a class="hero-link" [routerLink]="[routesConfig.routes.hero.detail(hero.id)]">
- {{ hero.alterEgo | capitalizefirst }}
- </a>
- </mat-option>
-</mat-autocomplete>
-
- ./search-bar.component.scss
-
@import '../../../../styles/mixins';
-@import '../../../../styles/colors';
-
-.hero-link {
- text-decoration: none;
-}
--
- src/app/modules/auth/pages/sign-up-page/sign-up-page.component.ts
-
| selector | -app-sign-up-page |
-
| styleUrls | -./sign-up-page.component.scss |
-
| templateUrl | -./sign-up-page.component.html |
-
- Properties- |
-
| - - | -
- Methods- |
-
-
|
-
-constructor(formBuilder: FormBuilder, authService: AuthService, router: Router, utilsService: UtilsService)
- |
- |||||||||||||||
| - - | -|||||||||||||||
|
-
- Parameters :
-
-
|
-
| - - - getErrorMessage - - - | -||||||
-getErrorMessage(field: any)
- |
- ||||||
| - - | -||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- string | void
-
-
-
-
- |
-
| - - - sendForm - - - | -
-sendForm()
- |
-
| - - | -
|
-
-
- Returns :
- void
-
- |
-
| - - - email - - - | -
- Default value : new FormControl('', [Validators.required, Validators.email])
- |
-
| - - | -
| - - - firstName - - - | -
- Default value : new FormControl('', [Validators.required, Validators.maxLength(100)])
- |
-
| - - | -
| - - - hide - - - | -
- Default value : true
- |
-
| - - | -
| - - - lastName - - - | -
- Default value : new FormControl('', [Validators.required, Validators.maxLength(100)])
- |
-
| - - | -
| - - - password - - - | -
- Default value : new FormControl('', [
- Validators.required,
- Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z\\d]{8,}$'),
- ])
- |
-
| - - | -
| - - - signUpForm - - - | -
- Type : FormGroup
-
- |
-
| - - | -
import { Component } from '@angular/core';
-import { transition, trigger, useAnimation } from '@angular/animations';
-import { fadeIn } from 'ng-animate';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { AuthService } from '../../auth.service';
-import { UtilsService } from '../../../../shared/services/utils.service';
-import { RoutesConfig } from '../../../../configs/routes.config';
-import { Router } from '@angular/router';
-
-@Component({
- selector: 'app-sign-up-page',
- templateUrl: './sign-up-page.component.html',
- styleUrls: ['./sign-up-page.component.scss'],
- animations: [
- trigger('fadeIn', [
- transition(
- '* => *',
- useAnimation(fadeIn, {
- params: { timing: 1, delay: 0 },
- })
- ),
- ]),
- ],
-})
-export class SignUpPageComponent {
- signUpForm: FormGroup;
- firstName = new FormControl('', [Validators.required, Validators.maxLength(100)]);
- lastName = new FormControl('', [Validators.required, Validators.maxLength(100)]);
- email = new FormControl('', [Validators.required, Validators.email]);
- password = new FormControl('', [
- Validators.required,
- Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z\\d]{8,}$'),
- ]);
- hide = true;
-
- constructor(
- private formBuilder: FormBuilder,
- private authService: AuthService,
- private router: Router,
- private utilsService: UtilsService
- ) {
- this.signUpForm = this.formBuilder.group({
- firstName: this.firstName,
- lastName: this.lastName,
- email: this.email,
- password: this.password,
- });
- }
-
- getErrorMessage(field: any): string | void {
- // @ts-ignore
- const classField: any = this[field];
- if (classField?.hasError('required')) {
- return 'You must enter a value';
- } else if (classField?.hasError('email')) {
- return 'Not a valid email';
- } else if (classField?.hasError('pattern')) {
- return 'Not a valid password';
- }
- }
-
- sendForm() {
- if (this.signUpForm.valid) {
- const formValue = this.signUpForm.value;
- this.authService
- .signUp(formValue.firstName, formValue.lastName, formValue.email, formValue.password)
- .subscribe((response: any) => {
- if (!response.errors) {
- this.router.navigate([RoutesConfig.routes.auth.logIn]).then(() => {
- this.utilsService.showSnackBar('Cool! Now try to log in!', 'info-snack-bar');
- });
- } else if (response.errors[0].code === 10000) {
- this.utilsService.showSnackBar(
- 'This email is not available. Try again, with a different one.',
- 'warning-snack-bar'
- );
- }
- });
- }
- }
-}
-<mat-grid-list cols="1" rows="1" rowHeight="2:1">
- <mat-grid-tile>
- <mat-card class="signup--form__box--blue">
- <div class="signup--form-container">
- <p class="signup--form__header-title">Give it a try!</p>
- <form class="example-container" [formGroup]="signUpForm">
- <p>
- <mat-form-field appearance="outline">
- <mat-label>First name</mat-label>
- <input [formControl]="firstName" matInput placeholder="Jason" />
- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
- <mat-error *ngIf="email.invalid">{{ getErrorMessage('firstName') }}</mat-error>
- </mat-form-field>
- </p>
- <p>
- <mat-form-field appearance="outline">
- <mat-label>Last name</mat-label>
- <input [formControl]="lastName" matInput placeholder="Bourne" />
- <mat-icon matSuffix>favorite</mat-icon>
- <mat-error *ngIf="email.invalid">{{ getErrorMessage('lastName') }}</mat-error>
- </mat-form-field>
- </p>
- <p>
- <mat-form-field appearance="outline">
- <mat-label>Enter your email</mat-label>
- <input matInput placeholder="pat@example.com" [formControl]="email" required />
- <mat-error *ngIf="email.invalid">{{ getErrorMessage('email') }}</mat-error>
- </mat-form-field>
- </p>
- <p>
- <mat-form-field appearance="outline">
- <mat-label>Enter a password</mat-label>
- <input matInput [formControl]="password" [type]="hide ? 'password' : 'text'" />
- <button
- mat-icon-button
- matSuffix
- (click)="hide = !hide"
- [attr.aria-label]="'Hide password'"
- [attr.aria-pressed]="hide"
- >
- <mat-icon>{{ hide ? 'visibility_off' : 'visibility' }}</mat-icon>
- </button>
- <mat-hint
- >Must be minimum eight characters, at least one uppercase letter, one lowercase
- letter and one number</mat-hint
- >
- <mat-error *ngIf="password.invalid">{{ getErrorMessage('password') }}</mat-error>
- </mat-form-field>
- </p>
- <p>
- <button
- class="signup--form__submit-button"
- mat-raised-button
- color="primary"
- (click)="sendForm()"
- >
- {{ 'Sign Up' | uppercase }}
- </button>
- </p>
- </form>
- </div>
- </mat-card>
- </mat-grid-tile>
-</mat-grid-list>
-
- ./sign-up-page.component.scss
-
@import '../../../../styles/mixins';
-
-.signup--form-container {
- text-align: center;
-
- p {
- margin-bottom: 1rem;
- }
-
- .signup--form__header-title {
- margin-bottom: 2rem;
- }
-}
-
-.signup--form-container .mat-form-field + .mat-form-field {
- margin-left: 8px;
-}
-
-.mat-form-field {
- width: 100%;
-}
-
-.signup--form__box--blue {
- padding: 4rem;
-}
-
-:host ::ng-deep .mat-form-field-flex {
- background: rgb(245, 245, 245);
-}
-
-.signup--form__header-title {
- font-weight: bold;
- font-size: 20px;
- color: #000000de;
-}
-
-.signup--form__submit-button {
- margin-top: 40px;
-}
--
- src/app/shared/components/spinner/spinner.component.ts
-
| selector | -app-spinner |
-
| styleUrls | -./spinner.component.scss |
-
| templateUrl | -./spinner.component.html |
-
-constructor()
- |
-
| - - | -
import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-spinner',
- templateUrl: './spinner.component.html',
- styleUrls: ['./spinner.component.scss'],
-})
-export class SpinnerComponent {
- constructor() {}
-}
-<div class="spinner"></div>
-
- ./spinner.component.scss
-
.spinner {
- width: 40px;
- height: 40px;
- background-color: #333;
-
- border-radius: 100%;
- -webkit-animation: sk-scaleout 1s infinite ease-in-out;
- animation: sk-scaleout 1s infinite ease-in-out;
-
- transform: translate(-50%, -50%);
- position: absolute;
- left: 50%;
- top: 48%;
-}
-
-@-webkit-keyframes sk-scaleout {
- 0% {
- -webkit-transform: scale(0);
- }
- 100% {
- -webkit-transform: scale(1);
- opacity: 0;
- }
-}
-
-@keyframes sk-scaleout {
- 0% {
- -webkit-transform: scale(0);
- transform: scale(0);
- }
- 100% {
- -webkit-transform: scale(1);
- transform: scale(1);
- opacity: 0;
- }
-}
-
-| File | -Type | -Identifier | -Statements | -
|---|---|---|---|
| - - src/app/app.component.ts - | -component | -AppComponent | -- 0 % - (0/7) - | -
| - - src/app/app.component.ts - | -variable | -Modernizr | -- 0 % - (0/1) - | -
| - - src/app/configs/app.config.ts - | -variable | -APP_CONFIG | -- 0 % - (0/1) - | -
| - - src/app/configs/app.config.ts - | -variable | -AppConfig | -- 0 % - (0/1) - | -
| - - src/app/configs/endpoints.config.ts - | -variable | -ENDPOINTS_CONFIG | -- 0 % - (0/1) - | -
| - - src/app/configs/endpoints.config.ts - | -variable | -EndpointsConfig | -- 0 % - (0/1) - | -
| - - src/app/configs/routes.config.ts - | -variable | -basePaths | -- 0 % - (0/1) - | -
| - - src/app/configs/routes.config.ts - | -variable | -getHeroDetail | -- 0 % - (0/1) - | -
| - - src/app/configs/routes.config.ts - | -variable | -ROUTES_CONFIG | -- 0 % - (0/1) - | -
| - - src/app/configs/routes.config.ts - | -variable | -RoutesConfig | -- 0 % - (0/1) - | -
| - - src/app/configs/routes.config.ts - | -variable | -routesNames | -- 0 % - (0/1) - | -
| - - src/app/modules/auth/auth-routing.module.ts - | -variable | -authRoutes | -- 0 % - (0/1) - | -
| - - src/app/modules/auth/auth.guard.ts - | -guard | -AuthGuard | -- 0 % - (0/3) - | -
| - - src/app/modules/auth/auth.service.ts - | -injectable | -AuthService | -- 0 % - (0/5) - | -
| - - src/app/modules/auth/pages/log-in-page/log-in-page.component.ts - | -component | -LogInPageComponent | -- 0 % - (0/9) - | -
| - - src/app/modules/auth/pages/sign-up-page/sign-up-page.component.ts - | -component | -SignUpPageComponent | -- 0 % - (0/10) - | -
| - - src/app/modules/core/interceptors/timing.interceptor.ts - | -interceptor | -TimingInterceptor | -- 0 % - (0/3) - | -
| - - src/app/modules/core/interceptors/token.interceptor.ts - | -interceptor | -TokenInterceptor | -- 33 % - (1/3) - | -
| - - src/app/modules/core/sentry.errorhandler.ts - | -injectable | -SentryErrorHandler | -- 0 % - (0/3) - | -
| - - src/app/modules/core/services/events.servide.ts - | -injectable | -EventsService | -- 0 % - (0/4) - | -
| - - src/app/modules/core/services/events.servide.ts - | -interface | -EventType | -- 0 % - (0/5) - | -
| - - src/app/modules/core/services/logger.service.ts - | -injectable | -LoggerService | -- 0 % - (0/3) - | -
| - - src/app/modules/core/services/utils-helper.service.ts - | -injectable | -UtilsHelperService | -- 0 % - (0/3) - | -
| - - src/app/modules/core/services/utils-helper.service.ts - | -variable | -bowser | -- 0 % - (0/1) - | -
| - - src/app/modules/core/services/utils-helper.service.ts - | -variable | -require | -- 0 % - (0/1) - | -
| - - src/app/modules/hero/components/hero-remove/hero-remove.component.ts - | -component | -HeroRemoveComponent | -- 0 % - (0/2) - | -
| - - src/app/modules/hero/hero-routing.module.ts - | -variable | -heroRoutes | -- 0 % - (0/1) - | -
| - - src/app/modules/hero/pages/hero-detail-page/hero-detail-page.component.ts - | -component | -HeroDetailPageComponent | -- 0 % - (0/6) - | -
| - - src/app/modules/hero/pages/my-heroes-page/my-heroes-page.component.ts - | -component | -MyHeroesPageComponent | -- 0 % - (0/15) - | -
| - - src/app/modules/hero/shared/hero.model.ts - | -class | -Hero | -- 0 % - (0/9) - | -
| - - src/app/modules/hero/shared/hero.resolver.ts - | -guard | -HeroResolver | -- 0 % - (0/3) - | -
| - - src/app/modules/hero/shared/hero.service.ts - | -injectable | -HeroService | -- 0 % - (0/7) - | -
| - - src/app/modules/root/pages/error404-page/error404-page.component.ts - | -component | -Error404PageComponent | -- 0 % - (0/2) - | -
| - - src/app/modules/root/pages/home-page/home-page.component.ts - | -component | -HomePageComponent | -- 0 % - (0/4) - | -
| - - src/app/modules/root/root-routing.module.ts - | -variable | -routesNames | -- 0 % - (0/1) - | -
| - - src/app/modules/root/shared/footer/footer.component.ts - | -component | -FooterComponent | -- 0 % - (0/2) - | -
| - - src/app/modules/root/shared/header/header.component.ts - | -component | -HeaderComponent | -- 0 % - (0/11) - | -
| - - src/app/modules/root/shared/search-bar/search-bar.component.ts - | -component | -SearchBarComponent | -- 0 % - (0/8) - | -
| - - src/app/modules/user/shared/user.model.ts - | -class | -User | -- 0 % - (0/9) - | -
| - - src/app/modules/user/user.service.ts - | -injectable | -UserService | -- 0 % - (0/3) - | -
| - - src/app/shared/components/hero-card/hero-card.component.ts - | -component | -HeroCardComponent | -- 0 % - (0/5) - | -
| - - src/app/shared/components/hero-loading/hero-loading.component.ts - | -component | -HeroLoadingComponent | -- 0 % - (0/2) - | -
| - - src/app/shared/components/loading-placeholder/loading-placeholder.component.ts - | -component | -LoadingPlaceholderComponent | -- 0 % - (0/4) - | -
| - - src/app/shared/components/spinner/spinner.component.ts - | -component | -SpinnerComponent | -- 0 % - (0/2) - | -
| - - src/app/shared/interfaces/deserializable.interface.ts - | -interface | -Deserializable | -- 0 % - (0/2) - | -
| - - src/app/shared/modules/graphql.module.ts - | -function | -createApollo | -- 0 % - (0/1) - | -
| - - src/app/shared/pipes/capitalize-first.pipe.ts - | -pipe | -CapitalizeFirstPipe | -- 0 % - (0/1) - | -
| - - src/app/shared/services/storage.service.ts - | -injectable | -StorageService | -- 0 % - (0/5) - | -
| - - src/app/shared/services/utils.service.ts - | -injectable | -UtilsService | -- 0 % - (0/3) - | -
| - - src/environments/environment.prod.ts - | -variable | -environment | -- 0 % - (0/1) - | -
| - - src/environments/environment.ts - | -variable | -environment | -- 0 % - (0/1) - | -
| - - src/test.ts - | -variable | -context | -- 0 % - (0/1) - | -
| - - src/test.ts - | -variable | -require | -- 0 % - (0/1) - | -
-
- src/app/modules/auth/auth.guard.ts
-
- Methods- |
-
-
|
-
-constructor(authService: AuthService, router: Router)
- |
- |||||||||
|
- Defined in src/app/modules/auth/auth.guard.ts:7
- |
- |||||||||
|
-
- Parameters :
-
-
|
-
| - - - canActivate - - - | -|||||||||
-canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)
- |
- |||||||||
|
- Defined in src/app/modules/auth/auth.guard.ts:10
- |
- |||||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- Promise<boolean>
-
-
-
-
- |
-
import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
-import { AuthService } from './auth.service';
-import { RoutesConfig } from '../../configs/routes.config';
-
-@Injectable()
-export class AuthGuard implements CanActivate {
- constructor(private authService: AuthService, private router: Router) {}
-
- canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
- return new Promise(resolve => {
- if (this.authService.isLoggedIn()) {
- resolve(true);
- } else {
- this.router.navigate([RoutesConfig.routes.home]);
- resolve(false);
- }
- });
- }
-}
--
- src/app/modules/hero/shared/hero.resolver.ts
-
- Methods- |
-
-
|
-
-constructor(heroService: HeroService)
- |
- ||||||
| - - | -||||||
|
-
- Parameters :
-
-
|
-
| - - - Async - resolve - - - | -||||||
-
- resolve(route: ActivatedRouteSnapshot)
- |
- ||||||
| - - | -||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- unknown
-
-
-
-
- |
-
import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
-import { Hero } from './hero.model';
-import { Observable } from 'rxjs';
-import { HeroService } from './hero.service';
-
-@Injectable()
-export class HeroResolver implements Resolve<Observable<Hero>> {
- constructor(private heroService: HeroService) {}
-
- async resolve(route: ActivatedRouteSnapshot) {
- const id: string = route.paramMap.get('id') || '';
- return this.heroService.getHeroById(id);
- }
-}
--
- Example app with Angular 13 + Angular CLI + i18n + Graphql
-
-
- :clap::clap::tada::tada::tada::tada::clap::clap:
-
-
- Base project made with much :heart:. Contains CRUD, advanced patterns, generated library, and much more!
-
-
-
-
-
- DEMO HERE
-
npm i
-npm start
-
-
-
This project is using a real app deployed in heroku, which you can see -here. The server is using NesjJS, Prisma, -Postgres and GraphQL. Please check it out and feel free also to contribute or give me your thoughts.
-This project is using the official internationalization. You can navigate through every language If -you want to translate the messages you can use this awesome tool, -Tiny Translator.
-Have a bug or a feature request? Please first read the issue guidelines and search for existing and -closed issues. If your problem or idea is not addressed yet, -please open a new issue.
-Ismael Ramos
- -Thanks to all contributors and their support.
-If you have an idea or you want to do something, tell me or just do it! I'm always happy to hear -your feedback!
-Code and documentation copyright 2021 the authors. Code released under the -MIT License.
-Enjoy :metal:
- - - - - - - - - - - - - - - - - - - - - --
- src/app/modules/auth/auth.service.ts
-
- Methods- |
-
-
|
-
-constructor(snackBar: MatSnackBar, apollo: Apollo, utilsService: UtilsService, storageService: StorageService)
- |
- |||||||||||||||
|
- Defined in src/app/modules/auth/auth.service.ts:13
- |
- |||||||||||||||
|
-
- Parameters :
-
-
|
-
| - - - isLoggedIn - - - | -
-isLoggedIn()
- |
-
|
- Defined in src/app/modules/auth/auth.service.ts:21
- |
-
|
-
-
- Returns :
- boolean
-
- |
-
| - - - logIn - - - | -|||||||||
-logIn(email: string, password: string)
- |
- |||||||||
|
- Defined in src/app/modules/auth/auth.service.ts:62
- |
- |||||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- Observable<literal type>
-
-
-
-
- |
-
| - - - signUp - - - | -|||||||||||||||
-signUp(firstName: string, lastName: string, email: string, password: string)
- |
- |||||||||||||||
|
- Defined in src/app/modules/auth/auth.service.ts:33
- |
- |||||||||||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- Observable<literal type>
-
-
-
-
- |
-
import { Observable } from 'rxjs';
-import { Injectable } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { Apollo, gql } from 'apollo-angular';
-import { map } from 'rxjs/operators';
-import { UtilsService } from '~shared/services/utils.service';
-import jwt_decode from 'jwt-decode';
-import { StorageService } from '~shared/services/storage.service';
-
-@Injectable({
- providedIn: 'root',
-})
-export class AuthService {
- constructor(
- private snackBar: MatSnackBar,
- private apollo: Apollo,
- private utilsService: UtilsService,
- private storageService: StorageService
- ) {}
-
- isLoggedIn(): boolean {
- try {
- const token = this.storageService.getCookie('accessToken');
- if (token) {
- return !!jwt_decode(token);
- }
- return false;
- } catch (Error) {
- return false;
- }
- }
-
- signUp(
- firstName: string,
- lastName: string,
- email: string,
- password: string
- ): Observable<{ accessToken: string; refreshToken: string }> {
- return this.apollo
- .mutate({
- mutation: gql`
- mutation signUp {
- signup(data: {
- email: "${email}"
- firstname: "${firstName}"
- lastname: "${lastName}"
- password: "${password}"
- }) {
- accessToken
- refreshToken
- }
- }
- `,
- })
- .pipe(
- map((response: any) => {
- return !response.errors ? response.data.signup : response;
- })
- );
- }
-
- logIn(
- email: string,
- password: string
- ): Observable<{ accessToken: string; refreshToken: string }> {
- return this.apollo
- .mutate({
- mutation: gql`
- mutation logIn {
- login(data: {
- email: "${email}"
- password: "${password}"
- }) {
- accessToken
- refreshToken
- }
- }
- `,
- })
- .pipe(
- map((response: any) => {
- if (!response.errors) {
- const loginData = response.data.login;
- const { accessToken, refreshToken } = loginData;
- this.storageService.setCookie('accessToken', accessToken);
- this.storageService.setCookie('refreshToken', refreshToken);
- this.utilsService.showSnackBar("Nice! Let's create some heroes", 'info-snack-bar');
- return loginData;
- } else {
- return response;
- }
- })
- );
- }
-}
--
- src/app/modules/core/services/events.servide.ts
-
- Properties- |
-
-
|
-
- Methods- |
-
-
|
-
-constructor()
- |
-
| - - | -
| - - - Public - send - - - | -||||||
-
- send(opts: literal type)
- |
- ||||||
| - - | -||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- void
-
-
-
-
- |
-
| - - - Public - events$ - - - | -
- Type : EventEmitter<EventType>
-
- |
-
| - - | -
import { EventEmitter, Injectable } from '@angular/core';
-import { v1 as uuidv1 } from 'uuid';
-
-export enum EventsTypes {
- UPDATE_HEROES = 'UPDATE_HEROES',
-}
-
-export default interface EventType {
- id: string;
- date: Date;
- type: string;
- data?: any;
-}
-
-@Injectable({
- providedIn: 'root',
-})
-export class EventsService {
- public events$: EventEmitter<EventType>;
-
- constructor() {
- this.events$ = new EventEmitter();
- }
-
- public send(opts: { data?: any; type: string }): void {
- const event: EventType = {
- date: new Date(),
- id: uuidv1(),
- data: opts.data,
- type: opts.type,
- };
-
- this.events$.emit(event);
- }
-}
--
- src/app/modules/hero/shared/hero.service.ts
-
- Methods- |
-
-
|
-
-constructor(apollo: Apollo)
- |
- ||||||
| - - | -||||||
|
-
- Parameters :
-
-
|
-
| - - - createHero - - - | -||||||
-createHero(hero: Hero)
- |
- ||||||
| - - | -||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- any
-
-
-
-
- |
-
| - - - getHeroById - - - | -||||||
-getHeroById(id: string)
- |
- ||||||
| - - | -||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- Observable<Hero>
-
-
-
-
- |
-
| - - - removeHero - - - | -||||||
-removeHero(id: string)
- |
- ||||||
| - - | -||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- any
-
-
-
-
- |
-
| - - - searchHeroes - - - | -|||||
-searchHeroes(undefined: literal type)
- |
- |||||
| - - | -|||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- Observable<Hero[]>
-
-
-
-
- |
-
| - - - voteHero - - - | -||||||
-voteHero(hero: Hero)
- |
- ||||||
| - - | -||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- any
-
-
-
-
- |
-
import { Observable } from 'rxjs';
-import { Injectable } from '@angular/core';
-import { map } from 'rxjs/operators';
-import { Hero } from './hero.model';
-import { Apollo, gql } from 'apollo-angular';
-import { WatchQueryFetchPolicy } from '@apollo/client/core';
-
-@Injectable({
- providedIn: 'root',
-})
-export class HeroService {
- constructor(private apollo: Apollo) {}
-
- searchHeroes({ fetchPolicy }: { fetchPolicy: WatchQueryFetchPolicy }): Observable<Hero[]> {
- return this.apollo
- .watchQuery({
- query: gql`
- query GetFeed {
- searchHeroes(
- query: ""
- after: ""
- first: 10
- orderBy: { direction: desc, field: usersVoted }
- skip: 0
- ) {
- edges {
- cursor
- node {
- id
- realName
- alterEgo
- image
- published
- usersVoted {
- firstname
- }
- }
- }
- pageInfo {
- endCursor
- hasNextPage
- hasPreviousPage
- startCursor
- }
- totalCount
- }
- }
- `,
- fetchPolicy,
- })
- .valueChanges.pipe(
- map((result: any) => result.data.searchHeroes.edges.map((edge: any) => new Hero(edge.node)))
- );
- }
-
- getHeroById(id: string): Observable<Hero> {
- return this.apollo
- .watchQuery({
- query: gql`
- query Hero {
- hero(heroId: "${id}") {
- id
- realName
- alterEgo
- image
- published
- }
- }
- `,
- })
- .valueChanges.pipe(map((result: any) => new Hero(result.data.hero)));
- }
-
- createHero(hero: Hero) {
- return this.apollo
- .mutate({
- mutation: gql`
- mutation CreateHero {
- createHero(data: {
- realName: "${hero.realName}"
- alterEgo: "${hero.alterEgo}"
- }) {
- id
- realName
- alterEgo
- image
- published
- }
- }
- `,
- })
- .pipe(
- map((response: any) => {
- return !response.errors ? response.data.createHero : response;
- })
- );
- }
-
- voteHero(hero: Hero) {
- return this.apollo
- .mutate({
- mutation: gql`
- mutation VoteHero {
- voteHero(heroId: "${hero.id}") {
- id
- }
- }
- `,
- })
- .pipe(
- map((response: any) => {
- return !response.errors ? response.data.voteHero : response;
- })
- );
- }
-
- removeHero(id: string) {
- return this.apollo
- .mutate({
- mutation: gql`
- mutation RemoveHero {
- removeHero(heroId: "${id}") {
- id
- }
- }
- `,
- })
- .pipe(
- map((response: any) => {
- return !response.errors ? {} : response;
- })
- );
- }
-}
--
- src/app/modules/core/services/logger.service.ts
-
- Methods- |
-
| - - | -
| - - - Static - error - - - | -||||||||||||
-
- error(msg: string, obj: object)
- |
- ||||||||||||
| - - | -||||||||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- void
-
-
-
-
- |
-
| - - - Static - log - - - | -||||||
-
- log(msg: string)
- |
- ||||||
| - - | -||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- void
-
-
-
-
- |
-
import { Injectable } from '@angular/core';
-
-@Injectable({
- providedIn: 'root',
-})
-export class LoggerService {
- static log(msg: string): void {
- console.log(msg);
- }
-
- static error(msg: string, obj = {}): void {
- console.error(msg, obj);
- }
-}
--
- src/app/modules/core/sentry.errorhandler.ts
-
- Methods- |
-
-
|
-
-constructor()
- |
-
| - - | -
| - - - handleError - - - | -||||||
-handleError(error: any)
- |
- ||||||
| - - | -||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- void
-
-
-
-
- |
-
import * as Sentry from '@sentry/browser';
-import { ErrorHandler, Injectable } from '@angular/core';
-import { AppConfig } from '~app/configs/app.config';
-
-Sentry.init({
- dsn: AppConfig.sentryDSN,
-});
-
-@Injectable()
-export class SentryErrorHandler implements ErrorHandler {
- constructor() {}
-
- handleError(error: any) {
- Sentry.captureException(error.originalError || error);
- throw error;
- }
-}
--
- src/app/shared/services/storage.service.ts
-
- Methods- |
-
-
|
-
-constructor()
- |
-
|
- Defined in src/app/shared/services/storage.service.ts:7
- |
-
| - - - getCookie - - - | -||||||
-getCookie(name: string)
- |
- ||||||
| - - | -||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- string | undefined
-
-
-
-
- |
-
| - - - removeCookie - - - | -||||||
-removeCookie(name: string)
- |
- ||||||
| - - | -||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- void
-
-
-
-
- |
-
| - - - setCookie - - - | -||||||||||||
-setCookie(name: string, value: string, expires?: number)
- |
- ||||||||||||
| - - | -||||||||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- string | undefined
-
-
-
-
- |
-
import { Injectable } from '@angular/core';
-import Cookies from 'js-cookie';
-
-@Injectable({
- providedIn: 'root',
-})
-export class StorageService {
- constructor() {}
-
- getCookie(name: string): string | undefined {
- return Cookies.get(name);
- }
-
- setCookie(name: string, value: string, expires?: number): string | undefined {
- return Cookies.set(name, value, { expires: expires || 365 });
- }
-
- removeCookie(name: string): void {
- return Cookies.remove(name);
- }
-}
--
- src/app/modules/user/user.service.ts
-
- Methods- |
-
-
|
-
-constructor(apollo: Apollo)
- |
- ||||||
|
- Defined in src/app/modules/user/user.service.ts:11
- |
- ||||||
|
-
- Parameters :
-
-
|
-
| - - - getMe - - - | -|||||
-getMe(undefined: literal type)
- |
- |||||
|
- Defined in src/app/modules/user/user.service.ts:14
- |
- |||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- Observable<User>
-
-
-
-
- |
-
import { Observable } from 'rxjs';
-import { Injectable } from '@angular/core';
-import { Apollo, gql } from 'apollo-angular';
-import { map } from 'rxjs/operators';
-import { User } from './shared/user.model';
-import { WatchQueryFetchPolicy } from '@apollo/client/core';
-
-@Injectable({
- providedIn: 'root',
-})
-export class UserService {
- constructor(private apollo: Apollo) {}
-
- getMe({ fetchPolicy }: { fetchPolicy: WatchQueryFetchPolicy }): Observable<User> {
- return this.apollo
- .watchQuery({
- query: gql`
- query Me {
- me {
- id
- email
- firstname
- lastname
- heroes {
- id
- realName
- alterEgo
- }
- }
- }
- `,
- fetchPolicy,
- })
- .valueChanges.pipe(map((result: any) => new User(result.data.me)));
- }
-}
--
- src/app/modules/core/services/utils-helper.service.ts
-
- Methods- |
-
-
|
-
| - - - Static - isBrowserValid - - - | -
-
- isBrowserValid()
- |
-
| - - | -
|
-
-
- Returns :
- any
-
- |
-
| - - - Static - isPalindrome - - - | -||||||
-
- isPalindrome(str: string)
- |
- ||||||
| - - | -||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- boolean
-
-
-
-
- |
-
import { Injectable } from '@angular/core';
-
-declare const require: any;
-const bowser = require('bowser');
-
-@Injectable({
- providedIn: 'root',
-})
-export class UtilsHelperService {
- static isPalindrome(str: string) {
- const len = Math.floor(str.length / 2);
- for (let i = 0; i < len; i++) {
- if (str[i] !== str[str.length - i - 1]) {
- return false;
- }
- }
- return true;
- }
-
- static isBrowserValid() {
- const browser = bowser.getParser(window.navigator.userAgent);
- return browser.satisfies({
- windows: {
- 'internet explorer': '>10',
- },
- macos: {
- safari: '>10.1',
- },
- chrome: '>20.1.1432',
- firefox: '>31',
- opera: '>22',
- });
- }
-}
--
- src/app/shared/services/utils.service.ts
-
- Methods- |
-
-
|
-
-constructor(snackBar: MatSnackBar)
- |
- ||||||
|
- Defined in src/app/shared/services/utils.service.ts:8
- |
- ||||||
|
-
- Parameters :
-
-
|
-
| - - - showSnackBar - - - | -|||||||||
-showSnackBar(name: string, panelClass: string)
- |
- |||||||||
|
- Defined in src/app/shared/services/utils.service.ts:11
- |
- |||||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- void
-
-
-
-
- |
-
import { Injectable } from '@angular/core';
-import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
-import { AppConfig } from '~app/configs/app.config';
-
-@Injectable({
- providedIn: 'root',
-})
-export class UtilsService {
- constructor(private snackBar: MatSnackBar) {}
-
- showSnackBar(name: string, panelClass: string): void {
- const config: any = new MatSnackBarConfig();
- config.duration = panelClass === 'warning-snack-bar' ? 50000 : AppConfig.snackBarDuration;
- config.horizontalPosition = 'right';
- config.verticalPosition = 'top';
- config.panelClass = panelClass;
- this.snackBar.open(name, 'OK', config);
- }
-}
--
- src/app/modules/core/interceptors/timing.interceptor.ts
-
- Methods- |
-
-
|
-
-constructor()
- |
-
| - - | -
| - - - intercept - - - | -|||||||||
-intercept(req: HttpRequest
- |
- |||||||||
| - - | -|||||||||
|
-
-
- Parameters :
-
-
-
-
-
- Returns :
- Observable<HttpEvent<any>>
-
-
-
-
- |
-
import { tap } from 'rxjs/operators';
-import {
- HttpEvent,
- HttpHandler,
- HttpInterceptor,
- HttpRequest,
- HttpResponse,
-} from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { LoggerService } from '../services/logger.service';
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class TimingInterceptor implements HttpInterceptor {
- constructor() {}
-
- intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
- const started = Date.now();
- return next.handle(req).pipe(
- tap(event => {
- if (event instanceof HttpResponse) {
- const elapsed = Date.now() - started;
- LoggerService.log(`Request for ${req.urlWithParams} took ${elapsed} ms.`);
- }
- })
- );
- }
-}
--
- src/app/modules/core/interceptors/token.interceptor.ts
-
- Methods- |
-
-
|
-
-constructor(storageService: StorageService)
- |
- ||||||
| - - | -||||||
|
-
- Parameters :
-
-
|
-
| - - - intercept - - - | -||||||||||||
-intercept(request: HttpRequest
- |
- ||||||||||||
| - - | -||||||||||||
-
- Parameters :
-
-
-
-
-
- Returns :
- Observable<HttpEvent<any>>
-
-
-
- An Observable with the request modified - - |
-
import { Observable, throwError as observableThrowError } from 'rxjs';
-import { catchError } from 'rxjs/operators';
-import { Injectable } from '@angular/core';
-import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
-import { v4 as uuid4 } from 'uuid';
-import { StorageService } from '~shared/services/storage.service';
-
-@Injectable()
-export class TokenInterceptor implements HttpInterceptor {
- constructor(private storageService: StorageService) {}
-
- /**
- * @param request The initial request
- * @param next The http handler
- * @returns An Observable with the request modified
- */
- /**
- * @example
- * intercept(request, next)
- */
- intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
- const headers = { req_uuid: uuid4(), Authorization: '' };
-
- const token = this.storageService.getCookie('accessToken');
-
- if (token && !request.headers.get('bypassAuthorization')) {
- headers['Authorization'] = `Bearer ${token}`;
- }
-
- const newRequest = request.clone({
- setHeaders: headers,
- });
-
- return next.handle(newRequest).pipe(catchError(err => observableThrowError(err)));
- }
-}
--
- src/app/shared/interfaces/deserializable.interface.ts
-
- Methods- |
-
-
|
-
| - - - deserialize - - - | -||||||
-deserialize(input: any)
- |
- ||||||
| - - | -||||||
|
-
-
- Parameters :
-
-
-
-
- |
-
export interface Deserializable {
- deserialize(input: any): this;
-}
--
- src/app/modules/core/services/events.servide.ts
-
- Properties- |
-
| - - | -
| - - data - - - - - | -
- data:
- |
-
- Type : any
-
- |
-
| - Optional - | -
| - - date - - - - - | -
- date:
- |
-
- Type : Date
-
- |
-
| - - id - - - - - | -
- id:
- |
-
- Type : string
-
- |
-
| - - type - - - - - | -
- type:
- |
-
- Type : string
-
- |
-
import { EventEmitter, Injectable } from '@angular/core';
-import { v1 as uuidv1 } from 'uuid';
-
-export enum EventsTypes {
- UPDATE_HEROES = 'UPDATE_HEROES',
-}
-
-export default interface EventType {
- id: string;
- date: Date;
- type: string;
- data?: any;
-}
-
-@Injectable({
- providedIn: 'root',
-})
-export class EventsService {
- public events$: EventEmitter<EventType>;
-
- constructor() {
- this.events$ = new EventEmitter();
- }
-
- public send(opts: { data?: any; type: string }): void {
- const event: EventType = {
- date: new Date(),
- id: uuidv1(),
- data: opts.data,
- type: opts.type,
- };
-
- this.events$.emit(event);
- }
-}
-