Name: Development & System
Telephone: +

Los componentes en angular representan cada uno de los bloques básicos de construcción en una aplicación Angular. Gráficamente se pueden definir como cada una de las partes que confirman la aplicación.

Según la documentación oficial «los componentes son el bloque de construcción más básico de un UI en una aplicación Angular. Una aplicación Angular es un árbol de componentes Angular. Los componentes Angular son un sub-conjunto de directivas. A diferencia de las directivas, los componentes siempre tienen una plantilla y solo un componente puede ser instanciado por un elemento en una plantilla.»

Por defecto un componente está formado por:

Una clase typescript que tiene el decorador @Component, donde se definen:
- selector: elemento que será nombrado en el html donde sea utilizado
- templateUrl: elemento html que representa la parte gráfica del elemento. Opcionalmente se puede definir código html englobado entre los caracteres «, siempre y cuando no tenga un número elevado de caracteres.
- styleUrls: elemento css que representa la parte de estios del elemento. Del mismo modo que en la templateUrl, se puede utilizar los caracteres « para definirlo en el propio archivo

Según el ejemplo creado en el post anterior, inicialmente se crea un archivo llamado índex.html con el siguiente contenido:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"></meta>
  <title>PrimerProyecto</title>
  <base href="/"></base>
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1"
  ></meta>

  <link
    rel="icon"
    type="image/x-icon"
    href="favicon.ico"
  ></link>
</head>

<body>
  <app-root></app-root>
</body>
</html>

Se trata de un archivo con etiquetas html donde en la parte del body aparece una etiqueta no html llamada <app-root>. Esta etiqueta hace referencia al componente creado por defecto app.component.ts con el siguiente contenido:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'primerProyecto';
}

En este fichero se declara la clase y el decorador que lo marca como componente, con las propiedades comentadas anteriormente. El selector indica el nombre que se utilizará en el html del index.hmtl, el templateUrl y styleUrls hacen referencia a los archivos html y css que representará el componente. El archivo app.component.html tiene el siguiente contenido:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

Para que este componente pueda ser utilizado debe estar declarado en el app.module.ts, que representa la unión de todos los componentes que pueden ser utilizados. El contenido del fichero de módulos es:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

Para poder utilizar el componente deberá estar importado y situado en las declarations.

Nuevo componente

Se puede realizar manualmente creando la estructura de ficheros nombra anteriormente o mediante el comando: ng g c ruta/nombre

ng g c componentes/componenteNuevo

Una vez creado el componente se puede comprobar que toda la estructura se ha creado correctamente, incluso se ha añadido el componente en el fichero app.module.ts. En el fichero creado del componente aparecerá el siguiente contenido:

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

@Component({
  selector: 'app-componente-nuevo',
  templateUrl: './componente-nuevo.component.html',
  styleUrls: ['./componente-nuevo.component.css']
})
export class ComponenteNuevoComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Esto quiere decir que para poder utilizar este contenido se tiene que utilizar la etiqueta <app-componente-nuevo>. Para ello se modifica el archivo del app.componente.html con el siguiente contenido:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>
<app-componente-nuevo></app-componente-nuevo>

Componentes Angular

Nuevo componente