Basicos de Angular

src/app/app.component.ts

@@ -1,10 +1,13 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  selector:'app-root',
+  templateUrl:'app.component.html'
+  //template: "<span>Javier</span>"
+
 })
 export class AppComponent {
-  title = 'bases';
+
+
+
 }

src/app/app.module.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
+    AppComponent,
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    HeroesModule,
+    ContadorModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/contador/contador.module.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+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,24 @@
+import {Component} from '@angular/core'
+
+@Component({
+selector: 'app-contador',
+template: `   
+        <h1>Hola Mundo {{titulo}}</h1>
+        <h3>La base es: <strong>{{base}}</strong></h3>
+
+        <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;
+
+    acumular (valor: number ){
+      this.numero += valor; 
+    }
+}

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

@@ -0,0 +1,20 @@
+<h1>{{nombre}}</h1>
+
+<dl>
+    <td>Nombre: </td>
+    <dd>{{nombre}}</dd>
+
+    <td>Edad: </td>
+    <dd>{{edad}}</dd>
+
+    <td>Función: </td>
+    <dd>{{obtenerNombre()}}</dd>
+
+    <td>En mayusculas: </td>
+    <dd>{{nombreMayusculas}}</dd>
+
+</dl>
+
+<button (click)="cambiarNombre()">Cambiar Heroe</button>
+
+<button (click)=cambiarEdad()>Cambiar Edad</button>

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

@@ -0,0 +1,30 @@
+
+import { Component } from "@angular/core";
+
+@Component( {
+    selector: 'app-heroe',
+    templateUrl: 'heroe.component.html'
+})
+export class HeroeComponent{
+    nombre: string ='Ironman';
+    edad: number = 54;
+
+    get nombreMayusculas(): 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/heroes.module.ts

@@ -0,0 +1,19 @@
+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,21 @@
+<h1>listado de Heroes !</h1>
+
+<div *ngIf="heroeBorrado; else noBorrado">
+    <h3>Heroe Borrado <small>{{heroeBorrado}}</small></h3>
+</div>
+
+<ng-template #noBorrado>
+    <h3>No ha borrado nada</h3>
+</ng-template>
+
+
+<button (click)="borrarHeroe()">
+    Borrar
+</button>
+
+<ul>
+    <li *ngFor="let heroe of heroes; let i = index">
+        {{i+1}} {{heroe}}
+    </li>
+</ul>
+

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

@@ -0,0 +1,20 @@
+import { Component} from '@angular/core';
+
+
+@Component({
+  selector: 'app-listado',
+  templateUrl: './listado.component.html',
+})
+export class ListadoComponent {
+
+  heroes : string [] = ['Spiderman', 'Sperman' , 'hulky', 'PepePerez', 'juan'];
+  heroeBorrado:string  ='';
+
+  borrarHeroe(){
+    console.log('borrando...');
+    this.heroeBorrado = this.heroes.shift() || '';
+
+  }
+
+
+}

src/styles.css

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