Unidad 4 / Escenario 8

Lectura Fundamental

Framework Angular - Parte 2

Contenido

1 Componentes 1

2 Modulos y Componentes 3

3 Entrada y Salida 4

4 Ciclo de vida de los componentes 6

Palabras Claves: angular, javascript, programación front-end, aplicaciones front-end, programación web.
 1. Componentes

Para definir un componente Angular utilizamos el decorador TypeScript Component. Este decorador permite anotar
una clase con metadatos que le indican a Angular como funciona un componente.

La configuración de un componente se define en un archivo de código fuente en TypeScript como el siguiente:

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

2

3 @Component({
4 selector: 'app-problem',
5 templateUrl: './problem.component.html',
6 styleUrls: ['./problem.component.css']
7 })
8 export class ProblemComponent implements OnInit {
9

10 constructor() { }
11

12 ngOnInit() { /* omitted by clarity */ }

13 }

En este archivo son puestos los metadatos, selector, templateUrl y styleUrls, a través del decorador Component
antes de la firma de la clase ProblemComponent. Note que esta forma de definición de clases es propia del lenguaje
TypeScript.

Entre los metadatos de un componente básico se encuentran el selector, la plantilla y los estilos.

1.1. Selector

El atributo selector permite indicar el sitio en que el componente debe ser ubicado dentro de una plantilla
(HTML).

Por defecto, cuando se crea en componente utilizando la herramienta Angular CLI, esta asigna por defec-
to un valor al atributo selector. Por ejemplo en el caso de un componente creado a través del comando
ng generate component app/problem, la herramienta asigna el valor del atributo selector con base en el nombre
del componente iniciando con la cadena app seguida del sı́mbolo guion y este a su vez seguido del nombre de
componente. Para este caso el valor del selector serı́a app-problem.

Dado que el valor de este atributo es interpretado como un selector CSS, es posible modificarlo para que corresponda
con el elemento deseado. Por ejemplo, como se pudo observar anteriormente, el selector app-problem establece que
todo elemento con la etiqueta <app-problem></app-problem> será reemplazado por el contenido HTML generado

POLITÉCNICO GRANCOLOMBIANO 1
 para el componente.

Un selector, como .app-problem, corresponderá con los elementos cuyo atributo class tenga el valor app-problem,
por ejemplo <div class="app-problem"></div>. Por otra parte el selector [app-problem] corresponderá con
todos los elementos que posean un atributo app-problem, como lo es en el caso de: <div app-problem></div>.

1.2. Plantilla

El atributo templateUrl: permite definir la vista del componente a través de una plantilla. La plantilla es un
archivo HTML en que es posible incorporar directivas Angular para brindar funcionalidad y diseño. El valor de
este atributo es una cadena con la ruta de la plantilla relativa a la ruta del componente.

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

El siguiente ejemplo es una plantilla de un componente en donde se combina HTML junto con la sintaxis de
plantilla de Angular.

1 <div class="problem"
2 *ngFor="let problem of problems; index as i">
3 <div class="name">
4 {{ i + ' ' + problem.name}}
5 </div>
6 </div>

De manera alternativa es posible especificar la vista del componente en lı́nea por medio del atributo template
cuyo valor es una cadena con HTML del componente.

1.3. Estilos

Los atributos styles y styleUrl permiten establecer estilos al componente. El primero de ellos, styles, permite
hacerlo pasando la definición de los estilos que serán aplicados al componente cada uno como una cadena. Por
ejemplo:

// ...
@Component({

POLITÉCNICO GRANCOLOMBIANO 2
selector: 'app-problem',
templateUrl: './problem.component.html',
styles: [`.container {
width: 250px;
height: 100px;
color: black;
}
`]
})
// ...

Ambos atributos reciben un arreglo, es por eso que se observa la cadena definida en múltiples lı́neas dentro de los
corchetes cuadrados.

Cuando los estilos para aplicar son varios suele ser una buena opción definirlos en un archivo a parte al archivo de
configuración del componente. Esto puede lograrse haciendo uso del atributo styleUrls en el que se especifica la
ruta relativa del archivo CSS. Cuando el componente es creado con la herramienta Angular CLI, esta genera de
manera automática un archivo CSS en la carpeta del componente e incluye el atributo styleUrls con su valor
siendo la ruta relativa de este archivo. Esto permite mantener separado la definición de estilos (presentación) del
resto de la lógica del componente, como de la estructura (HTML) o de su comportamiento (TypeScript).

No se deben usar al tiempo los atributos style y styleUrls.

1.4. Encapsulamiento de estilos

Angular encapsula los estilos para evitar que se mezclen con los de otros componentes, aún ası́, si deseamos que se
compartan es posible indicarlo. Para ello, se utiliza el atributo encapsulation el cual puede tomar alguno de estos
tres valores.

1.5. Otros atributos

2. Modulos y Componentes

Los módulos se relacionan con los componentes debido a que todo componente que desee ser usado dentro de un
módulo debe haber sido importado previamente, esto es, incluirlo dentro del archivo de declaración del módulo
(<app-folder>/src/app/app.module.ts) en el arreglo declarations, de no hacerse el componente no podrá ser
usado dentro del módulo, y en caso de no estar importado en ningún otro módulo, Angular reportará la existencia
de componentes que no estén siendo incluidos en ningún módulo.

POLITÉCNICO GRANCOLOMBIANO 3
 Los tres atributos que encontramos en el decorador @NgModule, declarations, imports y exports impactan
directamente el módulo y es importante conocerlos una vez se inicie a trabajar con varios módulos o si se crean o
importan módulos.

Como pudimos observar el atributo declarations permite especificar el conjunto de componentes que estarán
disponibles dentro del módulo.

El atributo imports permite especificar el conjunto de módulos que se desean importar y acceder dentro del módulo.
Generalmente, esta es la de utilizar módulos de terceros.

En caso que se desee crear una librerı́a para ser usada por otros desarrolladores el atributo exports tendrá
relevancia. Si se desea usar el componente en otro módulo, este debe ser exportado.

3. Entrada y Salida

Uno de los aspectos que hace más útil a un componente es la capacidad de separar su contenido del componente
por si mismo. Angular proporciona dos decoradores, Input y Output, de nivel de variable miembro de clase.

3.1. Decorador Input

Para permitir pasar datos a un componente, se anotan las variables miembro necesarias con el decorador Input.
Los datos son pasados al componente haciendo uso de la sintaxis data-binding de Angular.

Para poder utilizar el decorador Input debe importarse tal como se muestra en la primera lı́nea del siguiente código
de ejemplo:

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

2

3 @Component({
4 selector: 'app-team',
5 templateUrl: './team.component.html',
6 styleUrls: ['./team.component.css']
7 })
8 export class TeamComponent implements OnInit {
9

10 @Input() public team: Team;

11

12 constructor() { }
13

14 ngOnInit() { }

POLITÉCNICO GRANCOLOMBIANO 4
15 }

En este código la variable team del componente TeamComponent ha sido marcada como entrada (Input). Esto
significa que no es responsabilidad del componente la creación del objeto team.

Trasladaremos la labor de creación del objeto team al componente AppComponent, para ello definiremos una variable
de instancia dentro del componente y asignaremos un valor en el método ngOnInit del componente.

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

2 import { Team } from './model';
3

4 @Component({
5 selector: 'app-root',
6 templateUrl: './app.component.html',
7 styleUrls: ['./app.component.css']
8 })
9 export class AppComponent {
10 title = 'app';
11

12 public team : Team;

13

14 ngOnInit(): void {
15 this.team = new Team('Good Programmers','Politécnico Grancolombiano');
16 }
17 }

Una vez hemos creado la variable de instancia team para el componente App, esta estará disponible para referenciarla
dentro de la plantilla del compontente, app.component.html. Para pasar esta variable del componente App al
componente Team en la plantilla de este primer componente pasamos la variable de la siguiente manera:

1 <div style="text-align:center">
2 <h1>
3 Online Judge
4 </h1>
5 <app-team [team]="team"></app-team>
6 </div>

3.2. Decorador Ouput

El decorador Output permite registrar y escuchar los eventos de un componente.

Se debe registrar un EventEmitter como salida de cualquier componente. Luego, se puede desencadenar el evento
usando el objeto EventEmitter que permitirá a cualquier componente enlazar el evento para obtener notificaciones
y actuar como es debido.

POLITÉCNICO GRANCOLOMBIANO 5
4. Ciclo de vida de los componentes

Otro de los aspectos importantes para los desarrolladores relacionado con los componentes es su ciclo de vida,
debido a que Angular permite intervenir en los diferentes eventos del ciclo de vida.

El ciclo de vida de un componente

POLITÉCNICO GRANCOLOMBIANO 6
Referencias

Deeleman, C., Pablo. Noring. (2017). Learning angular - second edition. Packt Publishing.
Google. (2018a). Angular - architecture overview. Recuperado desde https://angular.io/guide/architecture
Google. (2018b). Angular - what is angular? Recuperado desde https://angular.io/docs
Microsoft. (2018). Typescript - javascript that scales. Recuperado desde https://www.typescriptlang.org/
Minko, G. (2017). Switching to angular. Packt Publishing.
Nwamba, C. (2017). Typescript 2.x for angular developers. Packt Publishing.
Expert angular. (2017). Packt Publishing.
Seshadri, S. (2018). Angular: up and running. O’Reilly Media, Inc.

POLITÉCNICO GRANCOLOMBIANO 7
 INFORMACIÓN TÉCNICA

Módulo: Desarrollo de Front-End

Unidad 4: Framework Angular
Escenario 8: Framework Angular - Parte 2

Autor: Diego Satoba

Asesor Pedagógico: Ingrid Ospina Posada

Diseñador Gráfico: Catalina López
Asistente: Angie Laiton

Este material pertenece al Politécnico Grancolombiano.

Por ende, es de uso exclusivo de las Instituciones
adscritas a la Red Ilumno. Prohibida su reproducción
total o parcial.

POLITÉCNICO GRANCOLOMBIANO 8