Primer commit

src/app/app.component.ts

@@ -2,9 +2,13 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  templateUrl: 'app.component.html'
+  // template: `
+  //   <h1>Hola de nuevo</h1>
+
+  // `
 })
+
 export class AppComponent {
-  title = 'bases';
+
 }

src/app/app.module.ts

@@ -3,12 +3,17 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
 
+import { ContadorModule } from './contador/contador.module'
+import { HeroesModule } from './heroes/heroes.module';
+
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    ContadorModule,
+    HeroesModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/contador/contador.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from "@angular/core";
+import { contadorComponent } from './contador/contador.component';
+
+@NgModule ({
+    declarations: [
+        contadorComponent
+    ],
+    exports: [
+        contadorComponent
+    ]
+})
+
+export class ContadorModule {
+
+}

src/app/contador/contador/contador.component.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-contador',
+    template: `
+        <h1>{{ titulo }}</h1>
+
+        <!-- <button (click) = " numero = numero + 1 "> + 1 </button>
+        <span>{{ numero }}</span>
+        <button (click) = " numero = numero - 1 "> - 1 </button> -->
+
+        <!-- <button (click) = "sumar()"> + 1 </button>
+        <span>{{ numero }}</span>
+        <button (click) = "restar()"> - 1 </button> -->
+
+        <h4>Acumular with integer</h4>
+        <button (click) = "acumular(2)"> + 1 </button>
+        <span>{{ numero }}</span>
+        <button (click) = "acumular(-2)"> - 1 </button>
+
+        <h3>La base es: <strong>{{base}}</strong></h3>
+        <h4>Acumular with propiedad de la clase</h4>
+        <button (click) = "acumular(base)"> + {{base}}</button>
+        <span>{{ numero }}</span>
+        <button (click) = "acumular(-base)"> - {{base}}</button>
+    `
+})
+
+export class contadorComponent {
+    titulo: string = 'Contador App';
+    numero: number = 10;
+    base: number = 5;
+
+    // sumar () {
+    //   this.numero += 1
+    // }
+    // restar () {
+    //   this.numero -= 1
+    // }
+    //
+    //better approach
+    acumular (valor: number) {
+      this.numero += valor;
+    }
+}

src/app/heroes/heroe/heroe.component.html

@@ -0,0 +1,24 @@
+<h1>{{ nombre }}</h1>
+
+<dl>
+    <td>Nombre: </td>
+    <dd>{{ nombre }}</dd>
+
+    <td>Edad: </td>
+    <dd>{{ edad }}</dd>
+
+    <td>Función: </td>
+    <dd>{{ obtenerNombre() }}</dd>
+
+    <td>Capitalizado: </td>
+    <!-- <dd>{{ nombre.toUpperCase() }}</dd> -->
+    <dd>{{ nombreCapitalizado }}</dd>
+</dl>
+
+<button (click)='cambiarNombre()'>
+    Cambiar Héroe
+</button>
+
+<button (click)='cambiarEdad()'>
+        Cambiar edad
+</button>

src/app/heroes/heroe/heroe.component.ts

@@ -0,0 +1,28 @@
+import { Component } from "@angular/core";
+
+@Component({
+    selector: 'app-heroe',
+    templateUrl: 'heroe.component.html'
+})
+export class HeroeComponent {
+
+    nombre: string = 'Ironman';
+    edad:   number = 45;
+
+    get nombreCapitalizado(): string{
+        return this.nombre.toUpperCase();
+    }
+
+    obtenerNombre(): string {
+        return `${ this.nombre } - ${ this.edad } ` 
+        // return this.nombre + ' - ' + this.edad;
+    }
+
+    cambiarNombre(): void {
+        this.nombre = 'Spiderman';
+    }
+
+    cambiarEdad(): void {
+        this.edad = 30;
+    }
+}

src/app/heroes/heroes.module.ts

@@ -0,0 +1,21 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { HeroeComponent } from './heroe/heroe.component';
+import { ListadoComponent } from './listado/listado.component';
+
+@NgModule({
+    declarations : [
+        HeroeComponent,
+        ListadoComponent
+    ],
+    exports: [
+        ListadoComponent
+    ],
+    imports: [
+        CommonModule
+    ]
+})
+
+export class HeroesModule {
+
+}

src/app/heroes/listado/listado.component.html

@@ -0,0 +1,24 @@
+<p>Listado de Héroes</p>
+
+<!-- <div *ngIf="heroeBorrado !== ''"> -->
+<!-- <div *ngIf="heroeBorrado.length"> -->
+<div *ngIf="heroeBorrado; else noBorrado">
+    <h3> Héroe borrado: 
+        <small>{{ heroeBorrado }}</small>
+    </h3>
+</div>
+
+<ng-template #noBorrado>
+        <h3>No ha borrado nada.</h3>
+</ng-template>
+
+<button (click)="borrarHeroe()">
+    Borrar Héroe
+</button>
+
+<ul>
+    <li *ngFor="let heroe of heroes; let i = index">
+        {{i}} - {{heroe}}
+    </li>
+</ul>
+

src/app/heroes/listado/listado.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-listado',
+  templateUrl: './listado.component.html'
+})
+
+export class ListadoComponent {
+
+  heroes: string[] = ['Spiderman','Ironman','Hulk','Thor','Capitán América']
+  heroeBorrado: string = '';
+
+
+  borrarHeroe() {
+    // this.heroes.shift()  //removes the first element in the array
+    // const heroeBorrado: string = this.heroes.pop() //removes the last  element in the array
+    //this.heroes.splice(2,1) //removes specified element or elements in the array
+
+    // this.heroeBorrado = heroeBorrado || ''; // || '' para evitar el error, si no es string || esta vacio '' 
+    this.heroeBorrado = this.heroes.shift() || ''
+  }
+}

src/styles.css

@@ -1 +1,42 @@
 /* You can add global styles to this file, and also import other style files */
+
+* {
+    font-family: Helvetica, Arial, sans-serif;
+    font-weight: 200;
+  }
+
+  html, body {
+
+    background: white;
+    margin: 20px;
+    color: #3e4144;
+    -webkit-font-smoothing: antialiased;
+  }
+
+
+  dd {
+    font-weight: bold;
+  }
+
+  button {
+    background-color: black;
+    border-radius: 5px;
+    border: 0px;
+    color: white;
+    cursor: pointer;
+    margin-right: 5px;
+    margin-left: 5px;
+    padding: 5px 10px;
+  }
+
+  button:hover {
+    background-color: #3e4144;
+  }
+
+  button:focus{ 
+    outline: none;
+  }
+
+  .p-1 {
+    padding: 1px;
+  }