Angular7 - Componentes

La mayor parte del desarrollo con Angular 7 se realiza en los componentes. Los componentes son básicamente clases que interactúan con el archivo .html del componente, que se muestra en el navegador. Hemos visto la estructura del archivo 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 será 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.

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

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

De manera similar, podemos crear componentes y vincularlos usando el selector en el app.component.html Presentar según nuestros requisitos.