├── src
    ├── assets
    │   └── .gitkeep
    ├── app
    │   ├── app.component.css
    │   ├── dbz
    │   │   ├── interfaces
    │   │   │   └── dbz.interface.ts
    │   │   ├── personajes
    │   │   │   ├── personajes.component.html
    │   │   │   └── personajes.component.ts
    │   │   ├── main-page
    │   │   │   ├── main-page.component.html
    │   │   │   └── main-page.component.ts
    │   │   ├── agregar
    │   │   │   ├── agregar.component.html
    │   │   │   └── agregar.component.ts
    │   │   ├── services
    │   │   │   └── dbz.service.ts
    │   │   └── dbz.module.ts
    │   ├── app.component.html
    │   ├── app.component.ts
    │   ├── contador
    │   │   ├── contador.module.ts
    │   │   └── contador
    │   │   │   └── contador.component.ts
    │   ├── heroes
    │   │   ├── listado
    │   │   │   ├── listado.component.ts
    │   │   │   └── listado.component.html
    │   │   ├── heroe
    │   │   │   ├── heroe.component.html
    │   │   │   └── heroe.component.ts
    │   │   └── heroes.module.ts
    │   └── app.module.ts
    ├── favicon.ico
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── index.html
    ├── main.ts
    ├── test.ts
    ├── styles.css
    └── polyfills.ts
├── e2e
    ├── src
    │   ├── app.po.ts
    │   └── app.e2e-spec.ts
    ├── tsconfig.json
    └── protractor.conf.js
├── .editorconfig
├── tsconfig.app.json
├── tsconfig.spec.json
├── .vscode
    └── launch.json
├── .browserslistrc
├── .gitignore
├── tsconfig.json
├── README.md
├── karma.conf.js
├── package.json
├── tslint.json
└── angular.json


/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Klerith/angular-basicos/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/app/dbz/interfaces/dbz.interface.ts:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | export interface Personaje {
4 |     nombre: string;
5 |     poder : number;
6 | }


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | <!-- <app-contador></app-contador> -->
4 | 
5 | <!-- <app-heroe></app-heroe> -->
6 | 
7 | <!-- <app-listado></app-listado> -->
8 | 
9 | <app-main-page></app-main-page>


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   templateUrl: 'app.component.html'
 6 | })
 7 | export class AppComponent {
 8 |   
 9 | 
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/dbz/personajes/personajes.component.html:
--------------------------------------------------------------------------------
1 | <h3>Personajes</h3>
2 | <hr>
3 | <ul>
4 |     <li *ngFor="let personaje of personajes">
5 |         {{ personaje.nombre }} - {{ personaje.poder | number }}
6 |     </li>
7 | </ul>
8 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   async navigateTo(): Promise<unknown> {
 5 |     return browser.get(browser.baseUrl);
 6 |   }
 7 | 
 8 |   async getTitleText(): Promise<string> {
 9 |     return element(by.css('app-root .content span')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app/contador/contador.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | 
 3 | import { ContadorComponent } from './contador/contador.component';
 4 | 
 5 | @NgModule({
 6 |     declarations: [
 7 |         ContadorComponent
 8 |     ],
 9 |     exports: [
10 |         ContadorComponent
11 |     ]
12 | })
13 | export class ContadorModule {}


--------------------------------------------------------------------------------
/src/app/dbz/main-page/main-page.component.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | <h1>Dragon Ball Z</h1>
 4 | <hr>
 5 | 
 6 | <div class="row">
 7 |     
 8 |     <div class="col">
 9 |         <app-personajes></app-personajes>
10 |     </div>
11 | 
12 |     <div class="col">
13 |         <app-agregar [nuevo]="nuevo"></app-agregar>
14 |     </div>
15 | 
16 | 
17 | </div>


--------------------------------------------------------------------------------
/e2e/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "../tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "../out-tsc/e2e",
 6 |     "module": "commonjs",
 7 |     "target": "es2018",
 8 |     "types": [
 9 |       "jasmine",
10 |       "node"
11 |     ]
12 |   }
13 | }
14 | 


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


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Bases de Angular</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 | </head>
10 | <body>
11 |   <app-root></app-root>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/app",
 6 |     "types": []
 7 |   },
 8 |   "files": [
 9 |     "src/main.ts",
10 |     "src/polyfills.ts"
11 |   ],
12 |   "include": [
13 |     "src/**/*.d.ts"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/spec",
 6 |     "types": [
 7 |       "jasmine"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts",
12 |     "src/polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "src/**/*.spec.ts",
16 |     "src/**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.error(err));
13 | 


--------------------------------------------------------------------------------
/src/app/heroes/listado/listado.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-listado',
 5 |   templateUrl: './listado.component.html',
 6 | })
 7 | export class ListadoComponent {
 8 | 
 9 |   heroes: string[] = ['Spiderman','Ironman','Hulk','Thor','Capitán América'];
10 |   heroeBorrado: string = '';
11 | 
12 |   borrarHeroe() {
13 |     this.heroeBorrado = this.heroes.shift() || '';
14 |   }
15 | 
16 | 
17 | }
18 | 
19 | 


--------------------------------------------------------------------------------
/src/app/dbz/main-page/main-page.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | import { Personaje } from '../interfaces/dbz.interface';
 4 | 
 5 | import { DbzService } from '../services/dbz.service';
 6 | 
 7 | 
 8 | 
 9 | 
10 | @Component({
11 |   selector: 'app-main-page',
12 |   templateUrl: './main-page.component.html'
13 | })
14 | export class MainPageComponent {
15 | 
16 |   nuevo: Personaje = {
17 |     nombre: 'Maestro Roshi',
18 |     poder: 1000
19 |   }
20 | 
21 |   constructor() {}
22 | 
23 | }
24 | 


--------------------------------------------------------------------------------
/src/app/heroes/listado/listado.component.html:
--------------------------------------------------------------------------------
 1 | <p>Listado de Héroes</p>
 2 | 
 3 | <div *ngIf="heroeBorrado; else noBorrado">
 4 |     <h3>Héroe borrado: <small>{{ heroeBorrado }}</small> </h3>
 5 | </div>
 6 | 
 7 | <ng-template #noBorrado>
 8 |     <h3>No ha borrado nada.</h3>
 9 | </ng-template>
10 | 
11 | 
12 | <button (click)="borrarHeroe()">
13 |     Borrar
14 | </button>
15 | 
16 | 
17 | <ul>
18 |     <li *ngFor="let heroe of heroes; let i = index"> 
19 |         {{ i + 1 }} - {{ heroe }}
20 |     </li>
21 | </ul>
22 | 
23 | 


--------------------------------------------------------------------------------
/src/app/heroes/heroe/heroe.component.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <h1>{{ nombre }}</h1>
 3 | 
 4 | <dl>
 5 |     <td> Nombre: </td>
 6 |     <dd> {{ nombre }} </dd>
 7 | 
 8 |     <td> Edad: </td>
 9 |     <dd> {{ edad }} </dd>
10 | 
11 |     <td> Función: </td>
12 |     <dd> {{ obtenerNombre() }} </dd>
13 | 
14 |     <td> Capitalizado: </td>
15 |     <dd> {{ nombreCapitalizado }} </dd>
16 | </dl>
17 | 
18 | <button (click)="cambiarNombre()">
19 |     Cambiar Héroe
20 | </button>
21 | 
22 | <button (click)="cambiarEdad()">
23 |     Cambiar edad
24 | </button>


--------------------------------------------------------------------------------
/src/app/heroes/heroes.module.ts:
--------------------------------------------------------------------------------
 1 | import { CommonModule } from '@angular/common';
 2 | import { NgModule } from '@angular/core';
 3 | 
 4 | import { HeroeComponent } from './heroe/heroe.component';
 5 | import { ListadoComponent } from './listado/listado.component';
 6 | 
 7 | 
 8 | @NgModule({
 9 |     declarations: [
10 |         HeroeComponent,
11 |         ListadoComponent
12 |     ],
13 |     exports: [
14 |         ListadoComponent
15 |     ],
16 |     imports: [
17 |         CommonModule
18 |     ]
19 | 
20 | })
21 | export class HeroesModule {}


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     // Use IntelliSense to learn about possible attributes.
 3 |     // Hover to view descriptions of existing attributes.
 4 |     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5 |     "version": "0.2.0",
 6 |     "configurations": [
 7 |         {
 8 |             "type": "pwa-chrome",
 9 |             "request": "launch",
10 |             "name": "Launch Chrome against localhost",
11 |             "url": "http://localhost:4200",
12 |             "webRoot": "${workspaceFolder}"
13 |         }
14 |     ]
15 | }


--------------------------------------------------------------------------------
/src/app/dbz/personajes/personajes.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, Input } from '@angular/core';
 2 | import { Personaje } from '../interfaces/dbz.interface';
 3 | 
 4 | import { DbzService } from '../services/dbz.service';
 5 | 
 6 | @Component({
 7 |   selector: 'app-personajes',
 8 |   templateUrl: './personajes.component.html'
 9 | })
10 | export class PersonajesComponent {
11 | 
12 |   // @Input() personajes: Personaje[] = [];
13 |   get personajes() {
14 |     return this.dbzService.personajes;
15 |   }
16 | 
17 |   constructor( private dbzService: DbzService ) {}
18 | 
19 | }
20 | 


--------------------------------------------------------------------------------
/src/app/dbz/agregar/agregar.component.html:
--------------------------------------------------------------------------------
 1 | <h3>Agregar <small>{{ nuevo.nombre }}</small></h3>
 2 | <hr>
 3 | 
 4 | <form (ngSubmit)="agregar()">
 5 |     <input 
 6 |         type="text" 
 7 |         placeholder="Nombre" 
 8 |         name="nombre"
 9 |         [(ngModel)]="nuevo.nombre"
10 |     />
11 |     <!-- [value]="nuevo.nombre"
12 |         (input)="cambiarNombre( $event )" -->
13 | 
14 |     <input 
15 |         type="number" 
16 |         placeholder="Poder" 
17 |         name="poder"
18 |         [(ngModel)]="nuevo.poder"
19 |     />
20 | 
21 |     <button type="submit">
22 |         Agregar
23 |     </button>
24 | 
25 | </form>


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | 
 4 | import { AppComponent } from './app.component';
 5 | 
 6 | import { HeroesModule } from './heroes/heroes.module';
 7 | import { ContadorModule } from './contador/contador.module';
 8 | import { DbzModule } from './dbz/dbz.module';
 9 | 
10 | 
11 | @NgModule({
12 |   declarations: [
13 |     AppComponent,
14 |   ],
15 |   imports: [
16 |     BrowserModule,
17 |     HeroesModule,
18 |     ContadorModule,
19 |     DbzModule
20 |   ],
21 |   providers: [],
22 |   bootstrap: [AppComponent]
23 | })
24 | export class AppModule { }
25 | 


--------------------------------------------------------------------------------
/src/app/dbz/services/dbz.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { Personaje } from '../interfaces/dbz.interface';
 3 | 
 4 | 
 5 | @Injectable()
 6 | export class DbzService {
 7 | 
 8 |     private _personajes: Personaje[] = [
 9 |         {
10 |           nombre: 'Goku',
11 |           poder: 15000
12 |         },
13 |         {
14 |           nombre: 'Vegeta',
15 |           poder: 7500
16 |         }
17 |     ];
18 | 
19 |     get personajes(): Personaje[] {
20 |         return [...this._personajes];
21 |     }
22 | 
23 |     constructor() {}
24 | 
25 |     agregarPersonaje( personaje: Personaje ) {
26 |         this._personajes.push( personaje );
27 |     }
28 | 
29 | }


--------------------------------------------------------------------------------
/src/app/heroes/heroe/heroe.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |     selector: 'app-heroe',
 5 |     templateUrl: 'heroe.component.html'
 6 | })
 7 | export class HeroeComponent{ 
 8 | 
 9 |     nombre: string = 'Ironman';
10 |     edad  : number = 45
11 | 
12 |     get nombreCapitalizado(): string {
13 |         return this.nombre.toUpperCase();
14 |     }
15 | 
16 |     obtenerNombre(): string {
17 |         return `${ this.nombre } - ${ this.edad }`;
18 |     }
19 | 
20 |     cambiarNombre():void {
21 |         this.nombre = 'Spiderman';
22 |     }
23 | 
24 |     cambiarEdad(): void {
25 |         console.log('hey...');
26 |         this.edad = 30;
27 |     }
28 | 
29 | }


--------------------------------------------------------------------------------
/src/app/contador/contador/contador.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |     selector: 'app-contador',
 5 |     template: `
 6 |             
 7 |         <h1> {{ titulo }} </h1>
 8 |         <h3>La base es: <strong> {{ base }} </strong></h3>
 9 | 
10 |         <button (click)="acumular( base )"> + {{ base }}</button>
11 | 
12 |         <span> {{ numero }} </span>
13 | 
14 |         <button (click)="acumular( -base )"> - {{ base }} </button>
15 |     
16 |     `
17 | })
18 | export class ContadorComponent {
19 | 
20 |     titulo: string = 'Contador App';
21 |     numero: number = 10;
22 |     base  : number = 5;
23 | 
24 |     acumular( valor: number ) {
25 |         this.numero += valor;
26 |     }
27 | 
28 | }


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | import { browser, logging } from 'protractor';
 3 | 
 4 | describe('workspace-project App', () => {
 5 |   let page: AppPage;
 6 | 
 7 |   beforeEach(() => {
 8 |     page = new AppPage();
 9 |   });
10 | 
11 |   it('should display welcome message', async () => {
12 |     await page.navigateTo();
13 |     expect(await page.getTitleText()).toEqual('bases app is running!');
14 |   });
15 | 
16 |   afterEach(async () => {
17 |     // Assert that there are no errors emitted from the browser
18 |     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
19 |     expect(logs).not.toContain(jasmine.objectContaining({
20 |       level: logging.Level.SEVERE,
21 |     } as logging.Entry));
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # For the full list of supported browsers by the Angular framework, please see:
 6 | # https://angular.io/guide/browser-support
 7 | 
 8 | # You can see what browsers were selected by your queries by running:
 9 | #   npx browserslist
10 | 
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
18 | 


--------------------------------------------------------------------------------
/src/app/dbz/dbz.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { CommonModule } from '@angular/common';
 3 | import { FormsModule } from '@angular/forms';
 4 | 
 5 | import { MainPageComponent } from './main-page/main-page.component';
 6 | import { PersonajesComponent } from './personajes/personajes.component';
 7 | import { AgregarComponent } from './agregar/agregar.component';
 8 | 
 9 | import { DbzService } from './services/dbz.service';
10 | 
11 | 
12 | @NgModule({
13 |   declarations: [
14 |     MainPageComponent,
15 |     PersonajesComponent,
16 |     AgregarComponent,
17 |   ],
18 |   exports: [
19 |     MainPageComponent,
20 |   ],
21 |   imports: [
22 |     CommonModule,
23 |     FormsModule
24 |   ],
25 |   providers: [
26 |     DbzService
27 |   ]
28 | })
29 | export class DbzModule { }
30 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | # Only exists if Bazel was run
 8 | /bazel-out
 9 | 
10 | # dependencies
11 | /node_modules
12 | 
13 | # profiling files
14 | chrome-profiler-events*.json
15 | speed-measure-plugin*.json
16 | 
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 | 
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 | 
34 | # misc
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 | 
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: {
11 |   context(path: string, deep?: boolean, filter?: RegExp): {
12 |     keys(): string[];
13 |     <T>(id: string): T;
14 |   };
15 | };
16 | 
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 |   BrowserDynamicTestingModule,
20 |   platformBrowserDynamicTesting()
21 | );
22 | // Then we find all the tests.
23 | const context = require.context('./', true, /\.spec\.ts$/);
24 | // And load the modules.
25 | context.keys().map(context);
26 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "compileOnSave": false,
 4 |   "compilerOptions": {
 5 |     "baseUrl": "./",
 6 |     "outDir": "./dist/out-tsc",
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "strict": true,
 9 |     "noImplicitReturns": true,
10 |     "noFallthroughCasesInSwitch": true,
11 |     "sourceMap": true,
12 |     "declaration": false,
13 |     "downlevelIteration": true,
14 |     "experimentalDecorators": true,
15 |     "moduleResolution": "node",
16 |     "importHelpers": true,
17 |     "target": "es2015",
18 |     "module": "es2020",
19 |     "lib": [
20 |       "es2018",
21 |       "dom"
22 |     ]
23 |   },
24 |   "angularCompilerOptions": {
25 |     "strictInjectionParameters": true,
26 |     "strictInputAccessModifiers": true,
27 |     "strictTemplates": true
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/app/dbz/agregar/agregar.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, EventEmitter, Input, Output } from '@angular/core';
 2 | import { Personaje } from '../interfaces/dbz.interface';
 3 | 
 4 | import { DbzService } from '../services/dbz.service';
 5 | 
 6 | @Component({
 7 |   selector: 'app-agregar',
 8 |   templateUrl: './agregar.component.html'
 9 | })
10 | export class AgregarComponent {
11 | 
12 |   @Input() nuevo: Personaje = {
13 |     nombre: '',
14 |     poder: 0
15 |   }
16 | 
17 |   constructor( private dbzService: DbzService ) {}
18 | 
19 |   // @Output() onNuevoPersonaje: EventEmitter<Personaje> = new EventEmitter();
20 | 
21 |   agregar() {
22 |     if ( this.nuevo.nombre.trim().length === 0 ) { return; }
23 |     
24 |     // this.onNuevoPersonaje.emit( this.nuevo );
25 |     this.dbzService.agregarPersonaje( this.nuevo );
26 | 
27 |     this.nuevo = {
28 |       nombre: '',
29 |       poder: 0
30 |     }
31 | 
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     font-family: Helvetica, Arial, sans-serif;
 3 |     font-weight: 200;
 4 |   }
 5 |   
 6 |   html, body {
 7 |     
 8 |     background: white;
 9 |     margin: 20px;
10 |     color: #3e4144;
11 |     -webkit-font-smoothing: antialiased;
12 |   }
13 |   
14 |   
15 |   dd {
16 |     font-weight: bold;
17 |   }
18 |   
19 |   button {
20 |     background-color: black;
21 |     border-radius: 5px;
22 |     border: 0px;
23 |     color: white;
24 |     cursor: pointer;
25 |     margin-right: 5px;
26 |     margin-left: 5px;
27 |     padding: 5px 10px;
28 |   }
29 |   
30 |   button:hover {
31 |     background-color: #3e4144;
32 |   }
33 |   
34 |   button:focus{ 
35 |     outline: none;
36 |   }
37 |   
38 |   .p-1 {
39 |     padding: 1px;
40 |   }
41 | 
42 | .row {
43 |   display: flex;
44 | }
45 | 
46 | .col {
47 |   flex-grow: 1;
48 |   margin-right: 10px;
49 | }
50 | 
51 | input {
52 |   display: block;
53 |   margin: 5px
54 | }


--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | // Protractor configuration file, see link for more information
 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 4 | 
 5 | const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
 6 | 
 7 | /**
 8 |  * @type { import("protractor").Config }
 9 |  */
10 | exports.config = {
11 |   allScriptsTimeout: 11000,
12 |   specs: [
13 |     './src/**/*.e2e-spec.ts'
14 |   ],
15 |   capabilities: {
16 |     browserName: 'chrome'
17 |   },
18 |   directConnect: true,
19 |   SELENIUM_PROMISE_MANAGER: false,
20 |   baseUrl: 'http://localhost:4200/',
21 |   framework: 'jasmine',
22 |   jasmineNodeOpts: {
23 |     showColors: true,
24 |     defaultTimeoutInterval: 30000,
25 |     print: function() {}
26 |   },
27 |   onPrepare() {
28 |     require('ts-node').register({
29 |       project: require('path').join(__dirname, './tsconfig.json')
30 |     });
31 |     jasmine.getEnv().addReporter(new SpecReporter({
32 |       spec: {
33 |         displayStacktrace: StacktraceOption.PRETTY
34 |       }
35 |     }));
36 |   }
37 | };


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Bases
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.2.
 4 | 
 5 | ## Development server
 6 | 
 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 8 | 
 9 | ## Code scaffolding
10 | 
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 | 
13 | ## Build
14 | 
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
16 | 
17 | ## Running unit tests
18 | 
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 | 
21 | ## Running end-to-end tests
22 | 
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 | 
25 | ## Further help
26 | 
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
28 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     jasmineHtmlReporter: {
19 |       suppressAll: true // removes the duplicated traces
20 |     },
21 |     coverageReporter: {
22 |       dir: require('path').join(__dirname, './coverage/bases'),
23 |       subdir: '.',
24 |       reporters: [
25 |         { type: 'html' },
26 |         { type: 'text-summary' }
27 |       ]
28 |     },
29 |     reporters: ['progress', 'kjhtml'],
30 |     port: 9876,
31 |     colors: true,
32 |     logLevel: config.LOG_INFO,
33 |     autoWatch: true,
34 |     browsers: ['Chrome'],
35 |     singleRun: false,
36 |     restartOnFileChange: true
37 |   });
38 | };
39 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bases",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "test": "ng test",
 9 |     "lint": "ng lint",
10 |     "e2e": "ng e2e"
11 |   },
12 |   "private": true,
13 |   "dependencies": {
14 |     "@angular/animations": "~11.0.1",
15 |     "@angular/common": "~11.0.1",
16 |     "@angular/compiler": "~11.0.1",
17 |     "@angular/core": "~11.0.1",
18 |     "@angular/forms": "~11.0.1",
19 |     "@angular/platform-browser": "~11.0.1",
20 |     "@angular/platform-browser-dynamic": "~11.0.1",
21 |     "@angular/router": "~11.0.1",
22 |     "rxjs": "~6.6.0",
23 |     "tslib": "^2.0.0",
24 |     "zone.js": "~0.10.2"
25 |   },
26 |   "devDependencies": {
27 |     "@angular-devkit/build-angular": "~0.1100.2",
28 |     "@angular/cli": "~11.0.2",
29 |     "@angular/compiler-cli": "~11.0.1",
30 |     "@types/jasmine": "~3.6.0",
31 |     "@types/node": "^12.11.1",
32 |     "codelyzer": "^6.0.0",
33 |     "jasmine-core": "~3.6.0",
34 |     "jasmine-spec-reporter": "~5.0.0",
35 |     "karma": "~5.1.0",
36 |     "karma-chrome-launcher": "~3.1.0",
37 |     "karma-coverage": "~2.0.3",
38 |     "karma-jasmine": "~4.0.0",
39 |     "karma-jasmine-html-reporter": "^1.5.0",
40 |     "protractor": "~7.0.0",
41 |     "ts-node": "~8.3.0",
42 |     "tslint": "~6.1.0",
43 |     "typescript": "~4.0.2"
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
23 | 
24 | /**
25 |  * Web Animations `@angular/platform-browser/animations`
26 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 |  */
29 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
30 | 
31 | /**
32 |  * By default, zone.js will patch all possible macroTask and DomEvents
33 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
34 |  * because those flags need to be set before `zone.js` being loaded, and webpack
35 |  * will put import in the top of bundle, so user need to create a separate file
36 |  * in this directory (for example: zone-flags.ts), and put the following flags
37 |  * into that file, and then add the following code before importing zone.js.
38 |  * import './zone-flags';
39 |  *
40 |  * The flags allowed in zone-flags.ts are listed here.
41 |  *
42 |  * The following flags will work for all browsers.
43 |  *
44 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 |  *
48 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
50 |  *
51 |  *  (window as any).__Zone_enable_cross_context_check = true;
52 |  *
53 |  */
54 | 
55 | /***************************************************************************************************
56 |  * Zone JS is required by default for Angular itself.
57 |  */
58 | import 'zone.js/dist/zone';  // Included with Angular CLI.
59 | 
60 | 
61 | /***************************************************************************************************
62 |  * APPLICATION IMPORTS
63 |  */
64 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "extends": "tslint:recommended",
  3 |   "rulesDirectory": [
  4 |     "codelyzer"
  5 |   ],
  6 |   "rules": {
  7 |     "align": {
  8 |       "options": [
  9 |         "parameters",
 10 |         "statements"
 11 |       ]
 12 |     },
 13 |     "array-type": false,
 14 |     "arrow-return-shorthand": true,
 15 |     "curly": true,
 16 |     "deprecation": {
 17 |       "severity": "warning"
 18 |     },
 19 |     "eofline": true,
 20 |     "import-blacklist": [
 21 |       true,
 22 |       "rxjs/Rx"
 23 |     ],
 24 |     "import-spacing": true,
 25 |     "indent": {
 26 |       "options": [
 27 |         "spaces"
 28 |       ]
 29 |     },
 30 |     "max-classes-per-file": false,
 31 |     "max-line-length": [
 32 |       true,
 33 |       140
 34 |     ],
 35 |     "member-ordering": [
 36 |       true,
 37 |       {
 38 |         "order": [
 39 |           "static-field",
 40 |           "instance-field",
 41 |           "static-method",
 42 |           "instance-method"
 43 |         ]
 44 |       }
 45 |     ],
 46 |     "no-console": [
 47 |       true,
 48 |       "debug",
 49 |       "info",
 50 |       "time",
 51 |       "timeEnd",
 52 |       "trace"
 53 |     ],
 54 |     "no-empty": false,
 55 |     "no-inferrable-types": [
 56 |       true,
 57 |       "ignore-params"
 58 |     ],
 59 |     "no-non-null-assertion": true,
 60 |     "no-redundant-jsdoc": true,
 61 |     "no-switch-case-fall-through": true,
 62 |     "no-var-requires": false,
 63 |     "object-literal-key-quotes": [
 64 |       true,
 65 |       "as-needed"
 66 |     ],
 67 |     "quotemark": [
 68 |       true,
 69 |       "single"
 70 |     ],
 71 |     "semicolon": {
 72 |       "options": [
 73 |         "always"
 74 |       ]
 75 |     },
 76 |     "space-before-function-paren": {
 77 |       "options": {
 78 |         "anonymous": "never",
 79 |         "asyncArrow": "always",
 80 |         "constructor": "never",
 81 |         "method": "never",
 82 |         "named": "never"
 83 |       }
 84 |     },
 85 |     "typedef": [
 86 |       true,
 87 |       "call-signature"
 88 |     ],
 89 |     "typedef-whitespace": {
 90 |       "options": [
 91 |         {
 92 |           "call-signature": "nospace",
 93 |           "index-signature": "nospace",
 94 |           "parameter": "nospace",
 95 |           "property-declaration": "nospace",
 96 |           "variable-declaration": "nospace"
 97 |         },
 98 |         {
 99 |           "call-signature": "onespace",
100 |           "index-signature": "onespace",
101 |           "parameter": "onespace",
102 |           "property-declaration": "onespace",
103 |           "variable-declaration": "onespace"
104 |         }
105 |       ]
106 |     },
107 |     "variable-name": {
108 |       "options": [
109 |         "ban-keywords",
110 |         "check-format",
111 |         "allow-pascal-case"
112 |       ]
113 |     },
114 |     "whitespace": {
115 |       "options": [
116 |         "check-branch",
117 |         "check-decl",
118 |         "check-operator",
119 |         "check-separator",
120 |         "check-type",
121 |         "check-typecast"
122 |       ]
123 |     },
124 |     "component-class-suffix": true,
125 |     "contextual-lifecycle": true,
126 |     "directive-class-suffix": true,
127 |     "no-conflicting-lifecycle": true,
128 |     "no-host-metadata-property": true,
129 |     "no-input-rename": true,
130 |     "no-inputs-metadata-property": true,
131 |     "no-output-native": true,
132 |     "no-output-on-prefix": true,
133 |     "no-output-rename": true,
134 |     "no-outputs-metadata-property": true,
135 |     "template-banana-in-box": true,
136 |     "template-no-negated-async": true,
137 |     "use-lifecycle-interface": true,
138 |     "use-pipe-transform-interface": true,
139 |     "directive-selector": [
140 |       true,
141 |       "attribute",
142 |       "app",
143 |       "camelCase"
144 |     ],
145 |     "component-selector": [
146 |       true,
147 |       "element",
148 |       "app",
149 |       "kebab-case"
150 |     ]
151 |   }
152 | }
153 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "bases": {
  7 |       "projectType": "application",
  8 |       "schematics": {
  9 |         "@schematics/angular:application": {
 10 |           "strict": true
 11 |         }
 12 |       },
 13 |       "root": "",
 14 |       "sourceRoot": "src",
 15 |       "prefix": "app",
 16 |       "architect": {
 17 |         "build": {
 18 |           "builder": "@angular-devkit/build-angular:browser",
 19 |           "options": {
 20 |             "outputPath": "dist/bases",
 21 |             "index": "src/index.html",
 22 |             "main": "src/main.ts",
 23 |             "polyfills": "src/polyfills.ts",
 24 |             "tsConfig": "tsconfig.app.json",
 25 |             "aot": true,
 26 |             "assets": [
 27 |               "src/favicon.ico",
 28 |               "src/assets"
 29 |             ],
 30 |             "styles": [
 31 |               "src/styles.css"
 32 |             ],
 33 |             "scripts": []
 34 |           },
 35 |           "configurations": {
 36 |             "production": {
 37 |               "fileReplacements": [
 38 |                 {
 39 |                   "replace": "src/environments/environment.ts",
 40 |                   "with": "src/environments/environment.prod.ts"
 41 |                 }
 42 |               ],
 43 |               "optimization": true,
 44 |               "outputHashing": "all",
 45 |               "sourceMap": false,
 46 |               "namedChunks": false,
 47 |               "extractLicenses": true,
 48 |               "vendorChunk": false,
 49 |               "buildOptimizer": true,
 50 |               "budgets": [
 51 |                 {
 52 |                   "type": "initial",
 53 |                   "maximumWarning": "500kb",
 54 |                   "maximumError": "1mb"
 55 |                 },
 56 |                 {
 57 |                   "type": "anyComponentStyle",
 58 |                   "maximumWarning": "2kb",
 59 |                   "maximumError": "4kb"
 60 |                 }
 61 |               ]
 62 |             }
 63 |           }
 64 |         },
 65 |         "serve": {
 66 |           "builder": "@angular-devkit/build-angular:dev-server",
 67 |           "options": {
 68 |             "browserTarget": "bases:build"
 69 |           },
 70 |           "configurations": {
 71 |             "production": {
 72 |               "browserTarget": "bases:build:production"
 73 |             }
 74 |           }
 75 |         },
 76 |         "extract-i18n": {
 77 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 78 |           "options": {
 79 |             "browserTarget": "bases:build"
 80 |           }
 81 |         },
 82 |         "test": {
 83 |           "builder": "@angular-devkit/build-angular:karma",
 84 |           "options": {
 85 |             "main": "src/test.ts",
 86 |             "polyfills": "src/polyfills.ts",
 87 |             "tsConfig": "tsconfig.spec.json",
 88 |             "karmaConfig": "karma.conf.js",
 89 |             "assets": [
 90 |               "src/favicon.ico",
 91 |               "src/assets"
 92 |             ],
 93 |             "styles": [
 94 |               "src/styles.css"
 95 |             ],
 96 |             "scripts": []
 97 |           }
 98 |         },
 99 |         "lint": {
100 |           "builder": "@angular-devkit/build-angular:tslint",
101 |           "options": {
102 |             "tsConfig": [
103 |               "tsconfig.app.json",
104 |               "tsconfig.spec.json",
105 |               "e2e/tsconfig.json"
106 |             ],
107 |             "exclude": [
108 |               "**/node_modules/**"
109 |             ]
110 |           }
111 |         },
112 |         "e2e": {
113 |           "builder": "@angular-devkit/build-angular:protractor",
114 |           "options": {
115 |             "protractorConfig": "e2e/protractor.conf.js",
116 |             "devServerTarget": "bases:serve"
117 |           },
118 |           "configurations": {
119 |             "production": {
120 |               "devServerTarget": "bases:serve:production"
121 |             }
122 |           }
123 |         }
124 |       }
125 |     }
126 |   },
127 |   "defaultProject": "bases"
128 | }
129 | 


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