Angular PDF

Descargar como pdf o txt
Descargar como pdf o txt
Está en la página 1de 125

CURSO ANGULAR

PROFESOR: CARLOS BLANCO GÓMEZ 1


CURSO ANGULAR

Contenido
¿Por qué aprender Angular 7? ............................................................................................. 4
Aplicaciones de Angular 7..................................................................................................... 5
Audiencia ................................................................................................................................. 5
Prerrequisitos .......................................................................................................................... 5
Angular7 - Descripción general ............................................................................................ 6
Actualización angular a V7.................................................................................................... 6
CLI angular .............................................................................................................................. 6
Rendimiento de la aplicación ................................................................................................ 7
Material angular y CDK ......................................................................................................... 7
Desplazamiento virtual ................................................................................................... 7
Arrastrar y soltar .............................................................................................................. 8
Angular7 - Configuración del entorno ................................................................................ 8
Nodejs ...................................................................................................................................... 8
Angular7 - Configuración del proyecto ............................................................................ 11
Aplicación............................................................................................................................... 24
app.module.ts .................................................................................................................. 24
app.component.html...................................................................................................... 25
app.component.spec.ts ................................................................................................ 27
app.component.ts .......................................................................................................... 27
app-routing.module.ts................................................................................................... 27
Bienes ................................................................................................................................ 27
Ambiente........................................................................................................................... 27
favicon.ico ........................................................................................................................ 28
index.html ......................................................................................................................... 28
main.ts ............................................................................................................................... 28
polyfill.ts ........................................................................................................................... 29
styles.css .......................................................................................................................... 29
test.ts ................................................................................................................................. 29
tsconfig.app.json ............................................................................................................ 29

PROFESOR: CARLOS BLANCO GÓMEZ 2


CURSO ANGULAR

tsconfig.spec.json .......................................................................................................... 29
typings.d.ts ...................................................................................................................... 30
Angular7 - Componentes ..................................................................................................... 31
Angular7 - Módulos ............................................................................................................... 39
Declaration............................................................................................................................. 40
Import ................................................................................................................................ 40
Providers .......................................................................................................................... 40
Bootstrap .......................................................................................................................... 40
Angular7 - Data Binding ....................................................................................................... 40
(Enlace de datos) .................................................................................................................... 40
Ejemplo ............................................................................................................................. 42
Salida ................................................................................................................................. 43
Ejemplo ............................................................................................................................. 43
Angular7 - Enlace de eventos ............................................................................................. 46
Angular7 - Plantillas .............................................................................................................. 51
Angular7 - Directivas ............................................................................................................. 56
Directivas de componentes ......................................................................................... 56
Directivas estructurales................................................................................................ 56
Directivas de atributos .................................................................................................. 56
¿Cómo crear directivas personalizadas? ......................................................................... 56
Angular7 – Pipes(tuberías) .................................................................................................. 58
¿Cómo crear una tubería personalizada? ........................................................................ 61
Angular7 - Enrutamiento ...................................................................................................... 63
Inicio de componentes ......................................................................................................... 64
Componente Contáctenos ........................................................................................... 65
Angular7 - Servicios .............................................................................................................. 70
Angular7 - Cliente HTTP ....................................................................................................... 76
Angular7: indicaciones de la CLI ....................................................................................... 79
Comando para actualización angular ................................................................................ 79
Lista de comandos importantes angulares ....................................................................... 80
Angular7 - Formularios ......................................................................................................... 80
Formulario impulsado por plantilla ..................................................................................... 80
Modelo impulsado por la forma .......................................................................................... 83
Validación de formulario ...................................................................................................... 86
Angular7 - Materiales / CDK-Desplazamiento virtual .................................................... 90

PROFESOR: CARLOS BLANCO GÓMEZ 3


CURSO ANGULAR

¿Por qué necesitamos el módulo de desplazamiento virtual? ...................................... 91


Angular7 - Materiales / CDK-Arrastrar y soltar ............................................................... 97
Angular7 - Animaciones ..................................................................................................... 104
Angular7 - Materiales .......................................................................................................... 108
Menú ..................................................................................................................................... 112
SideNav................................................................................................................................ 113
Selector de fechas .............................................................................................................. 114
Prueba y construcción de proyectos Angular7 ........................................................... 117
Prueba del proyecto Angular 7 ......................................................................................... 118
En línea de comando ................................................................................................... 121
En el navegador ............................................................................................................ 122
Proyecto de construcción angular 7 ................................................................................ 122

Angular 7 es un marco de JavaScript de código abierto para crear aplicaciones


web y aplicaciones en JavaScript, html y TypeScript que es un superconjunto
de JavaScript. Angular proporciona funciones integradas para animación,
servicio http y materiales que a su vez tienen funciones tales como
autocompletar, navegación, barra de herramientas, menús, etc. El código está
escrito en Typecript, que se compila en JavaScript y muestra lo mismo en el
navegador.

¿Por qué aprender Angular 7?


Angular 7 es imprescindible para que los estudiantes y profesionales que
trabajan se conviertan en un gran ingeniero de software, especialmente cuando
trabajan en el dominio de desarrollo de software. Enumeraré algunas de las
ventajas clave de aprender Angular 7:

PROFESOR: CARLOS BLANCO GÓMEZ 4


CURSO ANGULAR

 Angular es la plataforma basada en javascript más estable y más popular hoy en


día.
 El desarrollo angular es un conjunto completo para el desarrollo de aplicaciones y
puede tener los siguientes roles después de aprender Angular en una empresa.
o desarrollador web
o Desarrollador de aplicaciones web
o Desarrollador de interfaz de usuario
o Desarrollador UX
o Desarrollador front-end
o Desarrollador JavaScript

Aplicaciones de Angular 7
Como se mencionó anteriormente, Angular 7 es uno de los lenguajes más
utilizados en la web. Voy a enumerar algunos de ellos aquí:
 Comunidad admitida por Google : Google apoya activamente a Angular y su
desarrollo. Angular se usa en varias aplicaciones de Google.
 Desarrollo basado en POJO : Angular objeto JavaScript plano simple muy utilizado
y ayuda a aprender Angular de una manera más fácil.
 Interfaz de usuario declarativa : Angular utiliza HTML como lenguaje de
visualización y amplía su funcionalidad. Ayuda a manejar la diferencia entre la
interfaz de usuario y el código, y la interfaz de usuario está unida libremente con el
código.
 Tipos de letra : Tipos de letra es un conjunto súper de JavaScript y es fácil de
depurar. Es altamente seguro y está orientado a objetos.
 Estructura modular : el desarrollo angular es altamente modular, está basado en
componentes y es altamente mantenible.
 Soporte multiplataforma : el código angular funciona bien en todas las plataformas
sin muchos cambios en el código.

Audiencia
Este tutorial está diseñado para programadores de software que desean
aprender los conceptos básicos de Angular 7 y sus conceptos de programación
de una manera simple y fácil. Este tutorial le dará suficiente comprensión sobre
las diversas funcionalidades de Angular 7 con ejemplos adecuados.

Prerrequisitos
Antes de continuar con este tutorial, debe tener una comprensión básica de
HTML, CSS, JavaScript, mecanografiado y modelo de objetos de documento
(DOM).

PROFESOR: CARLOS BLANCO GÓMEZ 5


CURSO ANGULAR

Angular7 - Descripción general


Angular 7 es propiedad de Google y la versión estable se realizó el 18 º octubre
de 2018. Esta es la última versión del angular.
A continuación se muestra la lista de versiones angulares lanzadas hasta ahora:
Versión Fecha de lanzamiento

JS angular Octubre de 2010

Angular 2.0 Septiembre 2016

Angular 4.0 Marzo de 2017

Angular 5.0 Noviembre de 2017

Angular 6.0 Mayo 2018

Angular 7.0 Octubre 2018

Las fechas de lanzamiento para las próximas dos versiones principales de


Angular se detallan a continuación:
Versión Fecha de lanzamiento

Angular 8.0 Marzo / abril 2019

Angular 9.0 Septiembre / octubre 2019

Google planea lanzar la versión principal de Angular cada 6 meses. La versión


lanzada hasta ahora es compatible con versiones anteriores y se puede
actualizar a la más nueva muy fácilmente.
Discutamos las nuevas características agregadas a Angular 7.

Actualización angular a V7
Angular 7 es una versión principal en la que en el marco de núcleo angular, CLI
angular, se actualizan los materiales angulares. En caso de que esté utilizando
Angular 5 o 6 y desee actualizar a Angular 7, a continuación se muestra el
comando que actualizará su aplicación a la versión reciente de Angular:
ng update @angular/cli @angular/core

CLI angular

PROFESOR: CARLOS BLANCO GÓMEZ 6


CURSO ANGULAR

Mientras realiza la configuración del proyecto utilizando CLI angular, le informa


sobre las funciones incorporadas disponibles, es decir, el enrutamiento y el
soporte de la hoja de estilo como se muestra a continuación:

Rendimiento de la aplicación
En Angular 7, se agrega un presupuesto de paquete en angular.json como se
muestra a continuación:

Presupuestos es una función agregada a Angular CLI que le permite


establecer límites dentro de su configuración para asegurarse de que el tamaño
de su aplicación esté dentro del límite establecido. Puede establecer el tamaño
para que la aplicación pueda ser advertida cuando se cruza el límite.

Material angular y CDK


La versión de Angular Material / CDK se actualiza en Angular 7. También hay 2
características agregadas a CDK: desplazamiento virtual y arrastrar y
soltar .
Desplazamiento virtual
La función de desplazamiento virtual muestra los elementos dom visibles al
usuario, a medida que el usuario se desplaza, se muestra la siguiente lista. Esto

PROFESOR: CARLOS BLANCO GÓMEZ 7


CURSO ANGULAR

proporciona una experiencia más rápida ya que la lista completa no se carga de


una vez y solo se carga según la visibilidad en la pantalla.
Arrastrar y soltar
Puede arrastrar y soltar elementos de una lista y colocarlos donde sea necesario
dentro de la lista. La nueva característica es muy suave y rápida.

Angular7 - Configuración del entorno


En este capítulo, analizaremos la configuración del entorno necesaria para
Angular 7. Para instalar Angular 7, requerimos lo siguiente:

 Nodejs
 Npm
 CLI angular
 IDE para escribir su código

Nodejs
Para verificar si nodejs está instalado en su sistema, escriba node -v en la
terminal. Esto lo ayudará a ver la versión de nodejs actualmente instalada en su
sistema.
Nodejs tiene que ser mayor que 8.xo 10.x, y npm tiene que ser mayor que 5.6
o 6.4.
C:\>node
–v v10.15.1
Si no imprime nada, instale nodejs en su sistema. Para instalar nodejs, vaya a
la página de inicio, https://nodejs.org/en/download/ de nodejs e instale el
paquete según su sistema operativo.
La página de inicio de nodejs es la siguiente:

PROFESOR: CARLOS BLANCO GÓMEZ 8


CURSO ANGULAR

Según su sistema operativo, instale el paquete requerido. Una vez que se


instala nodejs, npm también se instalará junto con él. Para verificar si npm está
instalado o no, escriba npm –v en el terminal como se indica a
continuación. Mostrará la versión de npm.
C:\>npm
–v 6.4.1
Las instalaciones de Angular 7 son muy simples con la ayuda de CLI
angular. Visite la página de inicio https://cli.angular.io/ of angular para obtener
la referencia del comando.

PROFESOR: CARLOS BLANCO GÓMEZ 9


CURSO ANGULAR

Escriba npm install –g @ angular / cli en su símbolo del sistema, para instalar
angular cli en su sistema. La instalación tardará un tiempo y una vez hecho esto,
puede verificar la versión con el siguiente comando:
ng version
Mostrará detalles de la versión de angular - cli, así como la versión de otros
paquetes como se muestra a continuación -

PROFESOR: CARLOS BLANCO GÓMEZ 10


CURSO ANGULAR

Hemos terminado con la instalación de Angular 7. Puede usar cualquier IDE de


su elección, es decir, WebStorm, Atom, Visual Studio Code para comenzar a
trabajar con Angular 7.
Los detalles de la configuración del proyecto se explican en el próximo capítulo.

Angular7 - Configuración del proyecto


En este capítulo, discutiremos sobre la configuración del proyecto en Angular 7.
Para comenzar con la configuración del proyecto, asegúrese de tener instalados
nodejs. Puede verificar la versión del nodo en la línea de comando usando
el comando node –v , como se muestra a continuación:

Si no obtiene la versión, instale nodejs desde su sitio


oficial: https://nodejs.org/en/.

PROFESOR: CARLOS BLANCO GÓMEZ 11


CURSO ANGULAR

Una vez que haya instalado nodejs, npm también se instalará con él. Para
verificar la versión de npm, ejecute npm -v en la línea de comando como se
muestra a continuación:

Entonces tenemos la versión 10 del nodo y la versión 6.4.1 de npm.


Para instalar Angular 7, vaya al sitio, https://cli.angular.io para instalar Angular
CLI.

PROFESOR: CARLOS BLANCO GÓMEZ 12


CURSO ANGULAR

Verá los siguientes comandos en la página web:


npm install -g @angular/cli //command to install angular 7
ng new my-dream-app // name of the project
cd my-dream-app
ng serve
Los comandos anteriores ayudan a obtener la configuración del proyecto en
Angular 7.
Crearemos una carpeta llamada projectA7 e instalaremos angular / cli como
se muestra a continuación:

PROFESOR: CARLOS BLANCO GÓMEZ 13


CURSO ANGULAR

Una vez realizada la instalación, verifique los detalles de los paquetes


instalados utilizando el comando ng version como se muestra a continuación:

Ofrece la versión para CLI angular, la versión mecanografiada y otros paquetes


disponibles para Angular 7.
Hemos terminado con la instalación de Angular 7, ahora comenzaremos con la
configuración del proyecto.
Para crear un proyecto en Angular 7, utilizaremos el siguiente comando:
ng new projectname

PROFESOR: CARLOS BLANCO GÓMEZ 14


CURSO ANGULAR

Puede usar el nombre del proyecto que prefiera. Ejecutemos ahora el comando
anterior en la línea de comando.
Aquí, usamos el nombre del proyecto como angular7-app . Una vez que ejecute
el comando, le preguntará sobre el enrutamiento como se muestra a
continuación:

Escriba y para agregar enrutamiento a la configuración de su proyecto.


La siguiente pregunta es sobre la hoja de estilo:

PROFESOR: CARLOS BLANCO GÓMEZ 15


CURSO ANGULAR

Las opciones disponibles son CSS, Sass, Less y Stylus. En la captura de


pantalla anterior, la flecha está en CSS. Para cambiar, puede usar las teclas de
flecha para seleccionar la requerida para la configuración de su proyecto. En la
actualidad, discutiremos CSS para nuestra configuración de proyecto.

El proyecto angular7-app se creó con éxito. Instala todos los paquetes


necesarios necesarios para que nuestro proyecto se ejecute en
Angular7. Pasemos ahora al proyecto creado, que se encuentra en el
directorio angular7-app .
Cambie el directorio en la línea de comando usando la línea de código dada -

PROFESOR: CARLOS BLANCO GÓMEZ 16


CURSO ANGULAR

cd angular7-app
Usaremos IDE de Visual Studio Code para trabajar con Angular 7, puede usar
cualquier IDE, es decir, Atom, WebStorm, etc.
Para descargar Visual Studio Code, vaya a https://code.visualstudio.com/ y
haga clic en Descargar para Windows.

Haga clic en Descargar para Windows para instalar el IDE y ejecute la


configuración para comenzar a usar IDE.
El siguiente es el editor -

PROFESOR: CARLOS BLANCO GÓMEZ 17


CURSO ANGULAR

No hemos comenzado ningún proyecto en él. Tomemos ahora el proyecto que


hemos creado usando angular-cli.

PROFESOR: CARLOS BLANCO GÓMEZ 18


CURSO ANGULAR

Consideraremos el proyecto angular7-app . Abramos la angular7


aplicación y ver cómo la estructura de carpetas se parece.

PROFESOR: CARLOS BLANCO GÓMEZ 19


CURSO ANGULAR

Ahora que tenemos la estructura de archivos para nuestro proyecto,


compilemos nuestro proyecto con el siguiente comando:
ng serve
El comando ng serve construye la aplicación e inicia el servidor web.

PROFESOR: CARLOS BLANCO GÓMEZ 20


CURSO ANGULAR

Verá lo siguiente cuando el comando comience a ejecutarse:

El servidor web se inicia en el puerto 4200. Escriba la url, "http: // localhost:


4200 /" en el navegador y vea la salida. Una vez que se compila el proyecto,
recibirá el siguiente resultado:

PROFESOR: CARLOS BLANCO GÓMEZ 21


CURSO ANGULAR

Una vez que ejecute url, http: // localhost: 4200 / en el navegador, se lo dirigirá
a la siguiente pantalla:

Hagamos ahora algunos cambios para mostrar el siguiente contenido:


"¡Bienvenido a Angular 7!"

PROFESOR: CARLOS BLANCO GÓMEZ 22


CURSO ANGULAR

Hemos realizado cambios en los


archivos: app.component.html y app.component.ts . Discutiremos más
sobre esto en nuestros capítulos posteriores.
Permítanos completar la configuración del proyecto. Si ve que hemos usado el
puerto 4200, que es el puerto predeterminado que angular-cli utiliza durante la
compilación. Puede cambiar el puerto si lo desea utilizando el siguiente
comando:
ng serve --host 0.0.0.0 –port 4205
La carpeta angular7-app / tiene la siguiente estructura de carpetas :
 e2e / - carpeta de prueba de extremo a extremo. Principalmente e2e se usa para
pruebas de integración y ayuda a garantizar que la aplicación funcione bien.
 node_modules / - El paquete npm instalado es node_modules. Puede abrir la
carpeta y ver los paquetes disponibles.
 src / - Esta carpeta es donde trabajaremos en el proyecto usando Angular 7. Dentro
de src / se aplicará / carpeta creada durante la configuración del proyecto y contiene
todos los archivos necesarios para el proyecto.
La carpeta angular7-app / tiene la siguiente estructura de archivos :
 angular.json : básicamente contiene el nombre del proyecto, la versión de cli, etc.
 .editorconfig : este es el archivo de configuración para el editor.
 .gitignore : se debe confirmar un archivo .gitignore en el repositorio para compartir
las reglas de ignorar con cualquier otro usuario que clone el repositorio.
 package.json : el archivo package.json indica qué bibliotecas se instalarán en
node_modules cuando ejecute npm install.
En la actualidad, si abre el archivo package.json en el editor, obtendrá los
siguientes módulos agregados:

PROFESOR: CARLOS BLANCO GÓMEZ 23


CURSO ANGULAR

"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
En caso de que necesite agregar más bibliotecas, puede agregarlas aquí y
ejecutar el comando de instalación npm.
 tsconfig.json : básicamente contiene las opciones del compilador necesarias
durante la compilación.
 tslint.json : este es el archivo de configuración con reglas a tener en cuenta al
compilar.
La carpeta src / es la carpeta principal, que internamente tiene una estructura
de archivos diferente.

Aplicación
Contiene los archivos que se describen a continuación. Estos archivos se
instalan por angular-cli de forma predeterminada.
app.module.ts
Si abre el archivo, verá que el código hace referencia a diferentes bibliotecas,
que se importan. Angular-cli ha utilizado estas bibliotecas predeterminadas para
la importación: angular / core, plataforma-navegador.
Los nombres en sí explican el uso de las bibliotecas. Se importan y guardan en
variables como declaraciones, importaciones, proveedores y bootstrap.
Podemos ver que también se agrega app-routing.module . Esto se debe a que
habíamos seleccionado el enrutamiento al comienzo de la instalación. El
módulo es agregado por @ angular / cli.
A continuación se muestra la estructura del archivo:

PROFESOR: CARLOS BLANCO GÓMEZ 24


CURSO ANGULAR

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,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
@NgModule se importa desde @ angular / core y tiene un objeto con las
siguientes propiedades:
Declaraciones : en las declaraciones, se almacena la referencia a los
componentes. El componente de la aplicación es el componente
predeterminado que se crea cada vez que se inicia un nuevo
proyecto. Aprenderemos sobre la creación de nuevos componentes en una
sección diferente.
Importaciones : esto tendrá los módulos importados como se muestra
arriba. En la actualidad, BrowserModule es parte de las importaciones que se
importan desde @ angular / platform-browser. También hay un módulo de
enrutamiento agregado AppRoutingModule.
Proveedores : esto hará referencia a los servicios creados. El servicio se
discutirá en un capítulo posterior.
Bootstrap : hace referencia al componente predeterminado creado, es decir,
AppComponent.
app.component.css : puede escribir su CSS aquí. En este momento, hemos
agregado el color de fondo al div como se muestra a continuación.
La estructura del archivo es la siguiente:
.divdetails {
background-color: #ccc;
}
app.component.html
El código html estará disponible en este archivo.
La estructura del archivo es la siguiente:

PROFESOR: CARLOS BLANCO GÓMEZ 25


CURSO ANGULAR

<!--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 =
"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My
5vcmcvMjAwMC9zdmciIHZp

ZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiI
GQ9Ik0xMjUgMzBMMzEuOSA

2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoi
IC8+CiAgICA8cGF0aCBma

WxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNy
AxNC4yLTEyMy4xTDEyNSA

zMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4x
TDY2LjggMTgyLjZoMjEuN2

wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4
zaC0zNGwxNy00MC45IDE3I
DQwLjl6IiAvPgogIDwvc3ZnPg=="7>
</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</>
</h2>
</li>
<li>
<h2><a target = "_blank" rel = "noopener"
href = "https://blog.angular.io/">Angular blog</a>
</h2>
</li>
</ul>
<router-outlet></router-outlet>
Este es el código html predeterminado actualmente disponible con la creación
del proyecto.

PROFESOR: CARLOS BLANCO GÓMEZ 26


CURSO ANGULAR

app.component.spec.ts
Estos son archivos generados automáticamente que contienen pruebas
unitarias para el componente fuente.
app.component.ts
La clase para el componente se define aquí. Puede hacer el procesamiento de
la estructura html en el archivo .ts. El procesamiento incluirá actividades como
conectarse a la base de datos, interactuar con otros componentes,
enrutamiento, servicios, etc.
La estructura del archivo es la siguiente:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7';
}
app-routing.module.ts
Este archivo tratará con el enrutamiento requerido para su proyecto. Está
conectado con el módulo principal, es decir, app.module.ts.
La estructura del archivo es la siguiente:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];


@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Bienes
Puede guardar sus imágenes, archivos js en esta carpeta.
Ambiente
Esta carpeta tiene detalles para la producción o el entorno de desarrollo. La
carpeta contiene dos archivos.

 environment.prod.ts
 environment.ts
Ambos archivos tienen detalles sobre si el archivo final debe compilarse en el
entorno de producción o en el entorno de desarrollo.
La estructura de archivos adicional de angular7-app / folder incluye lo siguiente:

PROFESOR: CARLOS BLANCO GÓMEZ 27


CURSO ANGULAR

favicon.ico
Este es un archivo que generalmente se encuentra en el directorio raíz de un
sitio web.
index.html
Este es el archivo que se muestra en el navegador.
<html lang = "en">
<head>
<meta charset = "utf-8"7gt;
<title>Angular7App</title>
<base href = "/">
<meta name = "viewport" content = "width=device-width,
initial-scale=1">
<link rel = "icon" type = "image/x-icon" href =
"favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
El cuerpo tiene <app-root> </app-root> . Este es el selector que se utiliza en
el archivo app.component.ts y mostrará los detalles
del archivo app.component.html .
main.ts
main.ts es el archivo desde donde comenzamos el desarrollo de nuestro
proyecto. Comienza con la importación del módulo básico que necesitamos. En
este momento, si ve angular / core, angular / platform-browser-dynamic,
app.module y el entorno se importan de forma predeterminada durante la
instalación de angular-cli y la configuración del proyecto.
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-
browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule).catch(err
=> console.error(err));
PlatformBrowserDynamic (). BootstrapModule (AppModule) tiene la referencia
del módulo principal AppModule. Por lo tanto, cuando se ejecuta en el
navegador, el archivo se llama index.html. Index.html se refiere internamente a
main.ts que llama al módulo padre, es decir, AppModule cuando se ejecuta el
siguiente código:

PROFESOR: CARLOS BLANCO GÓMEZ 28


CURSO ANGULAR

platformBrowserDynamic().bootstrapModule(AppModule).catch(err
=> console.error(err));
Cuando se llama a AppModule, llama a app.module.ts, que luego llama a
AppComponent en función del bootstrap de la siguiente manera:
bootstrap: [AppComponent]
En app.component.ts , hay un selector: app-root que se usa en el archivo
index.html. Esto mostrará los contenidos presentes en app.component.html .
Lo siguiente se mostrará en el navegador:

polyfill.ts
Esto se utiliza principalmente para la compatibilidad con versiones anteriores.
styles.css
Este es el archivo de estilo requerido para el proyecto.
test.ts
Aquí, se manejarán los casos de prueba de unidad para probar el proyecto.
tsconfig.app.json
Esto se usa durante la compilación, tiene los detalles de configuración que
deben usarse para ejecutar la aplicación.
tsconfig.spec.json
Esto ayuda a mantener los detalles para las pruebas.

PROFESOR: CARLOS BLANCO GÓMEZ 29


CURSO ANGULAR

typings.d.ts
Se utiliza para gestionar la definición de Typecript.
La estructura final del archivo será la siguiente:

PROFESOR: CARLOS BLANCO GÓMEZ 30


CURSO ANGULAR

Angular7 - Componentes
La mayor parte del desarrollo con Angular 7 se realiza en los componentes. Los
componentes son básicamente clases que interactúan con el archivo .html del
componente, que se muestra en el navegador. Hemos visto la estructura de
archivos en uno de nuestros capítulos anteriores.
La estructura de archivos tiene el componente de la aplicación y consta de los
siguientes archivos:

 app.component.css
 app.component.html
 app.component.spec.ts
 app.component.ts
 app.module.ts
Y si seleccionó el enrutamiento angular durante la configuración del proyecto,
los archivos relacionados con el enrutamiento también se agregarán y los
archivos son los siguientes:

 app-routing.module.ts
Los archivos anteriores se crean por defecto cuando creamos un nuevo
proyecto usando el comando angular-cli.
Si abre el archivo app.module.ts , tiene algunas bibliotecas que se importan y
también un declarativo al que se le asigna el componente de la aplicación de la
siguiente manera:
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,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Las declaraciones incluyen la variable AppComponent, que ya hemos
importado. Esto se convierte en el componente principal.
Ahora, angular-cli tiene un comando para crear su propio componente. Sin
embargo, el componente de la aplicación que se crea de manera

PROFESOR: CARLOS BLANCO GÓMEZ 31


CURSO ANGULAR

predeterminada siempre seguirá siendo el principal y los siguientes


componentes creados formarán los componentes secundarios.
Ejecutemos ahora el comando para crear el componente con la siguiente línea
de código:
ng g component new-cmp
Cuando ejecute el comando anterior en la línea de comando, recibirá el
siguiente resultado:
C:\projectA7\angular7-app>ng g component new-cmp
CREATE src/app/new-cmp/new-cmp.component.html (26 bytes)
CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes)
CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes)
CREATE src/app/new-cmp/new-cmp.component.css (0 bytes)
UPDATE src/app/app.module.ts (477 bytes)
Ahora, si vamos y verificamos la estructura del archivo, obtendremos la nueva
carpeta new-cmp creada en la carpeta src / app .
Los siguientes archivos se crean en la carpeta new-cmp:

 new-cmp.component.css: se crea el archivo css para el nuevo componente.


 new-cmp.component.html: se crea el archivo html.
 new-cmp.component.spec.ts: se puede usar para pruebas unitarias.
 new-cmp.component.ts: aquí, podemos definir el módulo, las propiedades, etc.
Los cambios se agregan al archivo app.module .ts de la siguiente manera:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-
cmp.component';

// includes the new-cmp component we created


@NgModule({
declarations: [
AppComponent,
NewCmpComponent
// here it is added in declarations and will behave as
a child component
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
//for bootstrap the AppComponent the main app component
is given.
})

PROFESOR: CARLOS BLANCO GÓMEZ 32


CURSO ANGULAR

export class AppModule { }


El archivo new-cmp.component.ts se genera de la siguiente manera:
import { Component, OnInit } from '@angular/core'; // here
angular/core is imported.

@Component({
// this is a declarator which starts with @ sign.
// The component word marked in bold needs to be the same.
selector: 'app-new-cmp', // selector to be used inside
.html file.
templateUrl: './new-cmp.component.html',
// reference to the html file created in the new
component.
styleUrls: ['./new-cmp.component.css'] // reference to the
style file.
})
export class NewCmpComponent implements OnInit {
constructor() { }
ngOnInit() { }
}
Si ve el archivo new-cmp.component.ts anterior, crea una nueva clase
llamada NewCmpComponent , que implementa OnInit en el que hay un
constructor y un método llamado ngOnInit (). ngOnInit se llama por defecto
cuando se ejecuta la clase.
Veamos cómo funciona el flujo. Ahora, el componente de la aplicación, que se
crea de manera predeterminada, se convierte en el componente
principal. Cualquier componente agregado más tarde se convierte en el
componente hijo.
Cuando pulsamos la URL en el navegador "http: // localhost: 4200 /" , primero
ejecuta el archivo index.html que se muestra a continuación:
<html lang = "en">

<head>
<meta charset = "utf-8">
<title>Angular7App</title>
<base href = "/">
<meta name = "viewport" content = "width = device-
width, initial-scale = 1">
<link rel = "icon" type = "image/x-icon" href =
"favicon.ico">
</head>
<body>
<app-root></app-root>
</body>

</html>

PROFESOR: CARLOS BLANCO GÓMEZ 33


CURSO ANGULAR

Lo anterior es el archivo html normal y no vemos nada impreso en el


navegador. Echaremos un vistazo a la etiqueta en la sección del cuerpo.
<app-root></app-root>
Esta es la etiqueta raíz creada por Angular por defecto. Esta etiqueta tiene la
referencia en el archivo main.ts.
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-
browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule).catch(err
=> console.error(err));
AppModule se importa desde la aplicación del módulo principal principal, y lo
mismo se le da al módulo bootstrap, lo que hace que se cargue el módulo de
aplicación.
Veamos ahora el archivo app.module.ts :
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-
cmp.component';

@NgModule({
declarations: [
AppComponent,
NewCmpComponent
],
imports: [
BrowserModule,
AppRoutingModule '
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Aquí, AppComponent es el nombre dado, es decir, la variable para almacenar
la referencia de app.component.ts y lo mismo se da al bootstrap. Veamos
ahora el archivo app.component.ts .
import { Component } from '@angular/core';
@Component({
selector: 'app-root',

PROFESOR: CARLOS BLANCO GÓMEZ 34


CURSO ANGULAR

templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7';
}
El núcleo angular se importa y se denomina Componente, y el mismo se usa en
el Declarador como:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
En la referencia del declarador al selector, se proporcionan templateUrl y
styleUrl. El selector aquí no es más que la etiqueta que se coloca en el archivo
index.html que vimos anteriormente.
La clase AppComponent tiene una variable llamada título, que se muestra en el
navegador. @Component utiliza la templateUrl llamada app.component.html,
que es la siguiente:
<!--The content below is only a placeholder and can be
replaced.-->
<div style = "text-align:center">
<h1> Welcome to {{ title }}! </h1>
</div>
Solo tiene el código html y el título variable entre llaves. Se reemplaza con el
valor, que está presente en el archivo app.component.ts . Esto se llama
enlace. Discutiremos el concepto de vinculación en el capítulo siguiente.
Ahora que hemos creado un nuevo componente llamado new-cmp. Lo mismo
se incluye en el archivo app.module.ts , cuando se ejecuta el comando para
crear un nuevo componente.
app.module.ts tiene una referencia al nuevo componente creado.
Veamos ahora los nuevos archivos creados en new-cmp.
new-cmp.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-new-cmp',
templateUrl: './new-cmp.component.html',
styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
constructor() { }
ngOnInit() { }
}

PROFESOR: CARLOS BLANCO GÓMEZ 35


CURSO ANGULAR

Aquí, también tenemos que importar el núcleo. La referencia del componente


se utiliza en el declarador.
El declarador tiene el selector llamado app-new-cmp y templateUrl y styleUrl.
El .html llamado new-cmp.component.html es el siguiente:
<p>
new-cmp works!
</p>
Como se ve arriba, tenemos el código html, es decir, la etiqueta p. El archivo de
estilo está vacío ya que no necesitamos ningún estilo en este momento. Pero
cuando ejecutamos el proyecto, no vemos nada relacionado con el nuevo
componente que se muestra en el navegador.
El navegador muestra la siguiente pantalla:

No vemos nada relacionado con el nuevo componente que se muestra. El


nuevo componente creado tiene un archivo .html con los siguientes detalles:
<p>
new-cmp works!
<p>
Pero no estamos obteniendo lo mismo en el navegador. Veamos ahora los
cambios necesarios para que el contenido de los nuevos componentes se
muestre en el navegador.
El selector ' app-new-cmp ' se crea para el nuevo componente de new-
cmp.component.ts como se muestra a continuación:

PROFESOR: CARLOS BLANCO GÓMEZ 36


CURSO ANGULAR

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

@Component({
selector: 'app-new-cmp',
templateUrl: './new-cmp.component.html',
styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
constructor() { }
ngOnInit() { }
}
El selector, es decir, app-new-cmp , debe agregarse en app.component.html,
es decir, el padre principal creado de manera predeterminada de la siguiente
manera:
<!--The content below is only a placeholder and can be
replaced.-->
<div style = "text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<app-new-cmp7gt;</app-new-cmp>
Cuando se agrega la etiqueta <app-new-cmp> </app-new-cmp> , todo lo que
está presente en el archivo .html, es decir, new-cmp.component.html del nuevo
componente creado se mostrará en el navegador junto con los datos del
componente principal.

Agreguemos algunos detalles más al nuevo componente creado y veamos la


pantalla en el navegador.
new-cmp.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-new-cmp',
templateUrl: './new-cmp.component.html',
styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
newcomponent = "Entered in new component created";

PROFESOR: CARLOS BLANCO GÓMEZ 37


CURSO ANGULAR

constructor() { }
ngOnInit() { }
}
En la clase, hemos agregado una variable llamada newcomponent y el valor
es "Ingresado en el nuevo componente creado".
La variable anterior se agrega en el archivo new-cmp.component.html de la
siguiente manera:
<p>
{{newcomponent}}
</p>
<p>
new-cmp works!
</p>
Ahora, como hemos incluido el selector <app-new-cmp> </app-new-
cmp> en app.component.html, que es el .html del componente principal, el
contenido presente en new-cmp.component. El archivo html se muestra en el
navegador. También agregaremos algunos css para el nuevo componente en
el archivo new-cmp.component.css de la siguiente manera:
p {
color: blue;
font-size: 25px;
}
Por lo tanto, hemos agregado color azul y tamaño de fuente como 25px para las
etiquetas p.
La siguiente pantalla se mostrará en el navegador:

PROFESOR: CARLOS BLANCO GÓMEZ 38


CURSO ANGULAR

Del mismo modo, podemos crear componentes y vincularlos utilizando el


selector en el archivo app.component.html según nuestros requisitos.

Angular7 - Módulos
Módulo en Angular se refiere a un lugar donde puede agrupar los componentes,
directivas, tuberías y servicios relacionados con la aplicación.
En caso de que esté desarrollando un sitio web, el encabezado, pie de página,
izquierda, centro y la sección derecha se convierten en parte de un módulo.
Para definir el módulo, podemos usar el NgModule. Cuando crea un nuevo
proyecto utilizando el comando Angular –cli, el ngmodule se crea en
el archivo app.module.ts de forma predeterminada y tiene el siguiente aspecto:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-
cmp.component';

@NgModule({
declarations: [
AppComponent,
NewCmpComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
El NgModule debe importarse de la siguiente manera:
import { NgModule } from '@angular/core';
La estructura para el ngmodule es como se muestra a continuación:
@NgModule({
declarations: [
AppComponent,
NewCmpComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})

PROFESOR: CARLOS BLANCO GÓMEZ 39


CURSO ANGULAR

Comienza con @NgModule y contiene un objeto que tiene declaraciones,


importaciones, proveedores y bootstrap.

Declaration
Es una matriz de componentes creados. Si se crea algún componente nuevo,
primero se importará y la referencia se incluirá en las declaraciones como se
muestra a continuación:
declarations: [
AppComponent,
NewCmpComponent
]
Import
Es una matriz de módulos necesarios para ser utilizados en la
aplicación. También puede ser utilizado por los componentes en la matriz
Declaración. Por ejemplo, en este momento en el @NgModule, vemos
importado el módulo del navegador. En caso de que su solicitud necesite
formularios, puede incluir el módulo con el siguiente código:
import { FormsModule } from '@angular/forms';
La importación en @NgModule será como la siguiente:
imports: [
BrowserModule,
FormsModule
]
Providers
Esto incluirá los servicios creados.
Bootstrap
Esto incluye el componente principal de la aplicación para comenzar la
ejecución.

Angular7 - Data Binding


(Enlace de datos)

Data Binding está disponible directamente desde AngularJS, y todas las


versiones de Angular lanzadas más adelante. Utilizamos llaves para el enlace
de datos: {{}}; Este proceso se llama interpolación. Ya hemos visto en nuestros
ejemplos anteriores cómo declaramos el valor del título de la variable y lo mismo
se imprime en el navegador.
La variable en el archivo app.component.html se conoce como {{title}} y el
valor del título se inicializa en el archivo app.component.ts y
en app.component.html , se muestra el valor.

PROFESOR: CARLOS BLANCO GÓMEZ 40


CURSO ANGULAR

Creemos ahora un menú desplegable de meses en el navegador. Para hacer


eso, hemos creado una serie de meses en app.component.ts de la siguiente
manera:
import { Component } from '@angular/core';

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

// declared array of months.


months = ["January", "February", "March", "April", "May",
"June", "July",
"August", "September", "October", "November",
"December"];
}
La matriz de meses que se muestra arriba se mostrará en un menú desplegable
en el navegador.
Hemos creado la etiqueta de selección normal con opción. En opción, hemos
usado el bucle for . El bucle for se usa para iterar sobre la matriz de meses, lo
que a su vez creará la etiqueta de opción con el valor presente en los meses.
La sintaxis para en Angular es la siguiente:
*ngFor = “let I of months”
y para obtener el valor de los meses lo estamos mostrando en
{{i}}
Los dos corchetes ayudan con el enlace de datos. Declaras las variables en tu
archivo app.component.ts y las mismas serán reemplazadas usando los
corchetes.
A continuación se muestra el resultado de la matriz del mes anterior en el
navegador:

PROFESOR: CARLOS BLANCO GÓMEZ 41


CURSO ANGULAR

La variable que se establece en app.component.ts se puede vincular dentro


de app.component.html utilizando los corchetes. Por ejemplo: {{}}.
Veamos ahora los datos en el navegador según la condición. Aquí, hemos
agregado una variable y asignado el valor como verdadero . Usando la
declaración if, podemos ocultar / mostrar el contenido que se mostrará.
Ejemplo
import { Component } from '@angular/core';

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

// declared array of months.


months = ["January", "February", "March", "April", "May",
"June", "July",
"August", "September", "October", "November",
"December"];

isavailable = true; //variable is set to true


}
app.component.html
<!--The content below is only a placeholder and can be
replaced.-->
<div style = "text-align:center">
<h1> Welcome to {{title}}. </h1>
</div>

PROFESOR: CARLOS BLANCO GÓMEZ 42


CURSO ANGULAR

<div> Months :
<select>
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
<br/>

<div>
<span *ngIf = "isavailable">Condition is valid.</span>
//over here based on if condition the text condition is
valid is displayed.
//If the value of isavailable is set to false it will not
display the text.
</div>
Salida

Expliquemos el ejemplo anterior usando la condición SI ENTONCES


ENTONCES
Ejemplo
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7';

// declared array of months.


months = ["January", "Feburary", "March", "April",
"May","June", "July",

PROFESOR: CARLOS BLANCO GÓMEZ 43


CURSO ANGULAR

"August", "September", "October", "November",


"December"];

isavailable = false; //variable is set to true


}
En este caso, hemos hecho que la variable isavailable sea falsa. Para imprimir
la condición else , tendremos que crear la plantilla ng de la siguiente manera:
<ng-template #condition1>Condition is invalid</ng-template>
El código completo se da a continuación:
<!--The content below is only a placeholder and can be
replaced.-->
<div style = "text-align:center">
<h1> Welcome to {{title}}. </h1>
</div>

<div> Months :
<select>
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
<br/>

<div>
<span *ngIf = "isavailable; else condition1">Condition is
valid.</span>
<ng-template #condition1>Condition is invalid</ng-
template>
</div>
Si se usa con la condición else y la variable usada es condition1 . Lo mismo se
asigna como una identificación a la plantilla ng , y cuando la variable
disponible se establece en falso, se muestra el texto La condición
no es válida .
La siguiente captura de pantalla muestra la pantalla en el navegador:

PROFESOR: CARLOS BLANCO GÓMEZ 44


CURSO ANGULAR

Ahora usemos la condición if then else .


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

// declared array of months.


months = ["January", "February", "March", "April", "May",
"June", "July",
"August", "September", "October", "November",
"December"];

isavailable = true; //variable is set to true


}
Ahora, haremos que la variable esté disponible como verdadera. En el html, la
condición se escribe de la siguiente manera:
<!--The content below is only a placeholder and can be
replaced.-->
<div style = "text-align:center">
<h1> Welcome to {{title}}. </h1>
</div>

<div> Months :
<select>
<option *ngFor="let i of months">{{i}}</option>
</select>
</div>
<br/>

PROFESOR: CARLOS BLANCO GÓMEZ 45


CURSO ANGULAR

<div>
<span *ngIf = "isavailable; then condition1 else
condition2">
Condition is valid.
</span>
<ng-template #condition1>Condition is valid</ng-template>
<ng-template #condition2>Condition is invalid</ng-
template>
</div>
Si la variable es verdadera, entonces condición1 , más condición2 . Ahora, se
crean dos plantillas con id # condition1 y # condition2 .
La visualización en el navegador es la siguiente:

Angular7 - Enlace de eventos


En este capítulo, discutiremos cómo funciona la vinculación de eventos en
Angular 7. Cuando un usuario interactúa con una aplicación en forma de un
movimiento del teclado, un clic del mouse o un mouse, genera un evento. Estos
eventos deben ser manejados para realizar algún tipo de acción. Aquí es donde
entra en escena el enlace de eventos.
Consideremos un ejemplo para entender esto mejor.
app.component.html
<!--The content below is only a placeholder and can be
replaced.-->
<div style = "text-align:center">
<h1>Welcome to {{title}}.</h1>
</div>

<div> Months :
<select>
<option *ngFor = "let i of months">{{i}}</option>
</select>

PROFESOR: CARLOS BLANCO GÓMEZ 46


CURSO ANGULAR

</div>
<br/>

<div>
<span *ngIf = "isavailable; then condition1 else
condition2">
Condition is valid.
</span>
<ng-template #condition1>Condition is valid</ng-template>
<ng-template #condition2>Condition is invalid</ng-
template>
</div>
<button (click) = "myClickFunction($event)">
Click Me
</button>
En el archivo app.component.html , hemos definido un botón y le hemos
agregado una función usando el evento click.
La siguiente es la sintaxis para definir un botón y agregarle una función.
(click) = "myClickFunction($event)"
La función se define en: app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7';

// declared array of months.


months = ["January", "February", "March", "April",
"May","June", "July",
"August", "September", "October", "November",
"December"];

isavailable = true; //variable is set to true


myClickFunction(event) {
//just added console.log which will display the event
details in browser on click of the button.
alert("Button is clicked");
console.log(event);
}
}
Al hacer clic en el botón, el control pasará a la
función myClickFunction y aparecerá un cuadro de diálogo que muestra
que se hace clic en el botón como se muestra en la siguiente captura de
pantalla:

PROFESOR: CARLOS BLANCO GÓMEZ 47


CURSO ANGULAR

El estilo para el botón se agrega en add.component.css -


button {
background-color: #2B3BCF;
border: none;
color: white;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
}
Ahora agreguemos el evento onchange al menú desplegable.
La siguiente línea de código lo ayudará a agregar el evento de cambio al menú
desplegable:
app.component.html
<!--The content below is only a placeholder and can be
replaced.-->
<div style = "text-align:center">
<h1>Welcome to {{title}}.</h1>
</div>

<div> Months :
<select (change) = "changemonths($event)">
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
<br/>

<div>
<span *ngIf = "isavailable; then condition1 else
condition2">
Condition is valid.
</span>
<ng-template #condition1>Condition is valid</ng-template>

PROFESOR: CARLOS BLANCO GÓMEZ 48


CURSO ANGULAR

<ng-template #condition2>Condition is invalid</ng-


template>
</div>
<br/>

<button (click) = "myClickFunction($event)">


Click Me
</button>
La función se declara en el archivo app.component.ts :
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7';

// declared array of months.


months = ["January", "Feburary", "March", "April", "May",
"June", "July",
"August", "September", "October", "November",
"December"];

isavailable = true; //variable is set to true


myClickFunction(event) {
//just added console.log which will display the event
details in browser on click of the button.
alert("Button is clicked");
console.log(event);
}
changemonths(event) {
console.log("Changed month from the Dropdown");
console.log(event);
}
}
Seleccione el mes del menú desplegable y verá el mensaje de la consola " Mes
cambiado del menú desplegable " se muestra en la consola junto con el
evento.

PROFESOR: CARLOS BLANCO GÓMEZ 49


CURSO ANGULAR

Agreguemos un mensaje de alerta en app.component.ts cuando el valor del


menú desplegable cambia como se muestra a continuación:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7';

// declared array of months.


months = ["January", "February", "March", "April", "May",
"June", "July",
"August", "September", "October", "November",
"December"];

isavailable = true; //variable is set to true


myClickFunction(event) {
//just added console.log which will display the event
details in browser on click of the button.
alert("Button is clicked"); console.log(event);
}
changemonths(event) {
alert("Changed month from the Dropdown");
}
}
Cuando se cambia el valor en el menú desplegable, aparecerá un cuadro de
diálogo y se mostrará el siguiente mensaje:
"Mes cambiado desde el menú desplegable".

PROFESOR: CARLOS BLANCO GÓMEZ 50


CURSO ANGULAR

Angular7 - Plantillas
Angular 7 usa <ng-template> como la etiqueta en lugar de <template> que se
usa en Angular2. <ng-template> ha estado en uso desde el lanzamiento de
Angular 4, y la versión anterior, es decir, Angular 2 usa <template> con el mismo
propósito. La razón por la que comenzó a usar <ng-template> en lugar de
<template> desde Angular 4 en adelante es porque hay un conflicto de nombre
entre la etiqueta <template> y la etiqueta estándar html <template>. Se
desaprobará por completo en el futuro. Este fue uno de los principales cambios
realizados en la versión Angular 4.
Ahora usemos la plantilla junto con la condición if else y veamos el resultado.
app.component.html
<!--The content below is only a placeholder and can be
replaced.-->
<div style = "text-align:center">
<h1>Welcome to {{title}}.</h1>
</div>

<div> Months :
<select (change) = "changemonths($event)" name = "month">
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
<br/>

<div>
<span *ngIf = "isavailable;then condition1 else
condition2">
Condition is valid.
</span>

PROFESOR: CARLOS BLANCO GÓMEZ 51


CURSO ANGULAR

<ng-template #condition1>Condition is valid from


template</ng-template>
<ng-template #condition2>Condition is invalid from
template</ng-template>
</div>
<button (click) = "myClickFunction($event)">Click Me</button>
Para la etiqueta Span, hemos agregado la instrucción if con la condición else y
llamaremos a la plantilla condition1, else condition2.
Las plantillas se deben llamar de la siguiente manera:
<ng-template #condition1>Condition is valid from
template</ng-template>
<ng-template #condition2>Condition is invalid from
template</ng-template>
Si la condición es verdadera, entonces se llama a la plantilla condition1 , de lo
contrario, condition2 .
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7';

// declared array of months.


months = ["January", "February", "March", "April", "May",
"June", "July",
"August", "September", "October", "November",
"December"];
isavailable = false; // variable is set to true

myClickFunction(event) {
//just added console.log which will display the event
details in browser on click of the button.
alert("Button is clicked");
console.log(event);
}
changemonths(event) {
alert("Changed month from the Dropdown");
}
}
La salida en el navegador es la siguiente:

PROFESOR: CARLOS BLANCO GÓMEZ 52


CURSO ANGULAR

La variable isavailable es falsa por lo que se imprime la plantilla condition2 Si


hace clic en el botón, se llamará a la plantilla correspondiente.
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7';

// declared array of months.


months = ["January", "Feburary", "March", "April", "May",
"June", "July",
"August", "September", "October", "November",
"December"];

isavailable = false; //variable is set to true


myClickFunction(event) {
this.isavailable = !this.isavailable;
// variable is toggled onclick of the button
}
changemonths(event) {
alert("Changed month from the Dropdown");
}
}
El isavailable variables se activa al hacer clic con el botón como se muestra a
continuación -
myClickFunction(event) {
this.isavailable = !this.isavailable;
}

PROFESOR: CARLOS BLANCO GÓMEZ 53


CURSO ANGULAR

Al hacer clic en el botón en función del valor de la isavailable variable se


visualiza la plantilla respectiva -

Si inspecciona el navegador, verá que nunca obtiene la etiqueta span en el


dom. El siguiente ejemplo lo ayudará a comprender lo mismo.

Aunque en app.component.html hemos agregado la etiqueta span y la <ng-


template> para la condición como se muestra a continuación:
<span *ngIf = "isavailable;then condition1 else condition2">
Condition is valid.
</span>
<ng-template #condition1>Condition is valid from
template</ng-template>

PROFESOR: CARLOS BLANCO GÓMEZ 54


CURSO ANGULAR

<ng-template #condition2>Condition is invalid from


template</ng-template>
No vemos la etiqueta span ni tampoco la <ng-template> en la estructura dom
cuando la inspeccionamos en el navegador.
La siguiente línea de código en html nos ayudará a obtener la etiqueta span en
dom -
<!--The content below is only a placeholder and can be
replaced.-->
<div style = "text-align:center">
<h1> Welcome to {{title}}. </h1>
</div>

<div> Months :
<select (change) = "changemonths($event)" name = "month">
<option *ngFor = "let i of months">{{i}}</option>
</select>
</div>
<br/>

<div>
<span *ngIf = "isavailable; else condition2">
Condition is valid.
</span>
<ng-template #condition1>Condition is valid from template
</ng-template>
<ng-template #condition2>Condition is invalid from
template</ng-template>
</div>
<button (click) = "myClickFunction($event)">Click Me</button>
Si eliminamos la condición de entonces , obtenemos el mensaje "La condición
es válida" en el navegador y la etiqueta span también está disponible en el
dom. Por ejemplo, en app.component.ts , hemos hecho que
la variable isavailable sea verdadera.

PROFESOR: CARLOS BLANCO GÓMEZ 55


CURSO ANGULAR

Angular7 - Directivas
Directivas en Angular es una clase js, que se declara como
@directive. Tenemos 3 directivas en angular. Las directivas se enumeran a
continuación:
Directivas de componentes
Estos forman la clase principal que tiene detalles de cómo se debe procesar,
instanciar y usar el componente en tiempo de ejecución.
Directivas estructurales
Una directiva de estructura básicamente trata con la manipulación de los
elementos dom. Las directivas estructurales tienen un signo * antes de la
directiva. Por ejemplo, * ngIf y * ngFor .
Directivas de atributos
Las directivas de atributos se ocupan de cambiar el aspecto y el comportamiento
del elemento dom. Puede crear sus propias directivas como se explica en la
siguiente sección.

¿Cómo crear directivas personalizadas?


En esta sección, discutiremos sobre las Directivas personalizadas que se
utilizarán en los componentes. Las directivas personalizadas son creadas por
nosotros y no son estándar.
Veamos cómo crear la directiva personalizada. Crearemos la directiva usando
la línea de comando. El comando para crear la directiva usando la línea de
comando es el siguiente:
ng g directive nameofthedirective
e.g
ng g directive changeText
Aparece en la línea de comando como se indica en el siguiente código:
C:\projectA7\angular7-app>ng g directive changeText
CREATE src/app/change-text.directive.spec.ts (241 bytes)
CREATE src/app/change-text.directive.ts (149 bytes)
UPDATE src/app/app.module.ts (565 bytes)
Los archivos anteriores, es decir, change-text.directive.spec.ts y change-
text.directive.ts se crean y el archivo app.module.ts se actualiza.
app.module.ts
import { BrowserModule } from'@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from'./new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-
text.directive';

PROFESOR: CARLOS BLANCO GÓMEZ 56


CURSO ANGULAR

@NgModule({
declarations: [
AppComponent,
NewCmpComponent,
ChangeTextDirective
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
La clase ChangeTextDirective se incluye en las declaraciones en el archivo
anterior. La clase también se importa del archivo que figura a continuación:
change-text.directive
import { Directive } from '@angular/core';

@Directive({
selector: '[changeText]'
})
export class ChangeTextDirective {
constructor() { }
}
El archivo anterior tiene una directiva y también tiene una propiedad de
selector. Independientemente de lo que definamos en el selector, lo mismo
debe coincidir en la vista, donde asignamos la directiva personalizada.
En la vista app.component.html, agreguemos la directiva de la siguiente
manera:
<!--The content below is only a placeholder and can be
replaced.-->
<div style = "text-align:center">
<h1> Welcome to {{title}}. </h1>
</div>
<div style = "text-align:center">
<span changeText >Welcome to {{title}}.</span>
</div>
Escribiremos los cambios en el archivo change-text.directive.ts de la
siguiente manera:
change-text.directive.ts
import { Directive, ElementRef} from '@angular/core';
@Directive({
selector: '[changeText]'
})

PROFESOR: CARLOS BLANCO GÓMEZ 57


CURSO ANGULAR

export class ChangeTextDirective {


constructor(Element: ElementRef) {
console.log(Element);
Element.nativeElement.innerText = "Text is changed by
changeText Directive.";
}
}
En el archivo anterior, hay una clase llamada ChangeTextDirective y un
constructor, que toma el elemento de tipo ElementRef , que es obligatorio. El
elemento tiene todos los detalles a los que se aplica la directiva Cambiar texto .
Hemos agregado el elemento console.log. La salida de la misma se puede ver
en la consola del navegador. El texto del elemento también se cambia como se
muestra arriba.
Ahora, el navegador mostrará lo siguiente:

Los detalles del elemento en el que se proporciona el selector de directivas en


la consola. Como hemos agregado la directiva changeText a una etiqueta
span, se muestran los detalles del elemento span.

Angular7 – Pipes(tuberías)
En este capítulo, discutiremos sobre Tuberías en Angular 7. Las tuberías se
llamaron anteriormente filtros en Angular1 y se llamaron tuberías desde
Angular2 en adelante.
El | El carácter se utiliza para transformar datos. La siguiente es la sintaxis para
el mismo:
{{ Welcome to Angular 7 | lowercase}}
Toma enteros, cadenas, matrices y fecha como entrada separada con | para
convertirse en el formato requerido y mostrar lo mismo en el navegador.
Consideremos algunos ejemplos usando tuberías. Aquí, queremos mostrar el
texto dado en mayúsculas. Esto se puede hacer usando tuberías de la siguiente
manera:

PROFESOR: CARLOS BLANCO GÓMEZ 58


CURSO ANGULAR

En el archivo app.component.ts, hemos definido la variable de título de la


siguiente manera:
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7 Project!';
}
La siguiente línea de código va al archivo app.component.html :
<b>{{title | uppercase}}</b><br/>
<b>{{title | lowercase}}</b>
El navegador aparece como se muestra en la siguiente captura de pantalla:

Aquí hay algunos tubos incorporados disponibles con angular -

 Lowercasepipe
 Uppercasepipe
 Datepipe
 Currencypipe
 Jsonpipe
 Percentpipe
 Decimalpipe
 Slicepipe
Ya hemos visto las tuberías en minúsculas y mayúsculas. Veamos ahora cómo
funcionan las otras tuberías. La siguiente línea de código nos ayudará a definir
las variables requeridas en el archivo app.component.ts :
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']

PROFESOR: CARLOS BLANCO GÓMEZ 59


CURSO ANGULAR

})
export class AppComponent {
title = 'Angular 7 Project!';
todaydate = new Date();
jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai',
a2:'Karnataka'}};
months = ["Jan", "Feb", "Mar", "April", "May", "Jun",
"July", "Aug",
"Sept", "Oct", "Nov", "Dec"];
}
Usaremos las tuberías en el archivo app.component.html como se muestra a
continuación:
<!--The content below is only a placeholder and can be
replaced.-->
<div style = "width:100%;">
<div style = "width:40%;float:left;border:solid 1px
black;">
<h1>Uppercase Pipe</h1>
<b>{{title | uppercase}}</b>
<br/>

<h1>Lowercase Pipe</h1>
<b>{{title | lowercase}}</b>
<h1>Currency Pipe</h1>
<b>{{6589.23 | currency:"USD"}}</b>
<br/>

<b>{{6589.23 | currency:"USD":true}}</b>
// Boolean true is used to get the sign of the
currency.
<h1>Date pipe</h1>
<b>{{todaydate | date:'d/M/y'}}</b>
<br/>

<b>{{todaydate | date:'shortTime'}}</b>
<h1>Decimal Pipe</h1>
<b>{{ 454.78787814 | number: '3.4-4' }}</b>
// 3 is for main integer, 4 -4 are for integers to be
displayed.
</div>

<div style = "width:40%;float:left;border:solid 1px


black;"<
<h1<Json Pipe</h1>
<b>{{ jsonval | json }}</b>
<h1>Percent Pipe</h1>
<b>{{00.54565 | percent}}</b>
<h1>Slice Pipe</h1>
<b>{{months | slice:2:6}}</b>
// here 2 and 6 refers to the start and the end index
</div>

PROFESOR: CARLOS BLANCO GÓMEZ 60


CURSO ANGULAR

</div>
Las siguientes capturas de pantalla muestran la salida de cada tubería:

¿Cómo crear una tubería personalizada?


Para crear una tubería personalizada, hemos creado un nuevo archivo ts. Aquí,
queremos crear la tubería personalizada sqrt. Hemos dado el mismo nombre al
archivo y tiene el siguiente aspecto:
app.sqrt.ts
import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
name : 'sqrt'
})
export class SqrtPipe implements PipeTransform {
transform(val : number) : number {
return Math.sqrt(val);
}
}
Para crear una tubería personalizada, tenemos que importar Pipe and Pipe
Transform desde Angular / core. En la directiva @Pipe, tenemos que dar el
nombre a nuestra tubería, que se utilizará en nuestro archivo .html. Como
estamos creando la tubería sqrt, la llamaremos sqrt.
A medida que avanzamos, tenemos que crear la clase y el nombre de la clase
es SqrtPipe. Esta clase implementará PipeTransform.

PROFESOR: CARLOS BLANCO GÓMEZ 61


CURSO ANGULAR

El método de transformación definido en la clase tomará el argumento como el


número y devolverá el número después de sacar la raíz cuadrada.
Como hemos creado un nuevo archivo, necesitamos agregarlo
en app.module.ts . Esto se hace de la siguiente manera:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-
cmp.component';
import { ChangeTextDirective } from './change-
text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Hemos creado la clase app.sqrt.ts. Tenemos que importar lo mismo
en app.module.ts y especificar la ruta del archivo. También debe incluirse en
las declaraciones como se muestra arriba.
Veamos ahora la llamada realizada a la tubería sqrt en
el archivo app.component.html .
<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b>
<br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>
A continuación se muestra la salida:

PROFESOR: CARLOS BLANCO GÓMEZ 62


CURSO ANGULAR

Angular7 - Enrutamiento
Enrutar básicamente significa navegar entre páginas. Has visto muchos sitios
con enlaces que te dirigen a una nueva página. Esto se puede lograr mediante
el enrutamiento. Aquí las páginas a las que nos referimos estarán en forma de
componentes. Ya hemos visto cómo crear un componente. Ahora creemos un
componente y veamos cómo usar el enrutamiento con él.
Durante la configuración del proyecto, ya hemos incluido el módulo de
enrutamiento y el mismo está disponible en app.module.ts como se muestra a
continuación:
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-
cmp.component';
import { ChangeTextDirective } from './change-
text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]

PROFESOR: CARLOS BLANCO GÓMEZ 63


CURSO ANGULAR

})
export class AppModule { }
AppRoutingModule se agrega como se muestra arriba y se incluye en la matriz
de importaciones.
Los detalles del archivo de app-routing.module se proporcionan a
continuación:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];


@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [RouterModule]
})
export class AppRoutingModule { }
Aquí, debemos tener en cuenta que este archivo se genera de forma
predeterminada cuando se agrega el enrutamiento durante la configuración del
proyecto. Si no se agrega, los archivos anteriores deben agregarse
manualmente.
Entonces, en el archivo anterior, hemos importado Rutas y RouterModule de @
angular / router.
Hay una ruta constante definida que es de tipo Rutas. Es una matriz que
contiene todas las rutas que necesitamos en nuestro proyecto.
Las rutas constantes se dan al RouterModule como se muestra en
@NgModule. Para mostrar los detalles de enrutamiento al usuario, necesitamos
agregar la directiva <router-outlet> donde queremos que se muestre la vista.
Lo mismo se agrega en app.component.html como se muestra a continuación
<h1>Angular 7 Routing Demo</h1>
<router-outlet></router-outlet>
Ahora permítanos crear 2 componentes llamados como Inicio y Contáctenos y
navegar entre ellos usando enrutamiento.

Inicio de componentes
Primero, discutiremos sobre el hogar. La siguiente es la sintaxis para
Component Home:
ng g component home
C:\projectA7\angular7-app>ng g component home CREATE
src/app/home/home.component.html (23 bytes) CREATE
src/app/home/home.component.spec.ts (614 bytes) CREATE
src/app/home/home.component.ts (261 bytes) CREATE
src/app/home/home.component.css (0 bytes) UPDATE

PROFESOR: CARLOS BLANCO GÓMEZ 64


CURSO ANGULAR

src/app/app.module.ts (692 bytes)


Componente Contáctenos
La siguiente es la sintaxis para Componente Contáctenos:
ng g component contactus
C:\projectA7\angular7-app>ng g component contactus
CREATE src/app/contactus/contactus.component.html (28 bytes)
CREATE src/app/contactus/contactus.component.spec.ts (649
bytes)
CREATE src/app/contactus/contactus.component.ts (281 bytes)
CREATE src/app/contactus/contactus.component.css (0 bytes)
UPDATE src/app/app.module.ts (786 bytes)
Hemos terminado con la creación de componentes para el hogar y
contáctenos. A continuación se muestran los detalles de los componentes en
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-
cmp.component';
import { ChangeTextDirective } from './change-
text.directive';
import { SqrtPipe } from './app.sqrt';
import { HomeComponent } from './home/home.component';
import { ContactusComponent } from
'./contactus/contactus.component';

@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective,
HomeComponent,
ContactusComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Ahora agreguemos los detalles de las rutas en app-routing.module .ts como
se muestra a continuación:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

PROFESOR: CARLOS BLANCO GÓMEZ 65


CURSO ANGULAR

import { HomeComponent } from './home/home.component';


import { ContactusComponent } from
'./contactus/contactus.component';

const routes: Routes = [


{path:"home", component:HomeComponent},
{path:"contactus", component:ContactusComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
La matriz de rutas tiene los detalles del componente con ruta y componente. El
componente requerido se importa como se muestra arriba.
Aquí, debemos notar que los componentes que necesitamos para el
enrutamiento se importan en app.module.ts y también en app-
routing.module.ts. Vamos a importarlos en un solo lugar, es decir, en app-
routing.module.ts.
Por lo tanto, crearemos una matriz de componentes que se utilizará para el
enrutamiento y exportaremos la matriz en app-routing.module.ts y nuevamente
la importaremos en app.module.ts. Así que tenemos todos los componentes
que se utilizarán para el enrutamiento en app-routing.module.ts.
Así es como lo hemos hecho app-routing.module.ts -
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ContactusComponent } from
'./contactus/contactus.component';

const routes: Routes = [


{path:"home", component:HomeComponent},
{path:"contactus", component:ContactusComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { } export const
RoutingComponent = [HomeComponent,ContactusComponent];
La matriz de componentes, es decir, RoutingComponent se importa en
app.module.ts de la siguiente manera:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-
routing.module';
import { AppComponent } from './app.component';

PROFESOR: CARLOS BLANCO GÓMEZ 66


CURSO ANGULAR

import { NewCmpComponent } from './new-cmp/new-


cmp.component';
import { ChangeTextDirective } from './change-
text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective,
RoutingComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Así que ahora hemos terminado de definir las rutas. Necesitamos mostrar lo
mismo al usuario, así que agreguemos dos botones, Inicio y Contáctenos en
app.component.html y al hacer clic en los botones respectivos, mostrará la vista
de componentes dentro de la directiva <router-outlet> que he agregado en
add.component.html.
Cree el botón dentro de app.component.html y proporcione la ruta a las rutas
creadas.
app.component.html
<h1>Angular 7 Routing Demo</h1>
<nav>
<a routerLink = "/home">Home</a>
<a routerLink = "/contactus">Contact Us </a>
</nav>
<router-outlet></router-outlet>
En .html, agregamos enlaces de anclaje, Inicio y Contáctenos y usamos
routerLink para dar la ruta a las rutas que hemos creado en app-
routing.module.ts.
Probemos ahora lo mismo en el navegador:

PROFESOR: CARLOS BLANCO GÓMEZ 67


CURSO ANGULAR

Así es como lo conseguimos en el navegador. Agreguemos un poco de estilo


para que los enlaces se vean bien.
Hemos agregado los siguientes css en app.component.css -
a:link, a:visited {
background-color: #848686;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: #BD9696;
}
Esta es la visualización de los enlaces en el navegador:

Haga clic en el enlace Inicio para ver los detalles de los componentes de inicio
como se muestra a continuación:

PROFESOR: CARLOS BLANCO GÓMEZ 68


CURSO ANGULAR

Haga clic en Contáctenos para ver los detalles de sus componentes como se
muestra a continuación:

PROFESOR: CARLOS BLANCO GÓMEZ 69


CURSO ANGULAR

Al hacer clic en el enlace, también verá el cambio de la URL de la página en la


barra de direcciones. Agrega los detalles de la ruta al final de la página como
se ve en la captura de pantalla que se muestra arriba.

Angular7 - Servicios
Podríamos encontrarnos con una situación en la que necesitamos algún código
para usar en todas partes de la página. Por ejemplo, puede ser para una
conexión de datos que debe compartirse entre componentes. Esto se logra con
la ayuda de los Servicios. Con los servicios, podemos acceder a métodos y
propiedades a través de otros componentes en todo el proyecto.
Para crear un servicio, necesitamos utilizar la línea de comando como se
muestra a continuación:
ng g service myservice
C:\projectA7\angular7-app>ng g service myservice
CREATE src/app/myservice.service.spec.ts (348 bytes)
CREATE src/app/myservice.service.ts (138 bytes)
Los archivos creados en la carpeta de la aplicación son los siguientes:

PROFESOR: CARLOS BLANCO GÓMEZ 70


CURSO ANGULAR

Los siguientes son los archivos creados que se muestran en la parte inferior:
myservice.service.specs.ts y myservice.service.ts.
myservice.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MyserviceService {
constructor() { }
}
Aquí, el módulo inyectable se importa desde @ angular / core. Contiene el
método @Injectable y una clase llamada MyserviceService. Crearemos nuestra
función de servicio en esta clase.
Antes de crear un nuevo servicio, es necesario incluir el servicio creado en las
principales matrices app.module.ts .
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-
routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-
cmp.component';
import { ChangeTextDirective } from './change-
text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';

@NgModule({
declarations: [

PROFESOR: CARLOS BLANCO GÓMEZ 71


CURSO ANGULAR

SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective,
RoutingComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [MyserviceService],
bootstrap: [AppComponent]
})
export class AppModule { }
Hemos importado el Servicio con el nombre de la clase, y la misma clase se usa
en los proveedores. Ahora volvamos a la clase de servicio y creemos una
función de servicio.
En la clase de servicio, crearemos una función que mostrará la fecha de
hoy. Podemos usar la misma función en el componente principal principal
app.component.ts y también en el nuevo componente new-cmp.component.ts
que creamos en el capítulo anterior.
Veamos ahora cómo se ve la función en el servicio y cómo usarla en los
componentes.
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MyserviceService {
constructor() { }
showTodayDate() {
let ndate = new Date();
return ndate;
}
}
En el archivo de servicio anterior, hemos creado una
función showTodayDate . Ahora devolveremos la nueva Fecha ()
creada. Veamos cómo podemos acceder a esta función en la clase de
componente.
app.component.ts
import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({ selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7 Project!';

PROFESOR: CARLOS BLANCO GÓMEZ 72


CURSO ANGULAR

todaydate;
constructor(private myservice: MyserviceService) {}
ngOnInit() {
this.todaydate = this.myservice.showTodayDate();
}
}
La función ngOnInit se llama por defecto en cualquier componente creado. La
fecha se obtiene del servicio como se muestra arriba. Para obtener más detalles
del servicio, primero debemos incluir el servicio en el archivo ts del componente.
Mostraremos la fecha en el archivo .html como se muestra a continuación:
app.component.html
{{todaydate}}
<app-new-cmp></app-new-cmp>
Veamos ahora cómo usar el servicio en el nuevo componente creado.
new-cmp.component.ts
import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';

@Component({
selector: 'app-new-cmp',
templateUrl: './new-cmp.component.html',
styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
newcomponent = "Entered in new component created";
todaydate;
constructor(private myservice: MyserviceService) { }
ngOnInit() {
this.todaydate = this.myservice.showTodayDate();
}
}
En el nuevo componente que hemos creado, primero debemos importar el
servicio que queremos y acceder a los métodos y propiedades del
mismo. Verifique el código resaltado. todaydate se muestra en el componente
html de la siguiente manera:
new-cmp.component.html
<p>
{{newcomponent}}
</p>
<p>
Today's Date : {{todaydate}}
</p>
El selector del nuevo componente se utiliza en el archivo
app.component.html. El contenido del archivo html anterior se mostrará en el
navegador como se muestra a continuación:

PROFESOR: CARLOS BLANCO GÓMEZ 73


CURSO ANGULAR

Si cambia la propiedad del servicio en cualquier componente, lo mismo cambia


también en otros componentes. Veamos ahora cómo funciona esto.
Definiremos una variable en el servicio y la usaremos en el componente
principal y en el nuevo componente. Nuevamente cambiaremos la propiedad en
el componente principal y veremos si la misma se cambia en el nuevo
componente o no.
En myservice.service.ts , hemos creado una propiedad y la hemos utilizado
en otro componente primario y nuevo componente.
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MyserviceService {
serviceproperty = "Service Created";
constructor() { }
showTodayDate() {
let ndate = new Date();
return ndate;
}
}
Ahora usemos la variable serviceproperty en otros
componentes. En app.component.ts , estamos accediendo a la variable de la
siguiente manera:
import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7 Project!';
todaydate;
componentproperty;
constructor(private myservice: MyserviceService) {}
ngOnInit() {
this.todaydate = this.myservice.showTodayDate();

PROFESOR: CARLOS BLANCO GÓMEZ 74


CURSO ANGULAR

console.log(this.myservice.serviceproperty);
this.myservice.serviceproperty = "component created";
// value is changed. this.componentproperty =
this.myservice.serviceproperty;
}
}
Ahora buscaremos la variable y trabajaremos en console.log. En la siguiente
línea, cambiaremos el valor de la variable a "componente creado". Haremos lo
mismo en new-cmp.component.ts.
import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';
@Component({
selector: 'app-new-cmp',
templateUrl: './new-cmp.component.html',
styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
todaydate;
newcomponentproperty; newcomponent = "Entered in
newcomponent"; constructor(private myservice:
MyserviceService) {}
ngOnInit() {
this.todaydate = this.myservice.showTodayDate();
this.newcomponentproperty =
this.myservice.serviceproperty;
}
}
En el componente anterior, no estamos cambiando nada, sino asignando
directamente la propiedad a la propiedad del componente.
Ahora, cuando lo ejecute en el navegador, la propiedad del servicio cambiará
ya que su valor se cambia en app.component.ts y lo mismo se mostrará para
new-cmp.component.ts.
También verifique el valor en la consola antes de cambiarlo.

PROFESOR: CARLOS BLANCO GÓMEZ 75


CURSO ANGULAR

Aquí están los archivos app.component.html y new-cmp.component.html:


app.component.html
<h3>{{todaydate}}>/h3>
<h3> Service Property : {{componentproperty}} </h3>
<app-new-cmp></app-new-cmp>
new-cmp.component.html
<h3>{{newcomponent}} </h3>
<h3> Service Property : {{newcomponentproperty}} </h3>
<h3> Today's Date : {{todaydate}} </h3>

Angular7 - Cliente HTTP


HttpClient nos ayudará a obtener datos externos, publicarlos, etc. Necesitamos
importar el módulo http para hacer uso del servicio http. Consideremos un
ejemplo para comprender cómo hacer uso del servicio http.
Para comenzar a usar el servicio http, necesitamos importar el módulo en
app.module.ts como se muestra a continuación:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-
routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-
cmp.component';
import { ChangeTextDirective } from './change-
text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';

@NgModule({

PROFESOR: CARLOS BLANCO GÓMEZ 76


CURSO ANGULAR

declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective,
RoutingComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [MyserviceService],
bootstrap: [AppComponent]
})
export class AppModule { }
Si ve el código resaltado, hemos importado el HttpClientModule de @ angular
/ common / http y lo mismo también se agrega en la matriz de importaciones.
Obtendremos los datos del servidor utilizando el módulo httpclient declarado
anteriormente. Lo haremos dentro de un servicio que creamos en el capítulo
anterior y utilizaremos los datos dentro de los componentes que queramos.
myservice.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class MyserviceService {
private finaldata = [];
private apiurl =
"http://jsonplaceholder.typicode.com/users";
constructor(private http: HttpClient) { }
getData() {
return this.http.get(this.apiurl);
}
}
Hay un método agregado llamado getData que devuelve los datos obtenidos
para la url dada.
El método getData se llama desde app.component.ts de la siguiente manera:
import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {

PROFESOR: CARLOS BLANCO GÓMEZ 77


CURSO ANGULAR

title = 'Angular 7 Project!';


public persondata = [];
constructor(private myservice: MyserviceService) {}
ngOnInit() {
this.myservice.getData().subscribe((data) => {
this.persondata = Array.from(Object.keys(data),
k=>data[k]);
console.log(this.persondata);
});
}
}
Estamos llamando al método getData que devuelve un tipo de datos
observables. Se utiliza el método de suscripción que tiene una función de flecha
con los datos que necesitamos.
Cuando revisamos el navegador, la consola muestra los datos como se muestra
a continuación:

Usemos los datos en app.component.html de la siguiente manera:


<h3>Users Data</h3>
<ul>
<li *ngFor="let item of persondata; let i = index"<
{{item.name}}
</li>
</ul>
Salida

PROFESOR: CARLOS BLANCO GÓMEZ 78


CURSO ANGULAR

Angular7: indicaciones de la CLI


Angular CLI hace que sea fácil comenzar con cualquier proyecto
angular. Angular CLI viene con comandos que nos ayudan a crear y comenzar
nuestro proyecto muy rápido. Veamos ahora los comandos disponibles para
crear un proyecto, un componente y servicios, cambiar el puerto, etc.
Para trabajar con CLI angular, necesitamos tenerlo instalado en nuestro
sistema. Usemos el siguiente comando para el mismo:
npm install -g @angular/cli
Para crear un nuevo proyecto, podemos ejecutar el siguiente comando en la
línea de comando y se creará el proyecto.
ng new PROJECT-NAME
cd PROJECT-NAME
ng serve //
ng serve // se compilará y podrá ver el resultado de su proyecto en el
navegador:
http://localhost:4200/
4200 es el puerto predeterminado utilizado cuando se crea un nuevo
proyecto. Puede cambiar el puerto con el siguiente comando:
ng serve --host 0.0.0.0 --port 4201

Comando para actualización angular


En caso de que desee actualizar su aplicación y sus dependencias, puede usar
el siguiente comando:
ng update @angular/cli @angular/core

PROFESOR: CARLOS BLANCO GÓMEZ 79


CURSO ANGULAR

Actualizará el framework central a la versión reciente, es decir, Angular 7 y


también angular-cli. Puede usar el comando anterior con las siguientes
opciones:

Lista de comandos importantes angulares


La siguiente tabla enumera algunos comandos importantes necesarios mientras
se trabaja con proyectos de Angular 7:
No Señor Comandos y descripción

1
Component
ng g componente nuevo componente
2
Directive
ng g directiva nueva directiva
3
Pipe
ng g pipe tubería nueva
4
Service
ng g service nuevo servicio
5
Módule
ng g módulo my-module
6
Test
ng prueba
7
Build
ng build --configuration = production // para el entorno de producción
ng build --configuration = puesta en escena // para indicar el entorno

Cada vez que se crea un nuevo módulo, un componente o un servicio, la


referencia del mismo se actualiza en el módulo principal app.module.ts .

Angular7 - Formularios

En este capítulo, veremos cómo se usan los formularios en Angular 7.


Discutiremos dos formas de trabajar con formularios:

 Formulario dirigido por plantilla


 Modelo de forma impulsada

Formulario impulsado por plantilla


PROFESOR: CARLOS BLANCO GÓMEZ 80
CURSO ANGULAR

Con un formulario basado en plantillas, la mayor parte del trabajo se realiza en


la plantilla. Con la forma dirigida por el modelo, la mayor parte del trabajo se
realiza en la clase de componente.
Consideremos ahora trabajar en el formulario basado en plantilla. Crearemos
un formulario de inicio de sesión simple y agregaremos la identificación de
correo electrónico, la contraseña y el botón de enviar en el formulario. Para
empezar, necesitamos importar a FormsModule desde @ angular / forms, que
se realiza en app.module.ts de la siguiente manera:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-
routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-
cmp.component';
import { ChangeTextDirective } from './change-
text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from
'@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { FormsModule } from '@angular/forms';

@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective,
RoutingComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ScrollDispatchModule,
DragDropModule,
FormsModule
],
providers: [MyserviceService],
bootstrap: [AppComponent]
})
export class AppModule { }
Entonces, en app.module.ts , hemos importado el FormsModule y lo mismo
se agrega en la matriz de importaciones como se muestra en el código
resaltado.
Creemos ahora nuestro formulario en el archivo app.component.html .

PROFESOR: CARLOS BLANCO GÓMEZ 81


CURSO ANGULAR

<form #userlogin = "ngForm" (ngSubmit) =


"onClickSubmit(userlogin.value)">
<input type = "text" name = "emailid" placeholder =
"emailid" ngModel>
<br/>
<input type = "password" name = "passwd" placeholder =
"passwd" ngModel>
<br/>
<input type = "submit" value = "submit">
</form>
Hemos creado un formulario simple con etiquetas de entrada con ID de correo
electrónico, contraseña y el botón de enviar. Le hemos asignado tipo, nombre y
marcador de posición.
En los formularios basados en plantillas, necesitamos crear los controles de
formulario modelo agregando la directiva ngModel y el atributo
de nombre . Por lo tanto, donde queramos que Angular acceda a nuestros
datos desde los formularios, agregue ngModel a esa etiqueta como se muestra
arriba. Ahora, si tenemos que leer el emailid y passwd, necesitamos agregar el
ngModel a través de él.
Si ve, también hemos agregado el ngForm
al #userlogin . La directiva ngForm debe agregarse a la plantilla de formulario
que hemos creado. También hemos agregado la función onClickSubmit y
le hemos asignado userlogin.value .
Creemos ahora la función en app.component.ts y obtengamos los valores
ingresados en el formulario.
import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7 Project!';
constructor(private myservice: MyserviceService) { }
ngOnInit() { }
onClickSubmit(data) {
alert("Entered Email id : " + data.emailid);
}
}
En el archivo app.component.ts anterior, hemos definido la función
onClickSubmit. Cuando hace clic en el botón de envío del formulario, el control
pasará a la función anterior.
El css para el formulario de inicio de sesión se agrega en app.component.css -
input[type = text], input[type = password] {

PROFESOR: CARLOS BLANCO GÓMEZ 82


CURSO ANGULAR

width: 40%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #B3A9A9;
box-sizing: border-box;
}
input[type = submit] {
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #B3A9A9;
box-sizing: border-box;
}
Así se muestra el navegador:

El formulario se ve como se muestra a continuación. Permítanos ingresar los


datos en él y en la función de envío, se alerta la identificación del correo
electrónico como se muestra a continuación:

Modelo impulsado por la forma


En el formulario dirigido por el modelo, necesitamos importar el
ReactiveFormsModule desde @ angular / forms y usarlo en la matriz de
importaciones.
Hay un cambio que va en app.module.ts .

PROFESOR: CARLOS BLANCO GÓMEZ 83


CURSO ANGULAR

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


import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-
routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-
cmp.component';
import { ChangeTextDirective } from './change-
text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from
'@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective,
RoutingComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ScrollDispatchModule,
DragDropModule,
ReactiveFormsModule
],
providers: [MyserviceService],
bootstrap: [AppComponent]
})
export class AppModule { }
En app.component.ts , necesitamos importar algunos módulos para el
formulario controlado por modelo. Por ejemplo, importe {FormGroup,
FormControl} desde ' @ angular / forms '.
import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import { FormGroup, FormControl } from '@angular/forms';

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

PROFESOR: CARLOS BLANCO GÓMEZ 84


CURSO ANGULAR

emailid;
formdata;
constructor(private myservice: MyserviceService) { }
ngOnInit() {
this.formdata = new FormGroup({
emailid: new FormControl("angular@gmail.com"),
passwd: new FormControl("abcd1234")
});
}
onClickSubmit(data) {this.emailid = data.emailid;}
}
Los datos de formulario variable se inicializan al comienzo de la clase y lo mismo
se inicializa con FormGroup como se muestra arriba. Las variables emailid y
passwd se inicializan con valores predeterminados que se mostrarán en el
formulario. Puede mantenerlo en blanco en caso de que lo desee.
Así es como se verán los valores en la forma UI.

Hemos utilizado formdata para inicializar los valores del formulario; necesitamos
usar el mismo en el formulario UI app.component.html .
<div>
<form [formGroup] = "formdata" (ngSubmit) =
"onClickSubmit(formdata.value)" >
<input type = "text" class = "fortextbox" name =
"emailid" placeholder = "emailid"
formControlName = "emailid">
<br/>

<input type = "password" class = "fortextbox" name =


"passwd"
placeholder = "passwd" formControlName = "passwd">
<br/>

<input type = "submit" class = "forsubmit" value = "Log


In">
</form>
</div>
<p> Email entered is : {{emailid}} </p>

PROFESOR: CARLOS BLANCO GÓMEZ 85


CURSO ANGULAR

En el archivo .html, hemos usado formGroup en corchete para el formulario; por


ejemplo, [formGroup] = "formdata". Al enviar, la función se
llama onClickSubmit para la cual se pasa formdata.value .
Se usa la etiqueta de entrada formControlName . Se le asigna un valor que
hemos usado en el archivo app.component.ts .
Al hacer clic en enviar, el control pasará a la función onClickSubmit , que se
define en el archivo app.component.ts .

Al hacer clic en Iniciar sesión, el valor se mostrará como se muestra en la


captura de pantalla anterior.

Validación de formulario
Analicemos ahora la validación de formularios utilizando el formulario basado
en modelos. Puede usar la validación de formulario incorporada o también usar
el enfoque de validación personalizado. Utilizaremos ambos enfoques en el
formulario. Continuaremos con el mismo ejemplo que creamos en una de
nuestras secciones anteriores. Con Angular 7, necesitamos
importar Validadores desde @ angular / formas como se muestra a
continuación:
import { FormGroup, FormControl, Validators} from
'@angular/forms'
Angular tiene validadores integrados como campo obligatorio , longitud
mínima , longitud máxima y patrón . Se debe acceder a ellos utilizando el
módulo Validadores.
Simplemente puede agregar validadores o una serie de validadores necesarios
para decirle a Angular si un campo en particular es obligatorio. Probemos ahora
lo mismo en uno de los cuadros de texto de entrada, es decir, ID de correo
electrónico. Para la identificación del correo electrónico, hemos agregado los
siguientes parámetros de validación:

 Necesario

PROFESOR: CARLOS BLANCO GÓMEZ 86


CURSO ANGULAR

 La coincidencia de patrones
Así es como se valida un código en app.component.ts .
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from
'@angular/forms';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4 Project!';
todaydate;
componentproperty;
emailid;
formdata;
ngOnInit() {
this.formdata = new FormGroup({
emailid: new FormControl("", Validators.compose([
Validators.required,
Validators.pattern("[^ @]*@[^ @]*")
])),
passwd: new FormControl("")
});
}
onClickSubmit(data) {this.emailid = data.emailid;}
}
En Validators.compose , puede agregar la lista de cosas que desea validar en
el campo de entrada. En este momento, hemos agregado
los parámetros necesarios y los parámetros de coincidencia de
patrones para tomar solo correos electrónicos válidos.
En app.component.html , el botón enviar está deshabilitado si alguna de las
entradas del formulario no es válida. Esto se hace de la siguiente manera:
<div>
<form [formGroup] = "formdata" (ngSubmit) =
"onClickSubmit(formdata.value)">
<input type = "text" class = "fortextbox" name =
"emailid"
placeholder = "emailid" formControlName = "emailid">
<br/>

<input type = "password" class = "fortextbox" name =


"passwd"
placeholder = "passwd" formControlName = "passwd">
<br/>

<input type = "submit" [disabled] = "!formdata.valid"


class = "forsubmit"

PROFESOR: CARLOS BLANCO GÓMEZ 87


CURSO ANGULAR

value = "Log In">


</form>
</div>
<p> Email entered is : {{emailid}} </p>
Para el botón Enviar, hemos agregado deshabilitado en el corchete, al que se
le da el siguiente valor.
!formdata.valid.
Por lo tanto, si formdata.valid no es válido, el botón permanecerá deshabilitado
y el usuario no podrá enviarlo.
Veamos cómo funciona esto en el navegador:

En el caso anterior, la identificación de correo electrónico ingresada no es


válida, por lo tanto, el botón de inicio de sesión está deshabilitado. Intentemos
ahora ingresar la identificación de correo electrónico válida y ver la diferencia.

Ahora, la identificación de correo electrónico ingresada es válida. Por lo tanto,


podemos ver que el botón de inicio de sesión está habilitado y el usuario podrá

PROFESOR: CARLOS BLANCO GÓMEZ 88


CURSO ANGULAR

enviarlo. Con esto, la identificación de correo electrónico ingresada se muestra


en la parte inferior.
Probemos ahora la validación personalizada con el mismo formulario. Para la
validación personalizada, podemos definir nuestra propia función personalizada
y agregarle los detalles necesarios. Ahora veremos el siguiente ejemplo para el
mismo.
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from
'@angular/forms';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7 Project!';
todaydate;
componentproperty;
emailid;
formdata;
ngOnInit() {
this.formdata = new FormGroup({
emailid: new FormControl("", Validators.compose([
Validators.required,
Validators.pattern("[^ @]*@[^ @]*")
])),
passwd: new FormControl("", this.passwordvalidation)
});
}
passwordvalidation(formcontrol) {
if (formcontrol.value.length < 5) {
return {"passwd" : true};
}
}
onClickSubmit(data) {this.emailid = data.emailid;}
}
En el ejemplo anterior, hemos creado una función de validación
de contraseña y la misma se utiliza en una sección anterior en formcontrol
- passwd: new FormControl ("", this.passwordvalidation) .
En la función que hemos creado, verificaremos si la longitud de los caracteres
ingresados es adecuada. Si los caracteres son menores de cinco, regresará con
passwd true como se muestra arriba - return {"passwd": true}; Si los caracteres
son más de cinco, lo considerará válido y se habilitará el inicio de sesión.
Veamos ahora cómo se muestra esto en el navegador:

PROFESOR: CARLOS BLANCO GÓMEZ 89


CURSO ANGULAR

Hemos ingresado solo tres caracteres en la contraseña y el inicio de sesión está


deshabilitado. Para habilitar el inicio de sesión, necesitamos más de cinco
caracteres. Permítanos ahora ingresar una longitud válida de caracteres y
verificar.

El inicio de sesión está habilitado ya que tanto la identificación del correo


electrónico como la contraseña son válidas. El correo electrónico se muestra en
la parte inferior cuando iniciamos sesión.

Angular7 - Materiales / CDK-


Desplazamiento virtual
Esta es una de las nuevas características agregadas a Angular 7 llamada Virtual
Scrolling. Esta característica se agrega a CDK (Kit de desarrollo de
componentes). El desplazamiento virtual muestra los elementos dom visibles al
usuario, a medida que el usuario se desplaza, se muestra la siguiente lista. Esto
proporciona una experiencia más rápida ya que la lista completa no se carga de
una vez y solo se carga según la visibilidad en la pantalla.

PROFESOR: CARLOS BLANCO GÓMEZ 90


CURSO ANGULAR

¿Por qué necesitamos el módulo de desplazamiento


virtual?
Considere que tiene una interfaz de usuario que tiene una gran lista donde
cargar todos los datos juntos puede tener problemas de rendimiento. La nueva
característica de Angular 7 Virtual Scrolling se encarga de cargar los elementos
que son visibles para el usuario. A medida que el usuario se desplaza, se
muestra la siguiente lista de elementos dom visibles para el usuario. Esto
proporciona una experiencia más rápida y el desplazamiento también es muy
suave.
Agreguemos la dependencia a nuestro proyecto:
npm install @angular/cdk –save

Hemos terminado con la instalación de la dependencia para el módulo de


desplazamiento virtual.
Trabajaremos en un ejemplo para comprender mejor cómo podemos usar el
módulo de desplazamiento virtual en nuestro proyecto.
Primero agregaremos el módulo de desplazamiento virtual dentro
de app.module.ts de la siguiente manera:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-
routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-
cmp.component';
import { ChangeTextDirective } from './change-
text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';

PROFESOR: CARLOS BLANCO GÓMEZ 91


CURSO ANGULAR

import { HttpClientModule } from '@angular/common/http';


import { ScrollDispatchModule } from
'@angular/cdk/scrolling';

@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective,
RoutingComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ScrollDispatchModule
],
providers: [MyserviceService],
bootstrap: [AppComponent]
})
export class AppModule { }
En app.module.ts, hemos importado ScrollDispatchModule y lo mismo se
agrega a la matriz de importaciones como se muestra en el código anterior.
El siguiente paso es obtener los datos que se mostrarán en la
pantalla. Continuaremos usando el servicio que creamos en el último capítulo.
Obtendremos datos de la
URL, https://jsonplaceholder.typicode.com/photos , que tiene datos para
alrededor de 5000 imágenes. Obtendremos los datos y los mostraremos al
usuario utilizando el módulo de desplazamiento virtual.
Los detalles en la url, https://jsonplaceholder.typicode.com/photos son los
siguientes:

PROFESOR: CARLOS BLANCO GÓMEZ 92


CURSO ANGULAR

Son los datos json los que tienen url de imagen y url de miniatura. Mostraremos
la URL en miniatura a los usuarios.
El siguiente es el servicio que buscará datos:
myservice.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
providedIn: 'root'
})
export class MyserviceService {
private finaldata = [];
private apiurl =
"https://jsonplaceholder.typicode.com/photos";
constructor(private http: HttpClient) { }

PROFESOR: CARLOS BLANCO GÓMEZ 93


CURSO ANGULAR

getData() {
return this.http.get(this.apiurl);
}
}
Llamaremos al servicio desde app.component.ts de la siguiente manera:
import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7 Project!';
public albumdetails = [];
constructor(private myservice: MyserviceService) {}
ngOnInit() {
this.myservice.getData().subscribe((data) => {
this.albumdetails = Array.from(Object.keys(data),
k=>data[k]);
console.log(this.albumdetails);
});
}
}
Ahora la variable albumdetails tiene todos los datos de la API y el recuento
total es 5000.
Ahora que tenemos los datos listos para mostrarse, trabajemos dentro de
app.component.html para mostrar los datos.
Necesitamos agregar la etiqueta, <cdk-virtual-scroll-viewport> </cdk-virtual-
scroll-viewport> para trabajar con el módulo de desplazamiento virtual. La
etiqueta debe agregarse al archivo .html donde queremos que se muestren los
datos.
Aquí está el trabajo de <cdk-virtual-scroll-viewport> en app.component.html.
<h3>Angular 7 - Virtual Scrolling</h3>
<cdk-virtual-scroll-viewport [itemSize] = "20">
<table>
<thead>
<tr>
<td>ID</td>
<td>ThumbNail</td>
</tr>
</thead>
<tbody>
<tr *cdkVirtualFor = "let album of albumdetails">
<td>{{album.id}}</td>
<td>

PROFESOR: CARLOS BLANCO GÓMEZ 94


CURSO ANGULAR

<img src = "{{album.thumbnailUrl}}" width =


"100" height = "100"/>
</td>
</tr>
</tbody>
</table>
</cdk-virtual-scroll-viewport>
Estamos mostrando la identificación y la URL en miniatura al usuario en la
pantalla. Hemos utilizado principalmente * ngFor hasta ahora, pero dentro
de <cdk-virtual-scroll-viewport> , tenemos que usar * cdkVirtualFor para
recorrer los datos.
Estamos recorriendo la variable albumdetails que se completa dentro de
app.component.html. Hay un tamaño asignado a la etiqueta virtual [itemSize] =
"20" que mostrará el número de elementos en función de la altura del módulo
de desplazamiento virtual.
El CSS relacionado con el módulo de desplazamiento virtual es el siguiente:
table {
width: 100%;
}
cdk-virtual-scroll-viewport {
height: 500px;
}
La altura dada al desplazamiento virtual es de 500 px. Las imágenes que se
ajusten a esa altura se mostrarán al usuario. Hemos terminado de agregar el
código necesario para ver nuestro módulo de desplazamiento virtual.
La salida del módulo de desplazamiento virtual en el navegador es la siguiente:

PROFESOR: CARLOS BLANCO GÓMEZ 95


CURSO ANGULAR

Podemos ver las primeras 4 imágenes que se muestran al usuario. Hemos


especificado la altura de 500 px. Se muestra un desplazamiento para la tabla, a
medida que el usuario se desplaza, las imágenes que se ajustarán a esa altura
se mostrarán como se muestra a continuación:

PROFESOR: CARLOS BLANCO GÓMEZ 96


CURSO ANGULAR

Las imágenes requeridas se cargan a medida que el usuario se desplaza. Esta


característica es muy útil en términos de rendimiento. Al principio, no carga
todas las 5000 imágenes, sino que a medida que el usuario se desplaza, se
llaman y se muestran las URL.

Angular7 - Materiales / CDK-Arrastrar y


soltar
La nueva función de arrastrar y soltar agregada a Angular 7 CDK ayuda a
arrastrar y soltar los elementos de la lista. Entenderemos el funcionamiento del
módulo de arrastrar y soltar con la ayuda de un ejemplo. La función se agrega
a cdk. Primero debemos descargar la dependencia como se muestra a
continuación:
npm install @angular/cdk --save

PROFESOR: CARLOS BLANCO GÓMEZ 97


CURSO ANGULAR

Una vez que se realiza el paso anterior. Importemos el módulo de arrastrar y


soltar en app.module.ts como se muestra a continuación:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-
routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-
cmp.component';
import { ChangeTextDirective } from './change-
text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from
'@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective,
RoutingComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ScrollDispatchModule,
DragDropModule
],

PROFESOR: CARLOS BLANCO GÓMEZ 98


CURSO ANGULAR

providers: [MyserviceService],
bootstrap: [AppComponent]
})
export class AppModule { }
DragDropModule se importa desde '@ angular / cdk / drag-drop' y el módulo
se agrega a la matriz de importación como se muestra arriba.
Utilizaremos los detalles de la
API (http://jsonplaceholder.typicode.com/users) para que se muestren en la
pantalla. Tenemos un servicio que obtendrá los datos de la API como se
muestra a continuación:
myservice.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
providedIn: 'root'
})
export class MyserviceService {
private finaldata = [];
private apiurl =
"http://jsonplaceholder.typicode.com/users";
constructor(private http: HttpClient) { }
getData() {
return this.http.get(this.apiurl);
}
}
Una vez hecho esto, llame al servicio dentro de app.component.ts como se
muestra a continuación:
import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7 Project!';
public personaldetails = [];
constructor(private myservice: MyserviceService) {}
ngOnInit() {
this.myservice.getData().subscribe((data) => {
this.personaldetails = Array.from(Object.keys(data),
k=>data[k]);
console.log(this.personaldetails);
});
}

PROFESOR: CARLOS BLANCO GÓMEZ 99


CURSO ANGULAR

}
Tenemos los datos requeridos disponibles en la variable personaldetails. Ahora
usemos lo mismo para mostrar al usuario como se muestra a continuación:
<h3>Angular 7 - Drag and Drop Module</h3>
<div>
<div *ngFor="let item of personaldetails; let i = index"
class="divlayout”>
{{item.name}}
</div >
</div>
Hemos agregado class = "divlayout" y los detalles de la clase están en
app.component.css.
.divlayout{
width: 40%;
background-color: #ccc;
margin-bottom: 5px;
padding: 10px 10px;
border: 3px solid #73AD21;
}
La siguiente pantalla se mostrará en el navegador:

PROFESOR: CARLOS BLANCO GÓMEZ 100


CURSO ANGULAR

No arrastrará ni soltará nada, necesitamos agregar las propiedades de cdk de


arrastre en app.component.html como se muestra a continuación:
<h3>Angular 7 - Drag and Drop Module</h3>
<div cdkDropList
#personList = "cdkDropList"
[cdkDropListData] = "personaldetails"
[cdkDropListConnectedTo] = "[userlist]"
class = "example-list"
(cdkDropListDropped) = "onDrop($event)" >

<div *ngFor = "let item of personaldetails;


let i = index" class = "divlayout" cdkDrag>
{{item.name}}

PROFESOR: CARLOS BLANCO GÓMEZ 101


CURSO ANGULAR

</div >
</div&t;
Los resaltados son todas las propiedades requeridas para realizar arrastrar y
soltar. Cuando se registra en el navegador, le permite arrastrar el elemento. No
lo colocará en la lista y permanecerá como está cuando deje el puntero del
mouse.

Aquí permite arrastrar el elemento de la lista, pero una vez que deje el puntero
del mouse, se irá y se asentará en el mismo lugar. Para agregar la función de
soltar, necesitamos agregar el evento onDrop en app.component.ts como se
muestra a continuación:
Primero tenemos que importar los módulos dragdrap cdk como se muestra a
continuación:
import {CdkDragDrop, moveItemInArray, transferArrayItem}
from '@angular/cdk/drag-drop';
Aquí está el código completo en app.component.ts -

PROFESOR: CARLOS BLANCO GÓMEZ 102


CURSO ANGULAR

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


import { MyserviceService } from './myservice.service';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from
'@angular/cdk/drag-drop';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7 Project!';
public personaldetails = [];
constructor(private myservice: MyserviceService) {}
ngOnInit() {
this.myservice.getData().subscribe((data) => {
this.personaldetails = Array.from(Object.keys(data),
k=>data[k]);
console.log(this.personaldetails);
});
}
onDrop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data,
event.previousIndex, event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
}
}
}
La función onDrop se encarga de soltar el elemento arrastrado en la posición
requerida.
Hace uso de moveItemInArray y transferArrayItem que hemos importado del
módulo cdk dragdrop.
Ahora veamos la demo nuevamente en el navegador.

PROFESOR: CARLOS BLANCO GÓMEZ 103


CURSO ANGULAR

Ahora le permite arrastrar y soltar el elemento en la posición requerida como se


muestra arriba. La función funciona sin problemas y sin problemas de parpadeo
y se puede utilizar en su aplicación donde sea necesario.

Angular7 - Animaciones
Las animaciones agregan mucha interacción entre los elementos html. La
animación estaba disponible con Angular 2, desde Angular 4 en adelante, la
animación ya no forma parte de la biblioteca @ angular / core, sino que es un
paquete separado que debe importarse en app.module.ts.
Para empezar, necesitamos importar la biblioteca con la siguiente línea de
código:
import { BrowserAnimationsModule } from '@angular/platform-
browser/animations';
El BrowserAnimationsModule necesita ser añadido a la matriz de importación
en app.module.ts como se muestra a continuación -
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-
routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-
cmp.component';
import { ChangeTextDirective } from './change-
text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';

PROFESOR: CARLOS BLANCO GÓMEZ 104


CURSO ANGULAR

import { HttpClientModule } from '@angular/common/http';


import { ScrollDispatchModule } from
'@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-
browser/animations';

@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective,
RoutingComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ScrollDispatchModule,
DragDropModule,
ReactiveFormsModule,
BrowserAnimationsModule
],
providers: [MyserviceService],
bootstrap: [AppComponent]
})
export class AppModule { }
En app.component.html , hemos agregado los elementos html, que deben ser
animados.
<div>
<button (click) = "animate()">Click Me</button>
<div [@myanimation] = "state" class = "rotate">
<img src = "assets/images/img.png" width = "100" height
= "100">
</div>
</div>
Para el div principal, hemos agregado un botón y un div con una imagen. Hay
un evento de clic para el que se llama la función animada. Y para el div, se
agrega la directiva @myanimation y se le da el valor como estado.
Veamos ahora app.component.ts donde se define la animación.
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from
'@angular/forms';
import { trigger, state, style, transition, animate } from
'@angular/animations';

PROFESOR: CARLOS BLANCO GÓMEZ 105


CURSO ANGULAR

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
styles:[`
div {
margin: 0 auto;
text-align: center;
width:200px;
}
.rotate {
width:100px;
height:100px;
border:solid 1px red;
}
`],
animations: [
trigger('myanimation',[
state('smaller',style({
transform : 'translateY(100px)'
})),
state('larger',style({
transform : 'translateY(0px)'
})),
transition('smaller <=> larger',animate('300ms ease-
in'))
])
]
})
export class AppComponent {
state: string = "smaller";
animate() {
this.state= this.state == 'larger' ? 'smaller' :
'larger';
}
}
Tenemos que importar la función de animación que se utilizará en el archivo .ts
como se muestra arriba.
import { trigger, state, style, transition, animate } from
'@angular/animations';
Aquí hemos importado disparador, estado, estilo, transición y animación de @
angular / animaciones.
Ahora, agregaremos la propiedad de animaciones al decorador @Component
() -
animations: [
trigger('myanimation',[
state('smaller',style({
transform : 'translateY(100px)' })),
state('larger',style({

PROFESOR: CARLOS BLANCO GÓMEZ 106


CURSO ANGULAR

transform : 'translateY(0px)' })),


transition('smaller <=> larger',animate('300ms ease-
in'))
])
]
Trigger define el inicio de la animación. El primer parámetro es el nombre de la
animación que se le dará a la etiqueta html a la que se debe aplicar la
animación. El segundo parámetro son las funciones que hemos importado:
estado, transición, etc.
La función de estado involucra los pasos de animación, entre los cuales el
elemento hará la transición. En este momento hemos definido dos estados, más
pequeños y más grandes. Para estados más pequeños, hemos dado el
estilo transform: translateY (100px) y transform: translateY (100px) .
La función de transición agrega animación al elemento html. El primer
argumento toma los estados inicial y final, el segundo argumento acepta la
función animada. La función animada le permite definir la duración, el retraso y
la facilidad de una transición.
Veamos ahora el archivo .html para ver cómo funciona la función de transición:
<div>
<button (click) = "animate()">Click Me</button>
<div [@myanimation] = "state" class = "rotate">
<img src = "assets/images/img.png" width = "100" height
= "100">
</div>
</div>
Hay una propiedad de estilo agregada en la directiva @component, que alinea
centralmente el div. Consideremos el siguiente ejemplo para entender lo mismo:
styles:[`
div{
margin: 0 auto;
text-align: center;
width:200px;
}
.rotate{
width:100px;
height:100px;
border:solid 1px red;
}
`],
Aquí, un carácter especial [``] se usa para agregar estilos al elemento html, si lo
hay. Para el div, le hemos dado el nombre de animación definido en
el archivo app.component.ts .
Al hacer clic en un botón, llama a la función animada, que se define en
el archivo app.component.ts de la siguiente manera:

PROFESOR: CARLOS BLANCO GÓMEZ 107


CURSO ANGULAR

export class AppComponent {


state: string = "smaller";
animate() {
this.state = this.state == ‘larger’? 'smaller' :
'larger';
}
}
La variable de estado se define y se le da el valor predeterminado como más
pequeño. La función animada cambia el estado al hacer clic. Si el estado es
más grande, se convertirá en más pequeño; y si es más pequeño, se convertirá
en más grande.
Así es como se verá la salida en el navegador (http: // localhost: 4200 /) :

Al hacer clic en el botón Hacer clic en mí , la posición de la imagen cambia


como se muestra en la siguiente captura de pantalla:

La función de transformación se aplica en la dirección y, que cambia de 0 a 100


píxeles cuando hacemos clic en el botón Hacer clic. La imagen se almacena en
la carpeta de activos / imágenes .

Angular7 - Materiales
Los materiales ofrecen muchos módulos integrados para su proyecto. Las
funciones como autocompletar, selector de fecha, control deslizante, menús,

PROFESOR: CARLOS BLANCO GÓMEZ 108


CURSO ANGULAR

cuadrículas y barra de herramientas están disponibles para su uso con


materiales en Angular 7.
Para usar materiales, necesitamos importar el paquete. Angular 2 también tiene
todas las características anteriores, pero están disponibles como parte
del módulo @ angular / core . Desde Angular 4, el módulo Materiales se ha
puesto a disposición con un módulo separado @ angular / materiales. Esto
ayuda al usuario a importar solo los materiales necesarios en su proyecto.
Para comenzar a usar materiales, debe instalar dos paquetes: materiales y
cdk . Los componentes de material dependen del módulo de animación para
funciones avanzadas. Por lo tanto, necesita el paquete de animación para el
mismo, @ angular / animaciones . El paquete ya se ha actualizado en el
capítulo anterior. Ya hemos instalado paquetes @ angular / cdk en capítulos
anteriores para módulos virtuales y de arrastrar y soltar.
El siguiente es el comando para agregar materiales a su proyecto:
npm install --save @angular/material

Veamos ahora el paquete.json. @ angular / material y @ angular / cdk están


instalados.
{
"name": "angular7-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.2.0",

PROFESOR: CARLOS BLANCO GÓMEZ 109


CURSO ANGULAR

"@angular/cdk": "^7.3.4",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/material": "^7.3.4",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.2",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
Hemos resaltado los paquetes que están instalados para trabajar con
materiales.
Ahora importaremos los módulos en el módulo principal - app.module.ts como
se muestra a continuación.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-
routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-
cmp.component';
import { ChangeTextDirective } from './change-
text.directive';
import { SqrtPipe } from './app.sqrt';

PROFESOR: CARLOS BLANCO GÓMEZ 110


CURSO ANGULAR

import { MyserviceService } from './myservice.service';


import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from
'@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-
browser/animations';
import { MatButtonModule, MatMenuModule, MatSidenavModule }
from '@angular/material';

@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective,
RoutingComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ScrollDispatchModule,
DragDropModule,
ReactiveFormsModule,
BrowserAnimationsModule,
MatButtonModule,
MatMenuModule,
MatSidenavModule
],
providers: [MyserviceService],
bootstrap: [AppComponent]
})
export class AppModule { }
En el archivo anterior, hemos importado los siguientes módulos de @ angular /
materials .
import { MatButtonModule, MatMenuModule, MatSidenavModule }
from '@angular/material';
Y lo mismo se usa en la matriz de importaciones como se muestra a
continuación:
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ScrollDispatchModule,
DragDropModule,
ReactiveFormsModule,
BrowserAnimationsModule,
MatButtonModule,

PROFESOR: CARLOS BLANCO GÓMEZ 111


CURSO ANGULAR

MatMenuModule,
MatSidenavModule
],
El app.component.ts es como se muestra a continuación:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor() {}
}
Agreguemos ahora el soporte de material-css en styles.css .
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
Ahora agreguemos materiales dentro de app.component.html

Menú
Para agregar menú, se usa <mat-menu> </mat-menu> . El archivo y los
elementos Guardar como se agregan al botón debajo del menú mat. Hay un
botón principal añadido Menú . La referencia de la misma se le da al <mat-
menu> usando [matMenuTriggerFor] = "menu" y usando el menú con # en
<mat-menu> .
app.component.html
<button mat-button [matMenuTriggerFor] = "menu">Menu</button>
<mat-menu #menu = "matMenu">
<button mat-menu-item> File </button>
<button mat-menu-item> Save As </button>
</mat-menu>
La siguiente imagen se muestra en el navegador:

Al hacer clic en Menú, se mostrarán los elementos que contiene.

PROFESOR: CARLOS BLANCO GÓMEZ 112


CURSO ANGULAR

SideNav
Para agregar sidenav, necesitamos <mat-sidenav-container> </mat-sidenav-
container> . <mat-sidenav> </mat-sidenav> se agrega como un elemento
secundario al contenedor. Hay otro div agregado, que activa el sidenav
usando (click) = "sidenav.open ()" .
app.component.html
<mat-sidenav-container class="example-container" fullscreen>
<mat-sidenav #sidenav class = "example-sidenav">
Angular 7
</mat-sidenav>
<div class = "example-sidenav-content">
<button type = "button" mat-button (click) =
"sidenav.open()">
Open sidenav
</button>
</div>
</mat-sidenav-container>
app.component.css
.example-container {
width: 500px;
height: 300px;
border: 1px solid rgba(0, 0, 0, 0.5);
}
.example-sidenav {
padding: 20px;
width: 150px;
font-size: 20px;
border: 1px solid rgba(0, 0, 0, 0.5);
background-color: #ccc;
color:white;
}
A continuación se muestra el menú y el menú lateral en el navegador:

PROFESOR: CARLOS BLANCO GÓMEZ 113


CURSO ANGULAR

El siguiente panel se abre en el lado izquierdo si hacemos clic en Abrir Sidenav


-

Selector de fechas
Ahora agreguemos un selector de fechas utilizando materiales. Para agregar un
selector de fechas, necesitamos importar los módulos necesarios para mostrar
el selector de fechas.

PROFESOR: CARLOS BLANCO GÓMEZ 114


CURSO ANGULAR

En app.module.ts , hemos importado el siguiente módulo como se muestra a


continuación para datepicker:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-
routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-
cmp.component';
import { ChangeTextDirective } from './change-
text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from
'@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-
browser/animations';
import { MatDatepickerModule, MatInputModule,
MatNativeDateModule } from '@angular/material';

@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective,
RoutingComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ScrollDispatchModule,
DragDropModule,
ReactiveFormsModule,
BrowserAnimationsModule,
MatDatepickerModule,
MatInputModule,
MatNativeDateModule
],
providers: [MyserviceService],
bootstrap: [AppComponent]
})
export class AppModule { }
Aquí, hemos importado módulos como MatDatepickerModule, MatInputModule
y MatNativeDateModule.
Ahora, app.component.ts es como se muestra a continuación:

PROFESOR: CARLOS BLANCO GÓMEZ 115


CURSO ANGULAR

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


@Component({
selector: 'app-root',
templateUrl: './app.component.html', s
tyleUrls: ['./app.component.css']
})
export class AppComponent {
constructor() {}
}
El app.component.html se muestra a continuación:
<mat-form-field>
<input matInput [matDatepicker] = "picker" placeholder =
"Choose a date">
<mat-datepicker-toggle matSuffix [for] = "picker"></mat-
datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
CSS global agregado en style.css -
/* You can add global styles to this file, and also
import other style files */
@import '~@angular/material/prebuilt-themes/deeppurple-
amber.css';
body {
font-family: Roboto, Arial, sans-serif;
margin: 10;
}
.basic-container {
padding: 30px;
}
.version-info {
font-size: 8pt;
float: right;
}
El selector de fecha se muestra en el navegador como se muestra a
continuación:

PROFESOR: CARLOS BLANCO GÓMEZ 116


CURSO ANGULAR

Prueba y construcción de proyectos


Angular7
En este capítulo discutiremos los siguientes temas:

PROFESOR: CARLOS BLANCO GÓMEZ 117


CURSO ANGULAR

 Para probar el proyecto Angular 7


 Para construir el proyecto Angular 7

Prueba del proyecto Angular 7


Durante la configuración del proyecto, los paquetes necesarios para la prueba
ya están instalados. Hay un archivo .spec.ts creado para cada nuevo
componente, servicio, directiva, etc. Vamos a usar jazmín para escribir nuestros
casos de prueba.
Para cualquier cambio agregado a su componente, servicios, directivas o
cualquier otro archivo creado, puede incluir sus casos de prueba en los
respectivos archivos .spec.ts. Por lo tanto, la mayoría de las pruebas unitarias
se pueden cubrir desde el principio.
Para ejecutar los casos de prueba, el comando utilizado es el siguiente:
ng test
A continuación se muestra el
archivo app.component.spec.ts para app.component.ts :
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from
'@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'angular7-app'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('angular7-app');
});
it('should render title in a h1 tag', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;

PROFESOR: CARLOS BLANCO GÓMEZ 118


CURSO ANGULAR

expect(compiled.querySelector('h1').textContent).toContain(
'Welcome to angular7-app!');
})
});
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular7-app';
}
Ahora ejecutemos el comando para ver los casos de prueba en ejecución.

PROFESOR: CARLOS BLANCO GÓMEZ 119


CURSO ANGULAR

El estado de los casos de prueba se muestra en la línea de comando como se


muestra arriba y también se abrirá en el navegador como se muestra a
continuación:

En caso de falla, mostrará los detalles de la siguiente manera:


Para hacerlo, cambiemos app.component.spec.ts de la siguiente manera:
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from
'@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],

PROFESOR: CARLOS BLANCO GÓMEZ 120


CURSO ANGULAR

declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'angular7-app'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('Angular 7'); // change the
title from angular7-app to Angular 7
});
it('should render title in a h1 tag', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;

expect(compiled.querySelector('h1').textContent).toContain(
'Welcome to angular7-app!');
});
});
En el archivo anterior, los casos de prueba verifican el título, Angular 7 . Pero
en app.component.ts, tenemos el título, angular7-app como se muestra a
continuación:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular7-app';
}
Aquí el caso de prueba fallará y a continuación se muestran los detalles en la
línea de comandos y el navegador.
En línea de comando
La siguiente pantalla se muestra en la línea de comando -

PROFESOR: CARLOS BLANCO GÓMEZ 121


CURSO ANGULAR

En el navegador
La siguiente pantalla se muestra en el navegador:

Todos los casos de prueba fallidos para su proyecto se mostrarán como se


muestra arriba en la línea de comandos y el navegador.
Del mismo modo, puede escribir casos de prueba para sus servicios, directivas
y los nuevos componentes que se agregarán a su proyecto.

Proyecto de construcción angular 7


Una vez que haya terminado con el proyecto en Angular, necesitamos
construirlo para que pueda usarse en producción o enunciado.

PROFESOR: CARLOS BLANCO GÓMEZ 122


CURSO ANGULAR

La configuración para la compilación, es decir, la producción, la preparación, el


desarrollo y las pruebas deben definirse en sus entornos / src .
En la actualidad, tenemos los siguientes entornos definidos en src /
environment:

Puede agregar archivos basados en su compilación a src / environment, es


decir, environment.staging.ts, enviornment.testing.ts, etc.
En la actualidad, intentaremos construir para el entorno de producción. El
archivo environment.ts contiene la configuración predeterminada del entorno
y los detalles del archivo de la siguiente manera:
export const environment = {
production: false
};
Para compilar el archivo para producción, necesitamos hacer que
la producción: true en environment.ts de la siguiente manera:
export const environment = {
production: true
};
El archivo de entorno predeterminado debe importarse dentro de los
componentes de la siguiente manera:
app.component.ts
import { Component } from '@angular/core';
import { environment } from './../environments/environment';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular7-app';
}
El reemplazo del entorno de predeterminado a producción que estamos
tratando de hacer se define dentro de la sección de Reemplazos
de archivos angular.json de la siguiente manera:
"production": {
"fileReplacements": [

PROFESOR: CARLOS BLANCO GÓMEZ 123


CURSO ANGULAR

{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
}
Cuando se ejecuta el comando para la compilación, el archivo se reemplaza
por src / assets / environment.prod.ts . La configuración adicional, como la
preparación o la prueba, se puede agregar aquí, como se muestra en el
siguiente ejemplo:
"configurations": {
"production": { ... },
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
]
}
}
Entonces, el comando para ejecutar la compilación es el siguiente:
ng build --configuration = production // for production
environmnet
ng build --configuration = staging // for stating enviroment
Ahora ejecutemos el comando de compilación para producción, el comando
creará una carpeta dist dentro de nuestro proyecto que tendrá los archivos
finales después de la compilación.

PROFESOR: CARLOS BLANCO GÓMEZ 124


CURSO ANGULAR

Los archivos finales se compilan dentro de la carpeta dist / que se puede alojar
en el servidor de producción en su extremo.

PROFESOR: CARLOS BLANCO GÓMEZ 125

También podría gustarte

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy