59.Crear componentes hijos

verdizone · Feb 23, 2021 · 4910e24 · 4910e24
1 parent a123c77
commit 4910e24
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git a/src/app/dbz/dbz.module.ts b/src/app/dbz/dbz.module.ts
@@ -3,10 +3,11 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
 import { MainPageComponent } from './main-page/main-page.component';
+import { PersonajesComponent } from './personajes/personajes.component';
 
 
 @NgModule({
-  declarations: [MainPageComponent],
+  declarations: [MainPageComponent, PersonajesComponent],
   exports:[
     MainPageComponent
   ],

diff --git a/src/app/dbz/main-page/main-page.component.html b/src/app/dbz/main-page/main-page.component.html
@@ -4,14 +4,11 @@ <h1>Dragon Ball Z</h1>
   <hr>
 
   <div class="row">
-    <div class="col">
-      <h3>Personajes</h3>
-      <hr>
-      <ul *ngFor="let personaje of personajes">
 
-        <li>{{ personaje.nombre }} - {{personaje.poder|number}}</li>
-      </ul>
+    <div class="col">
+      <app-personajes></app-personajes>
     </div>
+
     <div class="col">
       <h3>Agregar</h3>
       <hr>

diff --git a/src/app/dbz/personajes/personajes.component.html b/src/app/dbz/personajes/personajes.component.html
@@ -0,0 +1,5 @@
+<h3>Personajes</h3>
+<hr>
+<ul *ngFor="let personaje of personajes">
+  <li>{{ personaje.nombre }} - {{personaje.poder|number}}</li>
+</ul>
diff --git a/src/app/dbz/personajes/personajes.component.ts b/src/app/dbz/personajes/personajes.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-personajes',
+  templateUrl: './personajes.component.html'
+})
+export class PersonajesComponent {
+
+
+
+  personajes:any[] = [];
+
+
+
+}