Skip to content

Commit 46b6ce8

Browse files
alesyt0halesyt0h
committed
Primer commit
1 parent d4620c1 commit 46b6ce8

File tree

12 files changed

+237
-550
lines changed

12 files changed

+237
-550
lines changed

‎src/app/app.component.html‎

Lines changed: 3 additions & 514 deletions
Large diffs are not rendered by default.

‎src/app/app.component.spec.ts‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎src/app/app.component.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,13 @@ import { Component } from '@angular/core';
22

33
@Component({
44
selector: 'app-root',
5-
templateUrl: './app.component.html',
6-
styleUrls: ['./app.component.css']
5+
templateUrl: 'app.component.html'
6+
// template: `
7+
// <h1>Hola de nuevo</h1>
8+
9+
// `
710
})
11+
812
export class AppComponent {
9-
title = 'bases';
13+
1014
}

‎src/app/app.module.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,17 @@ import { BrowserModule } from '@angular/platform-browser';
33

44
import { AppComponent } from './app.component';
55

6+
import { ContadorModule } from './contador/contador.module'
7+
import { HeroesModule } from './heroes/heroes.module';
8+
69
@NgModule({
710
declarations: [
8-
AppComponent
11+
AppComponent,
912
],
1013
imports: [
11-
BrowserModule
14+
BrowserModule,
15+
ContadorModule,
16+
HeroesModule
1217
],
1318
providers: [],
1419
bootstrap: [AppComponent]

‎src/app/contador/contador.module.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { NgModule } from "@angular/core";
2+
import { contadorComponent } from './contador/contador.component';
3+
4+
@NgModule ({
5+
declarations: [
6+
contadorComponent
7+
],
8+
exports: [
9+
contadorComponent
10+
]
11+
})
12+
13+
export class ContadorModule {
14+
15+
}

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-contador',
5+
template: `
6+
<h1>{{ titulo }}</h1>
7+
8+
<!-- <button (click) = " numero = numero + 1 "> + 1 </button>
9+
<span>{{ numero }}</span>
10+
<button (click) = " numero = numero - 1 "> - 1 </button> -->
11+
12+
<!-- <button (click) = "sumar()"> + 1 </button>
13+
<span>{{ numero }}</span>
14+
<button (click) = "restar()"> - 1 </button> -->
15+
16+
<h4>Acumular with integer</h4>
17+
<button (click) = "acumular(2)"> + 1 </button>
18+
<span>{{ numero }}</span>
19+
<button (click) = "acumular(-2)"> - 1 </button>
20+
21+
<h3>La base es: <strong>{{base}}</strong></h3>
22+
<h4>Acumular with propiedad de la clase</h4>
23+
<button (click) = "acumular(base)"> + {{base}}</button>
24+
<span>{{ numero }}</span>
25+
<button (click) = "acumular(-base)"> - {{base}}</button>
26+
`
27+
})
28+
29+
export class contadorComponent {
30+
titulo: string = 'Contador App';
31+
numero: number = 10;
32+
base: number = 5;
33+
34+
// sumar () {
35+
// this.numero += 1
36+
// }
37+
// restar () {
38+
// this.numero -= 1
39+
// }
40+
//
41+
//better approach
42+
acumular (valor: number) {
43+
this.numero += valor;
44+
}
45+
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<h1>{{ nombre }}</h1>
2+
3+
<dl>
4+
<td>Nombre: </td>
5+
<dd>{{ nombre }}</dd>
6+
7+
<td>Edad: </td>
8+
<dd>{{ edad }}</dd>
9+
10+
<td>Función: </td>
11+
<dd>{{ obtenerNombre() }}</dd>
12+
13+
<td>Capitalizado: </td>
14+
<!-- <dd>{{ nombre.toUpperCase() }}</dd> -->
15+
<dd>{{ nombreCapitalizado }}</dd>
16+
</dl>
17+
18+
<button (click)='cambiarNombre()'>
19+
Cambiar Héroe
20+
</button>
21+
22+
<button (click)='cambiarEdad()'>
23+
Cambiar edad
24+
</button>

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Component } from "@angular/core";
2+
3+
@Component({
4+
selector: 'app-heroe',
5+
templateUrl: 'heroe.component.html'
6+
})
7+
export class HeroeComponent {
8+
9+
nombre: string = 'Ironman';
10+
edad: number = 45;
11+
12+
get nombreCapitalizado(): string{
13+
return this.nombre.toUpperCase();
14+
}
15+
16+
obtenerNombre(): string {
17+
return `${ this.nombre } - ${ this.edad } `
18+
// return this.nombre + ' - ' + this.edad;
19+
}
20+
21+
cambiarNombre(): void {
22+
this.nombre = 'Spiderman';
23+
}
24+
25+
cambiarEdad(): void {
26+
this.edad = 30;
27+
}
28+
}

‎src/app/heroes/heroes.module.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { CommonModule } from "@angular/common";
2+
import { NgModule } from "@angular/core";
3+
import { HeroeComponent } from './heroe/heroe.component';
4+
import { ListadoComponent } from './listado/listado.component';
5+
6+
@NgModule({
7+
declarations : [
8+
HeroeComponent,
9+
ListadoComponent
10+
],
11+
exports: [
12+
ListadoComponent
13+
],
14+
imports: [
15+
CommonModule
16+
]
17+
})
18+
19+
export class HeroesModule {
20+
21+
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<p>Listado de Héroes</p>
2+
3+
<!-- <div *ngIf="heroeBorrado !== ''"> -->
4+
<!-- <div *ngIf="heroeBorrado.length"> -->
5+
<div *ngIf="heroeBorrado; else noBorrado">
6+
<h3> Héroe borrado:
7+
<small>{{ heroeBorrado }}</small>
8+
</h3>
9+
</div>
10+
11+
<ng-template #noBorrado>
12+
<h3>No ha borrado nada.</h3>
13+
</ng-template>
14+
15+
<button (click)="borrarHeroe()">
16+
Borrar Héroe
17+
</button>
18+
19+
<ul>
20+
<li *ngFor="let heroe of heroes; let i = index">
21+
{{i}} - {{heroe}}
22+
</li>
23+
</ul>
24+

0 commit comments

Comments
 (0)