Primera Subida

Author: jalowin

src/app/app.component.html

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

src/app/app.component.ts

@@ -3,12 +3,18 @@ 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.module.ts

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

src/app/contador/contador.module.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-contador',
+  template: `
+    <h1>{{ title }}</h1>
+    <span>{{ numero }}</span>
+    <br>
+    <button (click)="acumular(base)">+{{base}}</button>
+    <button (click)="acumular(-base)">-{{base}}</button>
+  `
+})
+
+export class ContadorComponent {
+
+  title: string = 'Contador App';
+
+  numero: number = 10;
+
+  base: number = 5;
+
+
+  acumular( valor: number){
+    this.numero += valor;
+  }
+
+}

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

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

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

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

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

@@ -0,0 +1,22 @@
+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/heroes.module.ts

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

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

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-listado',
+  templateUrl: './listado.component.html'
+})
+export class ListadoComponent {
+
+  public heroes: string[ ]= ['Goku', 'Vegeta', 'Gohan', 'Picolo'];
+  public heroeBorrado: string = '';
+
+  borrarHeroe(){
+    this.heroeBorrado = this.heroes.shift() || '';
+  }
+
+}

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

@@ -1 +1,41 @@
 /* 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;
+}