Componentes en Angular

Un componente en angular es una combinación de:

• app.component.css: Define el estilo del componente
• app.component.html: Define la plantilla del componente
• app.component.ts: Define la funcionalidad de TypeScript del componente.
• app.module.ts: Define el módulo al que pertenece el componente.

 

Tienen la propiedad de ser reutilizables.

Para crear nuestras aplicaciones con Angular, generamos las plantillas o templates con HTML y estos los controlamos con la lógica de los archivos ts.

Crear un nuevo componente

Para crear un nuevo componente usamos el siguiente comando:

ng generate component nuevoComponente

Donde obtenemos la nueva carpeta nuevoComponente creada en la carpeta src / app.

Los siguientes archivos se crean en la carpeta del nuevoComponente:

• nuevoComponente.component.css: Hoja de estilo del componente.
• nuevoComponente.component.html: Plantilla del componente.
• nuevoComponente.component.ts: Lógica del componente.
• nuevoComponente.spec.ts: Se puede usar para hacer pruebas unitarias.
  

En el archivo nuevoComponente.component.ts anterior, crea una nueva clase llamada nuevoComponenteComponent, que implementa la interfaz OnInit , que tiene un constructor y un método llamado ngOnInit () y este se llama por defecto cuando se carga la página nuevoComponenteComponent.html.

nuevo-componente.component.css:

 

nuevo-componente.component.html:

<p>nuevo-componente works!</p>

 

app.component.html:

<app-nuevo-componente></app-nuevo-componente>

 

src/app/app/nuevo-componente.component.ts:

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

  selector: 'app-nuevo-componente',

  templateUrl: './nuevo-componente.component.html',

  styleUrls: ['./nuevo-componente.component.css']

})

export class NuevoComponenteComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }