Introducción a Angular

workspace/01-Bases/src/app/app.component.html

@@ -1,3 +1,4 @@
-<!-- <app-contador></app-contador> -->
+<app-contador></app-contador>
 
-<app-heroe></app-heroe>
+<!-- <app-heroe></app-heroe> -->
+<!-- <app-listado></app-listado> -->

workspace/01-Bases/src/app/app.module.ts

@@ -2,17 +2,19 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
-import { ContadorComponent } from './contador/contador.component';
-import { HeroeComponent } from './heroes/heroe/herore.component';
+import { ContadorModule } from './contador/contador.module';
+
+import { HeoresModule } from './heroes/heroes.module';
+
 
 @NgModule({
   declarations: [
-    AppComponent,
-    ContadorComponent,
-    HeroeComponent
+    AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    HeoresModule,
+    ContadorModule
   ],
   providers: [],
   bootstrap: [AppComponent]

workspace/01-Bases/src/app/contador/contador.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ContadorComponent } from './contador/contador.component';
+
+
+
+@NgModule({
+  declarations: [
+    ContadorComponent
+  ],
+  exports: [
+    ContadorComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class ContadorModule { }

workspace/01-Bases/src/app/heroes/heroe/heroe.component.html

@@ -14,5 +14,9 @@ <h1>{{ nombre }}</h1>
     <dd>{{ nombreCapitalizado }}</dd>
 </dl>
 
-<button (click)="cambiarNombre()">Cambiar Heroe</button>
-<button>Cambiar edad</button>
+<button (click)="cambiarNombre()">
+    Cambiar Heroe
+</button>
+<button (click)="cambiarEdad()">
+    Cambiar edad
+</button>

workspace/01-Bases/src/app/heroes/heroe/herore.component.ts

@@ -19,4 +19,8 @@ export class HeroeComponent {
     cambiarNombre(): void {
         this.nombre = 'Spiderman';
     }
+
+    cambiarEdad():void{
+        this.edad = 30;
+    }
 }

workspace/01-Bases/src/app/heroes/heroes.module.ts

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

workspace/01-Bases/src/app/heroes/listado/listado.component.html

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

workspace/01-Bases/src/app/heroes/listado/listado.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-listado',
+  templateUrl: './listado.component.html'
+})
+export class ListadoComponent {
+
+  heroes: string[] = ['Spiderman', 'Iron man', 'Hulk', 'Thor', 'Capitán América'];
+  heroeBorrado: string = '';
+
+  borrarHeroe() {
+    this.heroeBorrado = this.heroes.shift() || 'No hay más héroes.';
+  }
+
+}