Generar un nuevo componente con Angular CLI

ng generate component persona

O de forma abreviada ng g c persona.

De forma automática crea una nueva carpeta con los ficheros necesarios para el nuevo componente y actualiza "app.module.ts":

CREATE src/app/persona/persona.component.html (26 bytes)
CREATE src/app/persona/persona.component.spec.ts (635 bytes)
CREATE src/app/persona/persona.component.ts (273 bytes)
CREATE src/app/persona/persona.component.css (0 bytes)
UPDATE src/app/app.module.ts (490 bytes)

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { PersonasComponent } from "./personas/personas.component";
import { PersonaComponent } from "./persona/persona.component";

@NgModule({
  declarations: [AppComponent, PersonasComponent, PersonaComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Podemos eliminar "persona.component.spec.ts" que se usa para pruebas o testing ya que no lo usaremos por el momento.

Ahora editamos "persona.component.ts", podemos eliminar la implementación del interfaz OnInit de la declaración de la clase PersonaComponent ya que tiene ver con el ciclo de vida de la aplicación cuando arranca e invoca la función ngOnInit.

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-persona",
  templateUrl: "./persona.component.html",
  styleUrls: ["./persona.component.css"]
})
//export class PersonaComponent implements OnInit {
export class PersonaComponent {
  constructor() {}

  /** ngOnInit() {
  } */
}

Ahora añadimos el nuevo componente en "personas.component.html"

<h2>Listado de personas</h2>
<app-persona></app-persona>

Podemos agregar más elementos o repetir el componente:

<h2>Listado de personas</h2>
<app-persona></app-persona>
<app-persona></app-persona>

Código fuente del ejemplo

Enlaces internos

Enlaces externos