Angular7 - Guía rápida

Angular 7es 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 de Angular lanzadas hasta ahora:

Versión Fecha de lanzamiento
JS angular Octubre de 2010
Angular 2.0 Septiembre de 2016
Angular 4.0 Marzo de 2017
Angular 5.0 Noviembre de 2017
Angular 6.0 Mayo de 2018
Angular 7.0 Octubre de 2018

Las fechas de lanzamiento de las dos próximas versiones principales de Angular se indican 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.

Analicemos las nuevas características agregadas a Angular 7.

Actualización angular a V7

Angular 7 es una versión importante en la que, en el marco del núcleo angular, se actualizan Angular CLI y Angular Materials. 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

Mientras realiza la configuración del proyecto utilizando CLI angular, le informa sobre las funciones integradas disponibles, es decir, el enrutamiento y la compatibilidad con hojas 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:

Budgetses una función agregada a Angular CLI que le permite establecer un límite 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 recibir una advertencia cuando se cruce 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: virtual scrolling, and drag and drop.

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 brinda 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.

En este capítulo, discutiremos la configuración del entorno requerida para Angular 7. Para instalar Angular 7, necesitamos lo siguiente:

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

Nodejs

Para verificar si nodejs está instalado en su sistema, escriba node -ven la terminal. Esto le ayudará a ver la versión de nodejs actualmente instalada en su sistema.

Nodejs debe ser mayor que 8.xo 10.xy npm debe 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:

Según su sistema operativo, instale el paquete requerido. Una vez que nodejs esté instalado, npm también se instalará junto con él. Para comprobar si npm está instalado o no, escriba npm –v en la terminal como se indica a continuación. Mostrará la versión del npm.

C:\>npm 
–v 6.4.1

Las instalaciones de Angular 7 son muy simples con la ayuda de CLI angular. Visite la pagina de iniciohttps://cli.angular.io/ de angular para obtener la referencia del comando.

Tipo npm install –g @angular/clien su símbolo del sistema, para instalar angular cli en su sistema. La instalación llevará un tiempo y una vez hecho esto, puede verificar la versión usando el siguiente comando:

ng version

Mostrará los detalles de la versión de angular - cli así como la versión de otros paquetes como se muestra a continuación -

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 siguiente capítulo.

En este capítulo, analizaremos la configuración del proyecto en Angular 7.

Para comenzar con la configuración del proyecto, asegúrese de tener instalado nodejs. You can check the version of node in the command line using the command, node –v, como se muestra a continuación -

Si no obtiene la versión, instale nodejs desde su sitio oficial -https://nodejs.org/en/.

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.

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 configurar el proyecto en Angular 7.

Crearemos una carpeta llamada projectA7 e instalar angular/cli como se muestra a continuación -

Una vez realizada la instalación, verifique los detalles de los paquetes instalados usando el comando ng version como se muestra a continuación:

Proporciona la versión para Angular CLI, 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, usaremos el siguiente comando:

ng new projectname

Puede utilizar el nombre del proyecto que desee. Ejecutemos ahora el comando anterior en la línea de comandos.

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:

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 el requerido para la configuración de su proyecto. En la actualidad, discutiremos CSS para la configuración de nuestro proyecto.

El proyecto angular7-app se creó con éxito. Instala todos los paquetes necesarios para que nuestro proyecto se ejecute en Angular7. Pasemos ahora al proyecto creado, que está en el directorioangular7-app.

Cambie el directorio en la línea de comando usando la línea de código dada -

cd angular7-app

Usaremos Visual Studio Code IDE 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.

A continuación está el editor:

No hemos iniciado ningún proyecto en él. Tomemos ahora el proyecto que hemos creado usando angular-cli.

Consideraremos el angular7-appproyecto. Abramos elangular7-app y vea cómo se ve la estructura de la carpeta.

Ahora que tenemos la estructura de archivos para nuestro proyecto, compilemos nuestro proyecto con el siguiente comando:

ng serve

The ng serve command builds the application and starts the web server.

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 ver la salida. Una vez que se compila el proyecto, recibirá el siguiente resultado:

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

Hagamos ahora algunos cambios para mostrar el siguiente contenido:

“Welcome to Angular 7!”

Hemos realizado cambios en los archivos: app.component.html y app.component.ts. Discutiremos más sobre esto en los capítulos siguientes.

Completemos la configuración del proyecto. Si ve que hemos utilizado el puerto 4200, que es el puerto predeterminado que utiliza angular-cli durante la compilación. Puede cambiar el puerto si lo desea usando el siguiente comando:

ng serve --host 0.0.0.0 –port 4205

La carpeta angular7-app / tiene lo siguiente folder structure-

  • e2e/- carpeta de prueba de extremo a extremo. Principalmente, e2e se utiliza para pruebas de integración y ayuda a garantizar que la aplicación funcione correctamente.

  • 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 / you will app / folder creada durante la configuración del proyecto y contiene todos los archivos requeridos para el proyecto.

La carpeta angular7-app / tiene lo siguiente file structure -

  • 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 enviar un archivo .gitignore al repositorio para poder 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:

"@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 npm install.

  • tsconfig.json - Esto básicamente contiene las opciones del compilador necesarias durante la compilación.

  • tslint.json - Este es el archivo de configuración con reglas a considerar durante la compilación.

los src/ carpeta es la carpeta principal, que internamente tiene una estructura de archivo diferente.

aplicación

Contiene los archivos que se describen a continuación. Angular-cli instala estos archivos 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, platform-browser.

Los nombres en sí explican el uso de las bibliotecas. Se importan y guardan en variables como declaraciones, importaciones, proveedores y bootstrap.

Podemos ver app-routing.moduletambién se agrega. Esto se debe a que habíamos seleccionado el enrutamiento al inicio de la instalación. El módulo es agregado por @ angular / cli.

A continuación se muestra la estructura del archivo:

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:

Declarations- En declaraciones, se almacena la referencia a los componentes. El componente Aplicación es el componente predeterminado que se crea cada vez que se inicia un nuevo proyecto. Aprenderemos a crear nuevos componentes en una sección diferente.

Imports- 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.

Providers- Esto tendrá referencia a los servicios creados. El servicio se discutirá en un capítulo posterior.

Bootstrap - Esto 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:

<!--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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZp
   ZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA
   2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBma
   WxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSA
   zMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2
   wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3I
   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.

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 realizar 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 se ocupará del 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.

Medio 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 archivo adicional de la carpeta angular7-app / incluye lo siguiente:

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 enapp.component.ts archivo y mostrará los detalles de app.component.html archivo.

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 principal, es decir, AppModule cuando se ejecuta el siguiente código:

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

Cuando se llama a AppModule, llama a app.module.ts, que además llama a AppComponent según el bootstrap de la siguiente manera:

bootstrap: [AppComponent]

En app.component.ts, hay un selector: app-rootque se utiliza en el archivo index.html. Esto mostrará el contenido presente enapp.component.html.

Lo siguiente se mostrará en el navegador:

polyfill.ts

Esto se usa principalmente para compatibilidad con versiones anteriores.

styles.css

Este es el archivo de estilo necesario para el proyecto.

test.ts

Aquí, se manejarán los casos de prueba unitaria 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.

tipings.d.ts

Se utiliza para gestionar la definición de TypeScript.

La estructura final del archivo será la siguiente:

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 ha seleccionado el enrutamiento angular durante la configuración de su 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 de forma predeterminada cuando creamos un nuevo proyecto usando el comando angular-cli.

Si abres el app.module.ts archivo, tiene algunas bibliotecas que se importan y también un declarativo que se asigna al 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. Este 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 forma 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 comprobamos la estructura del archivo, obtendremos la nueva carpeta new-cmp creada bajo el src/app carpeta.

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 utilizar para pruebas unitarias.
  • new-cmp.component.ts: aquí podemos definir el módulo, las propiedades, etc.

Los cambios se agregan al app.module.ts archivo 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. 
}) 
export class AppModule { }

los new-cmp.component.ts El archivo 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 de forma predeterminada cuando se ejecuta la clase.

Veamos cómo funciona el flujo. Ahora, el componente de la aplicación, que se crea de forma predeterminada, se convierte en el componente principal. Cualquier componente agregado posteriormente se convierte en el componente secundario.

Cuando accedemos a la URL en el "http://localhost:4200/" navegador, 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>

El 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 elmain.ts archivo.

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, que hace que se cargue la aplicación.

Veamos ahora el app.module.ts archivo -

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í el AppComponent es el nombre dado, es decir, la variable para almacenar la referencia del app.component.tsy lo mismo se le da al bootstrap. Veamos ahora elapp.component.ts archivo.

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

El núcleo angular se importa y se hace referencia como 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 dan templateUrl y styleUrl. El selector aquí no es más que la etiqueta que se coloca en el archivo index.html que vimos arriba.

La clase AppComponent tiene una variable llamada título, que se muestra en el navegador. El @Component usa el templateUrl llamado app.component.html, que es el 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 de la variable entre llaves. Se reemplaza con el valor, que está presente en elapp.component.tsarchivo. A esto se le llama vinculación. 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 elapp.module.ts archivo, 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() { } 
}

Aquí también tenemos que importar el núcleo. La referencia del componente se usa 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 vio 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 obtenemos 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 un nuevo componente de new-cmp.component.ts como se muestra a continuación -

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 forma 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-cmp7></app-new-cmp>

Cuando el <app-new-cmp></app-new-cmp> se agrega la etiqueta, 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";
   constructor() { }
   ngOnInit() { }
}

En la clase, hemos agregado una variable llamada newcomponent y el valor es "Ingresado en nuevo componente creado".

La variable anterior se agrega en el new-cmp.component.html archivo de la siguiente manera:

<p> 
   {{newcomponent}} 
</p>
<p> 
   new-cmp works! 
</p>

Ahora que hemos incluido el <app-new-cmp></app-new-cmp>selector en el app.component.html que es el .html del componente principal, el contenido presente en el new-cmp.component.htmlEl archivo se muestra en el navegador. También agregaremos algo de CSS para el nuevo componente en el archivo new-cmp.component.css de la siguiente manera:

p { 
   color: blue; 
   font-size: 25px; 
}

Así que hemos agregado color azul y tamaño de fuente de 25px para las etiquetas p.

La siguiente pantalla se mostrará en el navegador:

Del mismo modo, podemos crear componentes y vincularlos usando el selector en el app.component.html Presentar según nuestros requisitos.

El módulo en Angular se refiere a un lugar donde puede agrupar los componentes, directivas, tuberías y servicios, que están relacionados con la aplicación.

En caso de que esté desarrollando un sitio web, el encabezado, el pie de página, la sección izquierda, central y derecha se convierten en parte de un módulo.

Para definir el módulo, podemos usar NgModule. Cuando crea un nuevo proyecto usando el comando Angular –cli, el ngmodule se crea en elapp.module.ts archivo por defecto 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 del ngmodule es la que se muestra a continuación:

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

Empieza con @NgModule y contiene un objeto que tiene declaraciones, importaciones, proveedores y bootstrap.

Declaración

Es una matriz de componentes creados. Si se crea algún componente nuevo, se importará primero y la referencia se incluirá en las declaraciones como se muestra a continuación:

declarations: [ 
   AppComponent,  
   NewCmpComponent 
]

Importar

Es una serie de módulos necesarios para su uso en la aplicación. También puede ser utilizado por los componentes de la matriz de declaración. Por ejemplo, ahora mismo en el @NgModule, vemos el módulo del navegador importado. En caso de que su aplicación necesite formularios, puede incluir el módulo con el siguiente código:

import { FormsModule } from '@angular/forms';

La importación en el @NgModule será como el siguiente:

imports: [ 
   BrowserModule, 
   FormsModule 
]

Proveedores

Esto incluirá los servicios creados.

Oreja

Esto incluye el componente principal de la aplicación para iniciar la ejecución.

El enlace de datos está disponible directamente desde AngularJS, y todas las versiones de Angular lanzadas más adelante. Usamos llaves para el enlace de datos - {{}}; este proceso se llama interpolación. Ya hemos visto en nuestros ejemplos anteriores cómo declaramos el valor a la variable título y lo mismo se imprime en el navegador.

La variable en el app.component.html archivo se conoce como {{title}} y el valor de title se inicializa en el app.component.ts archivo y en app.component.html, se muestra el valor.

Creemos ahora un menú desplegable de meses en el navegador. Para hacer eso, hemos creado una serie de meses enapp.component.ts como sigue -

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 del mes que se muestra arriba se mostrará en un menú desplegable en el navegador.

Hemos creado la etiqueta de selección normal con opción. Como opción, hemos utilizado elfor loop. losfor loop se utiliza para iterar sobre la matriz de meses, que a su vez creará la etiqueta de opción con el valor presente en los meses.

La sintaxis de en Angular es la siguiente:

*ngFor = “let I of months”

y para obtener el valor de los meses en los que lo mostramos:

{{i}}

Las dos llaves ayudan con el enlace de datos. Declaras las variables en tu archivo app.component.ts y las mismas serán reemplazadas usando las llaves.

A continuación se muestra la salida de la matriz del mes anterior en el navegador:

La variable que se establece en el app.component.ts se puede unir dentro del app.component.htmlutilizando las llaves. Por ejemplo: {{}}.

Ahora mostremos los datos en el navegador según la condición. Aquí, hemos agregado una variable y asignado el valor comotrue. 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>

<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 el IF THEN ELSE condición.

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", 
      "August", "September", "October", "November", "December"];
   
   isavailable = false; //variable is set to true
}

En este caso, hemos realizado el isavailablevariable como falsa. Para imprimir elelse condición, tendremos que crear la ng-template como sigue -

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

El código completo se proporciona 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 comoid al ng-template, y cuando la variable disponible se establece en falso, el texto Condition is invalid se visualiza.

La siguiente captura de pantalla muestra la pantalla en el navegador:

Usemos ahora el if then else condició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 
}

Ahora, haremos la variable isavailablecomo cierto. 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/>

<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 condition1, más condition2. Ahora, se crean dos plantillas con id#condition1 y #condition2.

La pantalla en el navegador es la siguiente:

En este capítulo, discutiremos cómo funciona Event Binding en Angular 7. Cuando un usuario interactúa con una aplicación en la forma de un movimiento del teclado, un clic del mouse o un mouse sobre, genera un evento. Estos eventos deben manejarse para realizar algún tipo de acción. Aquí es donde entra en escena la vinculación 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>
</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 app.component.html archivo, hemos definido un botón y le hemos agregado una función usando el evento click.

A continuación se muestra 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 llegará a la función myClickFunction y aparecerá un cuadro de diálogo, que muestra el Button is clicked como se muestra en la siguiente captura de pantalla:

El estilo del 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;
}

Agreguemos ahora 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> <ng-template #condition2>Condition is invalid</ng-template> </div> <br/> <button (click) = "myClickFunction($event)">
   Click Me
</button>

La función se declara en el app.component.ts archivo -

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 en el menú desplegable y verá el mensaje de la consola "Changed month from the Dropdown”Se muestra en la consola junto con el evento.

Agreguemos un mensaje de alerta en app.component.ts cuando el valor del menú desplegable se 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:

“Changed month from the Dropdown”.

Angular 7 usa <ng-template> como 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> para 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>. Desaprobará completamente seguir adelante. Este fue uno de los principales cambios realizados en la versión de Angular 4.

Usemos ahora la plantilla junto con el if else condition y ver la salida.

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> <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 el if declaración con el else condition y llamará a la plantilla condition1, de lo contrario condition2.

Las plantillas deben llamarse 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 la condition1 se llama a la plantilla, 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:

La variable isavailablees falso, 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"); 
   }
}

los isavailable La variable se alterna al hacer clic en el botón como se muestra a continuación:

myClickFunction(event) { 
   this.isavailable = !this.isavailable; 
}

Al hacer clic en el botón según el valor de la isavailable variable se mostrará la plantilla respectiva -

Si inspecciona el navegador, verá que nunca obtiene la etiqueta span en el dominio dom. El siguiente ejemplo le ayudará a comprender lo mismo.

Aunque en app.component.html hemos agregado la etiqueta span y el <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>
<ng-template #condition2>Condition is invalid from template</ng-template>

No vemos la etiqueta span y también <ng-template> en la estructura dom cuando inspeccionamos lo mismo 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 quitamos el thencondición, 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, enapp.component.ts, hemos hecho el isavailable variable como verdadera.

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 el componente debe procesarse, instanciarse y usarse en tiempo de ejecución.

Directivas estructurales

Una directiva de estructura se ocupa básicamente de manipular los elementos dom. Las directivas estructurales tienen un signo * antes de la directiva. Por ejemplo,*ngIf y *ngFor.

Directivas de atributos

Las directivas de atributo 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, analizaremos 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)

Se crean los archivos anteriores, es decir, change-text.directive.spec.ts y change-text.directive.ts y se actualiza el archivo app.module.ts.

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';

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

los ChangeTextDirectiveLa clase se incluye en las declaraciones del archivo anterior. La clase también se importa del archivo que se muestra 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. Sea lo que sea 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 change-text.directive.ts archivo de la siguiente manera:

change-text.directive.ts

import { Directive, ElementRef} from '@angular/core';
@Directive({
   selector: '[changeText]'
})
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 queChange Text se aplica la directiva.

Hemos agregado el elemento console.log. El resultado del mismo 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 sobre el que se da el selector de directiva en la consola. Dado que hemos agregado elchangeText directiva a una etiqueta span, se muestran los detalles del elemento span.

En este capítulo, discutiremos sobre las tuberías en Angular 7. Las tuberías se llamaban anteriormente filtros en Angular1 y se llamaban tuberías desde Angular2 en adelante.

El | El carácter se utiliza para transformar datos. A continuación se muestra la sintaxis para el mismo:

{{ Welcome to Angular 7 | lowercase}}

Toma enteros, cadenas, matrices y fecha como entrada separados con | para ser convertido en el formato requerido y mostrar el mismo en el navegador.

Consideremos algunos ejemplos que utilizan tuberías. Aquí, queremos mostrar el texto dado en mayúsculas. Esto se puede hacer usando tuberías de la siguiente manera:

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 entra en el app.component.html archivo -

<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 los tubos 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 enapp.component.ts archivo -

import { Component } from '@angular/core';
@Component({ 
   selector: 'app-root',
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})
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 app.component.html archivo 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> 
</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. Le 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 darle el nombre a nuestra tubería, que se usará en nuestro archivo .html. Dado que 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.

El método de transformación definido en la clase tomará el argumento como número y devolverá el número después de sacar la raíz cuadrada.

Dado que hemos creado un nuevo archivo, debemos agregar el mismo 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 el app.sqrt.tsclase. Tenemos que importar lo mismo enapp.module.tsy especifique 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 app.component.html archivo.

<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:

El enrutamiento básicamente significa navegar entre páginas. Ha visto muchos sitios con enlaces que lo 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. Creemos ahora 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] 
})
export class AppModule { }

AppRoutingModule se agrega como se muestra arriba y se incluye en la matriz de importaciones.

Detalles de archivo de app-routing.module se dan 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 agregan, los archivos anteriores deben agregarse manualmente.

Entonces, en el archivo anterior, hemos importado Routes y RouterModule desde @ angular / enrutador.

Hay una constante routesdefinido cuál es de tipo Rutas. Es una matriz que contiene todas las rutas que necesitamos en nuestro proyecto.

Las rutas const se le 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 creemos 2 componentes llamados como Home y Contact Us y navegar entre ellos usando enrutamiento.

Inicio del componente

Primero, discutiremos sobre Home. A continuación se muestra la sintaxis de 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 
src/app/app.module.ts (692 bytes)

Componente Contáctenos

A continuación se muestra la sintaxis de Component Contact Us:

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)

Terminamos con la creación de componentes en casa y contáctanos. 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'; 
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 la ruta y el 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. Importémoslos en un solo lugar, es decir, en app-routing.module.ts.

Por lo tanto, crearemos una matriz de componentes para usar en el enrutamiento y exportaremos la matriz en app-routing.module.ts y nuevamente la importaremos en app.module.ts. Entonces tenemos todos los componentes que se usarán para el enrutamiento en app-routing.module.ts.

Así 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'; 
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 con la definición de 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 del componente dentro de la directiva <router-outlet> que nosotros han agregado en add.component.html.

Crear botón dentro de app.component.html y dar 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, hemos agregado 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:

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 del componente de la casa como se muestra a continuación:

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

Al hacer clic en el enlace, también verá que cambia 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.

Podríamos encontrarnos con una situación en la que necesitemos que se use algún código en todas partes de la página. Por ejemplo, puede ser para conexiones de datos que deben compartirse entre componentes. Esto se logra con la ayuda de Servicios. Con los servicios, podemos acceder a métodos y propiedades en otros componentes en todo el proyecto.

Para crear un servicio, necesitamos hacer uso de la línea de comando como se indica 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:

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, debemos incluir el servicio creado en el padre principal. 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: [
      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. Volvamos ahora 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 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 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!'; 
   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 utilizar 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:

Si cambia la propiedad del servicio en cualquier componente, también se cambia 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. Nuevamente cambiaremos la propiedad en el componente padre y veremos si la misma se cambia en el nuevo componente o no.

En myservice.service.ts, hemos creado una propiedad y usamos la misma en otro componente padre y nuevo.

import { Injectable } from '@angular/core';
@Injectable({ 
   providedIn: 'root' 
}) 
export class MyserviceService { 
   serviceproperty = "Service Created"; 
   constructor() { } 
   showTodayDate() { 
      let ndate = new Date(); 
      return ndate; 
   } 
}

Usemos ahora el servicepropertyvariable en otros componentes. Enapp.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(); 
      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 cambiamos nada, sino que asignamos directamente la propiedad a la propiedad del componente.

Ahora, cuando lo ejecute en el navegador, la propiedad del servicio se cambiará ya que el valor de la misma 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.

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>

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 entender 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({
   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 desde @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 usaremos 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 proporcionada.

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 {
   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>

Output

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 Angular CLI, necesitamos tenerlo instalado en nuestro sistema. Usemos el siguiente comando para lo mismo:

npm install -g @angular/cli

Para crear un nuevo proyecto, podemos ejecutar el siguiente comando en la línea de comandos y se creará el proyecto.

ng new PROJECT-NAME 
cd PROJECT-NAME 
ng serve //

ng serve // will compile and you can see the output of your project in the browser −

http://localhost:4200/

4200 es el puerto predeterminado que se utiliza 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

Actualizará el marco principal 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 al trabajar con proyectos de Angular 7:

No Señor Comandos y descripción
1

Component

ng g componente nuevo componente

2

Directive

directiva ng g nueva directiva

3

Pipe

ng g pipe nueva tubería

4

Service

ng g servicio nuevo-servicio

5

Module

ng g módulo mi-módulo

6

Test

prueba ng

7

Build

ng build --configuration = production // para el entorno de producción

ng build --configuration = staging // para indicar el entorno

Siempre que se crea un nuevo módulo, un componente o un servicio, la referencia del mismo se actualiza en el módulo padre. app.module.ts.

En este capítulo, veremos cómo se usan los formularios en Angular 7. Discutiremos dos formas de trabajar con formularios:

  • Formulario basado en plantillas
  • Forma dirigida por modelo

Formulario basado en plantillas

Con un formulario basado en plantilla, la mayor parte del trabajo se realiza en la plantilla. Con la forma dirigida por modelo, la mayor parte del trabajo se realiza en la clase de componente.

Consideremos ahora trabajar en el formulario basado en plantillas. 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 envío 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 app.component.html archivo.

<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 identificación de correo electrónico, contraseña y el botón de envío. Le hemos asignado tipo, nombre y marcador de posición.

En formularios controlados por plantillas, necesitamos crear los controles de formulario modelo agregando el ngModel directiva y la nameatributo. Por lo tanto, donde queramos que Angular acceda a nuestros datos desde 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. losngFormLa directiva debe agregarse a la plantilla de formulario que hemos creado. También hemos añadido funciónonClickSubmit y asignado userlogin.value lo.

Creemos ahora la función en el app.component.ts y recuperar 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. Al hacer clic en el botón de envío del formulario, el control llegará 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] { 
   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í es como se muestra el navegador:

El formulario se ve como se muestra a continuación. Ingresemos 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:

Forma dirigida por modelo

En la forma dirigida por modelo, necesitamos importar el ReactiveFormsModule desde @ angular / forms y usar el mismo en la matriz de importaciones.

Hay un cambio que entra 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'; 
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 basado en modelo. Por ejemplo,import { 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!'; 
   emailid; 
   formdata;
   constructor(private myservice: MyserviceService) { }  
   ngOnInit() { 
      this.formdata = new FormGroup({ 
         emailid: new FormControl("[email protected]"),
         passwd: new FormControl("abcd1234") 
      }); 
   } 
   onClickSubmit(data) {this.emailid = data.emailid;}
}

Los datos del 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 dejarlo en blanco en caso de que lo desee.

Así es como se verán los valores en la interfaz de usuario del formulario.

Hemos utilizado formdata para inicializar los valores del formulario; Necesitamos usar lo mismo en la interfaz de usuario del formulario.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>

En el archivo .html, hemos utilizado formGroup entre corchetes para el formulario; por ejemplo, [formGroup] = ”formdata”. Al enviar, la función se llamaonClickSubmit para cual formdata.value esta pasado.

La etiqueta de entrada formControlNamese utiliza. Se le da un valor que hemos utilizado en elapp.component.ts archivo.

Al hacer clic en enviar, el control pasará a la función onClickSubmit, que se define en el app.component.ts archivo.

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 formularios controlados por modelos. Puede utilizar la validación de formulario incorporada o también utilizar el enfoque de validación personalizado. Usaremos ambos enfoques en el formulario. Continuaremos con el mismo ejemplo que creamos en uno de nuestros apartados anteriores. Con Angular 7, necesitamos importarValidators desde @angular/forms como se muestra a continuación -

import { FormGroup, FormControl, Validators} from '@angular/forms'

Angular tiene validadores incorporados como mandatory field, minlength, maxlengthy pattern. Se puede acceder a ellos mediante el módulo Validadores.

Puede simplemente agregar validadores o una serie de validadores necesarios para decirle a Angular si un campo en particular es obligatorio. Intentemos ahora lo mismo en uno de los cuadros de texto de entrada, es decir, ID de correo electrónico. Para la identificación de correo electrónico, hemos agregado los siguientes parámetros de validación:

  • Required
  • 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. Ahora mismo, hemos agregado elrequired y el pattern matching parámetros para tomar solo correo electrónico válido.

En el 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" 
         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 que el botón de inicio de sesión está desactivado. 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á 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 agregar los detalles requeridos en ella. 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 passwordvalidation y lo mismo se usa en una sección anterior en el control de formulario - passwd: new FormControl("", this.passwordvalidation).

En la función que hemos creado comprobaremos si la longitud de los caracteres introducidos es la adecuada. Si los caracteres son menos de cinco, regresará con el passwd verdadero 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:

Hemos introducido solo tres caracteres en la contraseña y el inicio de sesión está desactivado. Para habilitar el inicio de sesión, necesitamos más de cinco caracteres. Ingresemos ahora una longitud válida de caracteres y verifiquemos.

El inicio de sesión está habilitado ya que tanto la identificación de correo electrónico como la contraseña son válidas. El correo electrónico se muestra en la parte inferior cuando iniciamos sesión.

Esta es una de las nuevas características agregadas a Angular 7 llamada Virtual Scrolling. Esta función 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 brinda 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.

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

Considere que tiene una interfaz de usuario que tiene una gran lista en la que cargar todos los datos juntos puede tener problemas de rendimiento. La nueva función 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 app.module.ts como sigue -

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';

@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 hacer que los datos se muestren en la pantalla. Continuaremos usando el servicio que creamos en el último capítulo.

Obtendremos datos de la URL, https://jsonplaceholder.typicode.com/photosque tiene datos para alrededor de 5000 imágenes. Obtendremos los datos y los mostraremos al usuario mediante el módulo de desplazamiento virtual.

Los detalles en la URL, https://jsonplaceholder.typicode.com/photos son los siguientes:

Son datos json que tienen URL de imagen y URL de miniatura. Mostraremos la URL en miniatura a los usuarios.

A continuación se muestra el servicio que obtendrá 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) { }
   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 funcionamiento 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>
               <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<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 según 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 pergamino virtual es 500px. Las imágenes que quepan dentro de esa altura se mostrarán al usuario. Terminamos de agregar el código necesario para que nuestro módulo de desplazamiento virtual sea visto.

La salida del módulo de desplazamiento virtual en el navegador es la siguiente:

Podemos ver que las primeras 4 imágenes se muestran al usuario. Hemos especificado la altura de 500px. Se muestra un desplazamiento para la tabla, a medida que el usuario se desplaza, las imágenes que encajarán en esa altura se mostrarán como se muestra a continuación:

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, en cambio, a medida que el usuario se desplaza, se llaman y se muestran las URL.

La nueva función de arrastrar y soltar agregada a Angular 7 CDK ayuda a arrastrar y soltar los elementos de la lista. Comprenderemos 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

Una vez realizado el paso anterior. Vamos a importar 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
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

El DragDropModule se importa desde '@angular/cdk/drag-drop' y el módulo se agrega a la matriz de importación como se muestra arriba.

Usaremos 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);
      });
   }
}

Tenemos los datos necesarios disponibles en la variable de detalles personales. Ahora usemos lo mismo para mostrarle 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:

No arrastrará y soltará nada, debemos agregar las propiedades de dragdrop cdk 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}}
   </div >
</div&t;

Los resaltados son todas las propiedades necesarias para realizar la función de arrastrar y soltar. Cuando revisa el navegador, le permite arrastrar el elemento. No lo dejará 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 instalará en el mismo lugar. Para agregar la función de caída, debemos 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:

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 la moveItemInArray y transferArrayItem hemos importado desde el módulo cdk dragdrop.

Ahora veamos la demostración nuevamente en el navegador -

Ahora le permite arrastrar y soltar el elemento en la posición requerida como se muestra arriba. La función funciona muy bien sin problemas de parpadeo y se puede utilizar en su aplicación donde sea que surja la necesidad.

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, pero 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';

los BrowserAnimationsModule debe agregarse 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';
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 serán 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 a la función animada. Y para el div, se agrega la directiva @myanimation y se le da el valor como estado.

Veamos ahora el 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';

@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 desde @ angular / animaciones.

Ahora, agregaremos la propiedad de animaciones al decorador @Component () -

animations: [ 
   trigger('myanimation',[
      state('smaller',style({ 
         transform : 'translateY(100px)' })), 
      state('larger',style({
         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 pasará. Ahora mismo hemos definido dos estados, más pequeños y más grandes. Para un estado más pequeño, le 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 de animación 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í, se usa un carácter especial [``] para agregar estilos al elemento html, si lo hay. Para el div, le hemos dado el nombre de animación definido en elapp.component.ts archivo.

Con el clic de un botón, llama a la función animada, que se define en el app.component.ts archivo de la siguiente manera:

export class AppComponent {
   state: string = "smaller"; 
   animate() { 
      this.state = this.state == ‘larger’? 'smaller' : 'larger'; 
   } 
}

La variable de estado está definida y se le da el valor predeterminado como menor. 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 la salida en el navegador (http://localhost:4200/) se verá como -

Al hacer clic en el Click Me , la posición de la imagen se 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 100px cuando hacemos clic en el botón Click Me. La imagen se almacena en elassets/images carpeta.

Los materiales ofrecen muchos módulos integrados para su proyecto. Las funciones como autocompletar, selector de fecha, control deslizante, menús, cuadrículas y barra de herramientas están disponibles para usar con materiales en Angular 7.

Para utilizar materiales, necesitamos importar el paquete. Angular 2 también tiene todas las características anteriores, pero están disponibles como parte del@angular/core module. Desde Angular 4, el módulo Materiales se ha puesto a disposición con un módulo separado @ angular / materials. Esto ayuda al usuario a importar solo los materiales necesarios en su proyecto.

Para comenzar a usar materiales, necesita instalar dos paquetes: materials and 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/animations. El paquete ya se actualizó en el capítulo anterior. Ya hemos instalado paquetes @ angular / cdk en capítulos anteriores para el módulo virtual y drag drop.

A continuación se muestra el comando para agregar materiales a su proyecto:

npm install --save @angular/material

Veamos ahora el package.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", 
      "@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 destacado los paquetes que se instalan para trabajar con materiales.

Ahora importaremos los módulos en el módulo principal: app.module.ts Como se muestra abajo.

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 { 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,
   MatMenuModule,
   MatSidenavModule
],

App.component.ts 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ú, <mat-menu></mat-menu>se utiliza. losfile y Save Aslos elementos se agregan al botón debajo del menú mat. Hay un botón principal agregadoMenu. La referencia de la misma se da la<mat-menu> mediante el uso [matMenuTriggerFor]="menu" y usando el menú con # in<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 dentro de él:

SideNav

Para agregar sidenav, necesitamos <mat-sidenav-container></mat-sidenav-container>. <mat-sidenav></mat-sidenav>se agrega como hijo 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 la visualización del menú y la navegación lateral en el navegador:

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

Selector de fechas

Agreguemos ahora un selector de fechas usando materiales. Para agregar un selector de fechas, necesitamos importar los módulos necesarios para mostrar el selector de fechas.

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:

import { Component } from '@angular/core'; 
@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', s
   tyleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   constructor() {} 
}

los app.component.html es como 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:

En este capítulo discutiremos los siguientes temas:

  • 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 las pruebas ya están instalados. Hay un.spec.ts archivo creado para cada nuevo componente, servicio, directiva, etc. Vamos a utilizar jasmine 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 archivos .spec.ts respectivos. Por lo tanto, la mayor parte de las pruebas unitarias se pueden cubrir al 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;
      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.

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 cualquier falla, mostrará los detalles de la siguiente manera:

Para hacer eso, 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
         ],
         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:

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 de Angular 7

Una vez que haya terminado con el proyecto en Angular, debemos compilarlo para que pueda usarse en producción o declaración.

La configuración para la compilación, es decir, producción, preparación, desarrollo, pruebas debe definirse en su src/environments.

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 archivoenvironment.ts contiene la configuración de entorno predeterminada y los detalles del archivo de la siguiente manera:

export const environment = {
   production: false
};

Para construir el archivo para producción, necesitamos hacer el production: true en el medio ambiente 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 forma predeterminada a producción que estamos tratando de hacer se define dentro de angular.json fileReplacements sección de la siguiente manera:

"production": {
   "fileReplacements": [
      {
         "replace": "src/environments/environment.ts",
         "with": "src/environments/environment.prod.ts"
      }
   ],
}

Cuando se ejecuta el comando de compilación, el archivo se reemplaza por src/environments/environment.prod.ts. La configuración adicional como la puesta en escena o las pruebas 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.

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