primer commit

Author: DavidUntama

src/app/app.component.html

@@ -6,5 +6,6 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'bases';
+  
+  
 }

src/app/app.component.spec.ts

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

src/app/app.component.ts

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

src/app/app.module.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-contador',
+    template: `
+    <h1>David</h1>
+    <h2> {{ titulo }} </h2>
+
+    <h3>la base es <strong>{{base}}</strong> </h3>
+    <button (click)="acumular(base)" > aumentar base</button>
+    <button (click)="acumular(-base)" > disminuir base</button>
+    <p>
+    <button (click)="acumular(1)">+1</button>
+    <span> {{numero}} </span>
+    <button (click)="acumular(-1);" >-1</button>
+    `
+})
+export class ContadorComponent{
+    public titulo : string = 'contador app';
+    numero: number = 10;
+    base: number = 5;
+
+    sumar(){
+        this.numero++;
+    }
+    restar(){
+        this.numero--;
+    }
+    acumular(valor: number){
+        this.numero += valor;
+    }
+}

src/app/contador/contador.module.ts

@@ -0,0 +1,18 @@
+<h1>{{nombre}}</h1>
+<dl>
+    <td> Nombre: </td>
+    <dd> {{nombre}} </dd>
+
+    <td> Edad: </td>
+    <dd> {{edad}} </dd>
+
+    <td> Funcion: </td>
+    <dd> {{obtenerNombre()}} </dd>
+
+    <td> Capitalizado: </td>
+    <dd> {{ nombreCapitalizado }} </dd>
+</dl>
+
+<button (click)='cambiarNombre()'  >Cambiar heroe</button>
+
+<button (click)='cambiarEdad()' >Cambiar edad</button>

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

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

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

@@ -0,0 +1,18 @@
+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/heroe/heroe.component.ts

@@ -0,0 +1,22 @@
+<p>listado heroes</p>
+
+<div *ngIf="hb; else noBorrar">
+    <h3> Heroe Borrado <small> {{hb}} </small></h3>
+</div>
+<ng-template #noBorrar>
+    <h3> No ha borrado nada </h3>
+</ng-template>
+
+
+
+<button (click)="hb=borrarHeroe()" >
+    Borrar
+</button>
+
+<ul>
+    <li *ngFor="let heroe of heroes; let i=index">
+        {{i+1}} {{heroe}}
+    </li>
+</ul>
+
+