Crear un componente en angular 2

Hola a todos, hoy os voy a enseñar a crear un componente en angular 2.

Los componentes en angular 2 son un elemento básico que nos permiten crear funcionalidad de forma modular.

Sino recordáis como crear un proyecto, lo tenéis aquí

Lo primero que haremos es que para cada componente lo guardaremos en una carpeta, esto lo haremos en la carpeta app. Yo como ejemplo lo llamare componente1.

Dentro de la carpeta que acabamos de crear, crearemos la misma estructura:

  • Un archivo HTML
  • Uno o varios archivos css
  • Un archivo TypeScript (ts)

Crearemos un archivo de cada dentro de la carpeta que hemos creado.

 

Este sera el contenido de nuestro archivo TS, suele ser ser mas o menos de esta estructura:


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

@Component({
  selector: 'componente',
  templateUrl: './componente.component.html',
  styleUrls: ['./componente.component.css']
})

export class Componente {

mensaje: string = 'Hola mundo';

}

En el @Component, podemos poner lo siguiente:

  • selector: indica la etiqueta como se llamara al componente, es nuestro caso <componente></componente>
  • templateUrl: la ruta del html del componente
  • styleUrls: ficheros con los estilos, se debe encerrar con [], por ejemplo: [‘./estilo.css’, ‘./estilo2.css’]

Hay algunos más pero estos son los más útiles por el momento.

Este sera el contenido de nuestro HTML:



<h1>{{mensaje}}</h1>


Fijaos que llamo al valor del mensaje del fichero TS con {{variable}}

Este sera nuestro CSS:

h1 {
    color: red;
}

Ahora deberemos modificar el fichero app.component.html, si quiereis usar componentes teneis que usar el selector que indicamos antes, por ejemplo:




<div>
  <componente></componente>
</div>



Por último, todo componente que hagamos debe ser importado en app.modules.ts. Así esta originalmente:


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


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


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


Y asi lo modificaremos:


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


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


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


Con todo esto, podemos irnos a la terminal y desde la ruta del proyecto, ejecutamos npm start

Tarda un poco os aviso, cada vez que hagáis cambios en el código se recopilará automáticamente

Ahora abrimos el navegador y ponemos lo siguiente:

localhost:4200

Deberíamos ver lo siguiente:

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

¿Te ha gustado y quieres apoyarme? ¡Sé mi patrón!
Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *