Crear varios componentes en Angular 2 (@Component y @NgModule)

Publicado en Ene 28, 2017

Hoy vamos a ver como crear varios componentes en Angular 2, es muy simple.

Lo primero que vamos a hacer es crear un directorio para los componentes dentro de nuestro directorio app, esto es una preferencia personal, tu puedes tener la estructura de directorios que prefieras.

Crearé el directorio app/components y ahí meteré los componentes. Dentro de este directorio voy a crear dos componentes, por ejemplo, crearé empleados.component.ts y empresas.component.ts

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

@Component({
  selector: 'empleados',
  template: `
    <h2>Empleados</h2>
    <p>Listado de empleados</p>`
})

export class EmpleadosComponent { }

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

@Component({
  selector: 'empresas',
  template: `
    <h2>Empresas</h2>
    <p>Listado de empresas</p>
    ` 
})

export class EmpresasComponent {}

Para poder utilizar estos componentes dentro de otros y tenerlos disponibles de forma global en el proyecto tenemos que añadirlos al app.module.ts, que como sabemos nos permite centralizar la carga de componentes y configuraciones del proyecto de Angular 2. Tendremos que añadir los componentes al atributo declarations de @NgModule para poder utilizar las directivas que genera cada componente.

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

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

// IMPORTAMOS NUESTROS COMPONENTES
import { EmpresasComponent }    from './components/empresas.component';
import { EmpleadosComponent }  from './components/empleados.component';

// En declarations instanciamos las clases de los componentes en este caso
@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent,
    EmpresasComponent,
    EmpleadosComponent
  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

Una vez que tenemos modificado el app.module.ts como hemos visto ya podríamos utilizar los nuevos componentes, por ejemplo en la plantilla del app.component.ts

// Importar Component desde el núcleo de Angular
import {Component} from '@angular/core';

// Decorador component, indicamos en que etiqueta se va a cargar la plantilla
@Component({
    selector: 'my-app',
    template: `
        <h1>Aplicación Angular 2</h1>

        <!-- USAMOS LAS ETIQUETAS / SELECTORES / DIRECTIVAS DE LOS NUEVOS COMPONENTES -->
        <empresas></empresas>
        <empleados></empleados>   
    `
})

// Clase del componente donde irán los datos y funcionalidades
export class AppComponent { }

Ahora se cargarán los dos nuevos componentes en sus correspondientes etiquetas html. Con esto ya sabemos crear varios componentes en Angular 2 y usarlos de forma básica.