Crear componentes en Angular 4


Como se explicó en el primer post de Angular 4, la forma en la que se crea una aplicación es a través de componentes. En este post se explicará como crear componentes manualmente y haciendo uso de la CLI(Command line interface). Se tomará como base el post Configura Bootstrap en Angular 4.

Una vez que se tiene un proyecto construido veremos un componente llamado app.component que será utilizado para cargar el contenido al archivo index.html. A continuación veremos como crear componentes adicionales a nuestra aplicación.

Creación de componentes manualmente

A continuación crearemos un componente nuevo llamado posts siguiendo los siguientes pasos:

  • Crear un folder con el nombre del componente dentro del folder src/app/ , en este caso nuestro folder sería /src/app/posts.
  • Dentro del folder /src/app/posts crearemos los siguientes archivos:
    • posts.component.html : Contendrá el HTML que se desplegará donde se inserte el componente
    • posts.component.ts : Contendrá una clase typescript que definirá el componente.
  • Dentro del folder /src/app editaremos el archivo app.modules.ts para registrar el nuevo componente.

Paso 1 Editar el archivo app.component.html

El primer paso para este ejemplo será editar el archivo app.component.html con el siguiente código:

<div align="center">
<h1>Geeks México</h1>
<h3>Base component</h3>
<img class="img-fluid" src="https://geeksjavamexico.files.wordpress.com/2017/09/5.png?w=400" width="25%" height="25%" alt=""></div>

Con esto la aplicación se verá como se muestra en la siguiente imagen:

Captura de pantalla 2017-10-11 a las 21.13.14

Paso 2: Agregar un nuevo componente

Una vez que tenemos el componente base que es app.component, el siguiente paso es crear el componente posts. Para esto seguiremos los siguientes pasos:

1.- Crear un folder vacío en el folder /src/app/ llamado posts

2.- Crear el archivo posts.components.html dentro del folder /src/app/posts.

<div align="center">
<h3>Post List</h3>
<div>
<table  class="table">
<tr>
<th>Author Twitter</th>
<th>Post name</th>
<th>Post date</th>
</tr>
<tr>
<td>@raidentrance</td>
<td>Angular from scratch</td>
<td> 10/10/2017</td>
</tr>
</table>
</div>
</div>

3.- Crear el archivo posts.components.ts dentro del folder /src/app/posts.

import { Component } from '@angular/core'
@Component({
    selector: 'app-posts',
    templateUrl: './posts.component.html'
})
export class PostsComponent {

}

Paso 3: Incluir el nuevo componente en el archivo app.modules.ts

Una vez que ya se creó el componente el siguiente paso es registrarlo dentro del archivo app.modules.ts. Para hacerlo debemos editar el archivo como se muestra a continuación:

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

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

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

Las modificaciones que se harán al archivo app.modules.ts son las siguientes:

  1. Incluir la sentencia import para PostsComponent desde ./posts/posts.component
  2. Incluir PostsComponent en el objeto declarations

Paso 4: Incluir el nuevo componente en el componente principal

Para hacer esto lo único que debemos hacer es editar el archivo app.components.html Como se muestra a continuación:

<div align="center">
<h1>Geeks México</h1>
<h3>Base component</h3>
<img class="img-fluid" src="https://geeksjavamexico.files.wordpress.com/2017/09/5.png?w=400" width="25%" height="25%" alt=""></div>
<app-posts></app-posts>

Como se puede observar,la única modificación fue agregar al final el selector de nuestro componente llamado .

Una vez concluido lo anterior la página se verá como se muestra a continuación:
Captura de pantalla 2017-10-11 a las 21.42.39

Creando un componente utilizando la CLI

Crear un componente utilizando la línea de comandos es mucho más sencillo, solo debes ejecutar el siguiente comando:

ng generate component posts

Una vez hecho esto verás que todos los archivos necesarios fueron creados automáticamente y que lo único que resta es editar los archivos para tener todo listo. Si tienes alguna pregunta sobre como hacerlo tu mismo, agrégala a los comentarios.

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com

 

Anuncios

1 comentario »

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s