{"id":1960,"date":"2023-11-23T12:07:12","date_gmt":"2023-11-23T15:07:12","guid":{"rendered":"https:\/\/stackcodelab.com\/blog\/?p=1960"},"modified":"2023-11-23T12:21:22","modified_gmt":"2023-11-23T15:21:22","slug":"capitulo-2-componentes-en-angular","status":"publish","type":"post","link":"https:\/\/stackcodelab.com\/blog\/capitulo-2-componentes-en-angular\/","title":{"rendered":"Cap\u00edtulo 2: Componentes en Angular"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>Introducci\u00f3n:<\/em> Los componentes son fundamentales en Angular. En este cap\u00edtulo, exploraremos en detalle c\u00f3mo trabajar con componentes en Angular, incluyendo su creaci\u00f3n, la comunicaci\u00f3n entre componentes, el uso de directivas estructurales y el ciclo de vida de un componente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2.1. Creaci\u00f3n de componentes<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u00bfQu\u00e9 son los componentes en Angular? <\/strong>En Angular, los componentes son la unidad b\u00e1sica de la interfaz de usuario. Cada componente consiste en una vista (plantilla HTML), la l\u00f3gica que controla esa vista (archivo TypeScript) y, opcionalmente, estilos (hojas de estilo CSS o SCSS). Los componentes se utilizan para dividir la interfaz de usuario en partes m\u00e1s peque\u00f1as y reutilizables.<\/li>\n\n\n\n<li><strong>Creaci\u00f3n de componentes personalizados <\/strong>Puedes crear componentes personalizados en Angular utilizando Angular CLI o manualmente. La creaci\u00f3n manual implica definir un archivo TypeScript, una plantilla HTML y, opcionalmente, un archivo de estilo.<\/li>\n\n\n\n<li><strong>Estructura de un componente <\/strong>Un componente en Angular consta de tres partes principales: el archivo TypeScript que define la l\u00f3gica, la plantilla HTML que define la vista y, opcionalmente, un archivo de estilo que define la apariencia. En el archivo TypeScript, se definen las propiedades y m\u00e9todos del componente.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes un ejemplo de la estructura b\u00e1sica de un componente en Angular, que incluye el archivo TypeScript, la plantilla HTML y la hoja de estilo CSS:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Estructura de un componente en Angular:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Archivo TypeScript (product.component.ts):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-product', \/\/ Selector del componente\r\n  templateUrl: '.\/product.component.html', \/\/ Ruta a la plantilla HTML\r\n  styleUrls: &#91;'.\/product.component.css'] \/\/ Ruta a la hoja de estilo CSS\r\n})\r\nexport class ProductComponent {\r\n  \/\/ Propiedades y l\u00f3gica del componente\r\n  productName: string = 'Producto de ejemplo';\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Plantilla HTML (product.component.html):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Plantilla HTML del componente -->\r\n&lt;div>\r\n  &lt;h2>Detalles del Producto&lt;\/h2>\r\n  &lt;p>Nombre del Producto: {{ productName }}&lt;\/p>\r\n&lt;\/div>\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Hoja de estilo CSS (product.component.css):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Hoja de estilo CSS del componente *\/\r\nh2 {\r\n  color: #333;\r\n}\r\n\r\np {\r\n  font-size: 18px;\r\n  color: #666;\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En este ejemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>El archivo TypeScript (<code>product.component.ts<\/code>) contiene la definici\u00f3n del componente, incluyendo su selector, la ruta a la plantilla HTML y la ruta a la hoja de estilo CSS. Tambi\u00e9n define la clase del componente, donde puedes agregar propiedades y l\u00f3gica espec\u00edfica del componente.<\/li>\n\n\n\n<li>La plantilla HTML (<code>product.component.html<\/code>) define la estructura visual del componente. Utiliza interpolaci\u00f3n <code>{{}}<\/code> para mostrar el valor de la propiedad <code>productName<\/code>.<\/li>\n\n\n\n<li>La hoja de estilo CSS (<code>product.component.css<\/code>) contiene reglas de estilo para personalizar la apariencia del componente. En este caso, se establecen estilos para los elementos <code>h2<\/code> y <code>p<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Esta es la estructura b\u00e1sica de un componente en Angular. El archivo TypeScript define la l\u00f3gica y las propiedades, la plantilla HTML define la estructura visual y la hoja de estilo CSS define los estilos para el componente. Cuando este componente se utiliza en una aplicaci\u00f3n Angular, se renderizar\u00e1 en la vista seg\u00fan la plantilla HTML y se aplicar\u00e1n los estilos definidos en la hoja de estilo CSS.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Enlace de datos en componentes <\/strong>Angular admite el enlace de datos bidireccional, lo que significa que los datos pueden fluir tanto desde el componente a la vista como desde la vista al componente. Esto permite una actualizaci\u00f3n autom\u00e1tica de la vista cuando los datos cambian en el componente.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes un ejemplo de enlace de datos en componentes de Angular. Supongamos que tenemos un componente llamado <code>ProductComponent<\/code> que muestra informaci\u00f3n de un producto y permite a los usuarios cambiar el nombre del producto mediante un formulario de entrada.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>product.component.ts (archivo TypeScript):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-product',\r\n  templateUrl: '.\/product.component.html',\r\n})\r\nexport class ProductComponent {\r\n  productName: string = 'Producto inicial'; \/\/ Propiedad del componente\r\n\r\n  \/\/ M\u00e9todo para cambiar el nombre del producto\r\n  changeProductName(newName: string) {\r\n    this.productName = newName;\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>product.component.html (plantilla HTML):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div>\r\n  &lt;h2>Detalles del Producto&lt;\/h2>\r\n  &lt;p>Nombre del Producto: {{ productName }}&lt;\/p>\r\n\r\n  &lt;label for=\"newName\">Nuevo Nombre del Producto:&lt;\/label>\r\n  &lt;input type=\"text\" id=\"newName\" &#91;(ngModel)]=\"productName\">\r\n\r\n  &lt;button (click)=\"changeProductName('Producto Modificado')\">Cambiar Nombre&lt;\/button>\r\n&lt;\/div>\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En este ejemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>El componente <code>ProductComponent <\/code>tiene una propiedad llamada <code>productName <\/code>que representa el nombre del producto. Este nombre se muestra en la plantilla.<\/li>\n\n\n\n<li>En la plantilla HTML, utilizamos el enlace de datos para mostrar el valor de <code>productName <\/code>en la etiqueta <code>&lt;p&gt;<\/code>. Cualquier cambio en <code>productName <\/code>se reflejar\u00e1 autom\u00e1ticamente en la vista.<\/li>\n\n\n\n<li>Tambi\u00e9n tenemos un formulario de entrada con <code>[(ngModel)]=\"productName\"<\/code>, que permite a los usuarios cambiar el nombre del producto. El enlace bidireccional <code>(ngModel) <\/code>asegura que cualquier cambio en el formulario actualice la propiedad <code>productName<\/code> en el componente y, a su vez, actualice la vista.<\/li>\n\n\n\n<li>Finalmente, tenemos un bot\u00f3n que llama al m\u00e9todo <code>changeProductName <\/code>cuando se hace clic. Este m\u00e9todo cambia el nombre del producto en el componente, lo que tambi\u00e9n se reflejar\u00e1 en la vista debido al enlace de datos.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">El enlace de datos en Angular permite una comunicaci\u00f3n fluida entre los componentes y la vista, lo que facilita la actualizaci\u00f3n de la interfaz de usuario en funci\u00f3n de los cambios en los datos del componente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2.2. Comunicaci\u00f3n entre componentes<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Comunicaci\u00f3n entre componentes en Angular <\/strong>En una aplicaci\u00f3n Angular, es com\u00fan que los componentes necesiten comunicarse entre s\u00ed. Esto se puede lograr de diversas maneras:<ul><li><strong>Comunicaci\u00f3n entre componentes padres e hijos: <\/strong>Los componentes pueden pasar datos desde componentes padres a componentes hijos utilizando propiedades de entrada (Input).<\/li><\/ul><ul><li><strong>Comunicaci\u00f3n entre componentes hijos y padres:<\/strong> Los componentes hijos pueden comunicarse con sus componentes padres utilizando eventos personalizados.<\/li><\/ul>\n<ul class=\"wp-block-list\">\n<li><strong>Servicios compartidos:<\/strong> Los servicios pueden utilizarse como intermediarios para la comunicaci\u00f3n entre componentes que no est\u00e1n directamente relacionados en la jerarqu\u00eda de componentes.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">La comunicaci\u00f3n entre componentes en Angular se puede lograr de varias formas, y una de las formas m\u00e1s comunes es a trav\u00e9s de la interacci\u00f3n entre componentes padres e hijos. Aqu\u00ed tienes una tabla que muestra c\u00f3mo se puede lograr la comunicaci\u00f3n entre componentes en Angular:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><td><strong>Tipo de Comunicaci\u00f3n<\/strong><\/td><td><strong>Descripci\u00f3n<\/strong><\/td><\/tr><\/thead><tbody><tr><td>Propiedades de Entrada (Input)<\/td><td>Un componente padre puede pasar datos a un componente hijo utilizando propiedades de entrada (Input). En el componente hijo, estas propiedades se decoran con <code>@Input()<\/code>, lo que permite que el padre proporcione datos al componente hijo.<\/td><\/tr><tr><td>Eventos Personalizados<\/td><td>Un componente hijo puede emitir eventos personalizados que son capturados por un componente padre. Los eventos personalizados se definen en el componente hijo y se capturan en el componente padre utilizando el enlace <code>(event) <\/code>en la plantilla.<\/td><\/tr><tr><td>Servicios Compartidos<\/td><td>Los servicios son instancias compartidas que pueden ser inyectadas en m\u00faltiples componentes. Los componentes pueden utilizar un servicio compartido para intercambiar datos y comunicarse.<\/td><\/tr><tr><td>ViewChild y ViewChildren<\/td><td><code>ViewChild <\/code>y <code>ViewChildren <\/code>son decoradores que permiten a un componente padre acceder a instancias de componentes hijos directos o elementos del DOM dentro de la vista. Esto se utiliza para interactuar con componentes hijos directamente.<\/td><\/tr><tr><td>Output Decorator<\/td><td>El decorador <code>@Output <\/code>se utiliza para emitir eventos personalizados desde un componente hijo. Los eventos emitidos pueden ser capturados por un componente padre y utilizados para comunicarse con el componente hijo.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Estas son algunas de las formas m\u00e1s comunes de lograr la comunicaci\u00f3n entre componentes en Angular. La elecci\u00f3n de la t\u00e9cnica depende de la relaci\u00f3n entre los componentes y de la direcci\u00f3n de la comunicaci\u00f3n (de padre a hijo o de hijo a padre). Puedes utilizar una o varias de estas t\u00e9cnicas en funci\u00f3n de los requisitos de tu aplicaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2.3. Directivas estructurales<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u00bfQu\u00e9 son las directivas estructurales en Angular? <\/strong>En Angular, las directivas estructurales son instrucciones en la plantilla HTML que te permiten modificar la estructura del DOM (Document Object Model) de tu aplicaci\u00f3n en funci\u00f3n de condiciones espec\u00edficas. Las directivas estructurales se utilizan com\u00fanmente para controlar la visibilidad, repetir elementos y alterar la estructura de la p\u00e1gina. A continuaci\u00f3n, se mencionan todas las directivas estructurales en Angular:<\/li>\n\n\n\n<li><strong>NgIf: <\/strong>Permite agregar o eliminar elementos del DOM en funci\u00f3n de una expresi\u00f3n condicional. Por ejemplo, puedes mostrar u ocultar un elemento seg\u00fan una condici\u00f3n.<\/li>\n\n\n\n<li><strong>NgFor:<\/strong> Se utiliza para iterar sobre una colecci\u00f3n (como un arreglo) y crear elementos repetidos en el DOM. Puedes usarlo para mostrar una lista de elementos o repetir un contenido de acuerdo con una estructura de datos.<\/li>\n\n\n\n<li><strong>NgSwitch: <\/strong>Permite realizar una selecci\u00f3n entre varias opciones basadas en una expresi\u00f3n. Puedes usarlo para alternar entre diferentes bloques de contenido seg\u00fan el valor de una variable.<\/li>\n\n\n\n<li><strong>NgSwitchCase: <\/strong>Se utiliza junto con <code>NgSwitch<\/code> para definir los casos espec\u00edficos a considerar dentro de una estructura de conmutaci\u00f3n (switch).<\/li>\n\n\n\n<li><strong>NgSwitchDefault: <\/strong>Define el caso predeterminado cuando ning\u00fan caso de <code>NgSwitchCase <\/code>coincide con la expresi\u00f3n de <code>NgSwitch<\/code>.<\/li>\n\n\n\n<li><strong>NgTemplateOutlet: <\/strong>Permite insertar din\u00e1micamente contenido en una plantilla usando un marcador de posici\u00f3n. Es \u00fatil para la generaci\u00f3n din\u00e1mica de plantillas.<\/li>\n\n\n\n<li><strong>NgForOf: <\/strong>Una variante optimizada de <code>NgFor <\/code>que se utiliza para iterar sobre iterables de Angular, como <code>NgForOf <\/code>y <code>NgForTrackBy<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Estas son las principales directivas estructurales en Angular que te permiten controlar la estructura del DOM en funci\u00f3n de condiciones o iterar sobre datos. Puedes utilizar estas directivas para crear plantillas din\u00e1micas y adaptar la visualizaci\u00f3n de tu aplicaci\u00f3n web a diferentes situaciones.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Uso de <\/strong><code><strong>*ngIf <\/strong><\/code><strong>y <\/strong><code><strong>*ngFor <\/strong><\/code>Aprender\u00e1s c\u00f3mo utilizar las directivas estructurales <code>*ngIf <\/code>y <code>*ngFor <\/code>en ejemplos pr\u00e1cticos. <code>*ngIf<\/code> se utiliza para mostrar o ocultar elementos seg\u00fan una condici\u00f3n, y <code>*ngFor<\/code> se utiliza para repetir elementos basados en una lista de datos.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2.4. Ciclo de vida de un componente<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>El ciclo de vida de un componente en Angular <\/strong>Los componentes en Angular pasan por una serie de fases o estados desde su creaci\u00f3n hasta su destrucci\u00f3n. Comprender el ciclo de vida de un componente es esencial para realizar tareas como inicializaci\u00f3n de datos, ejecuci\u00f3n de c\u00f3digo despu\u00e9s de que la vista se ha renderizado y limpieza de recursos.<\/li>\n\n\n\n<li><strong>M\u00e9todos del ciclo de vida del componente <\/strong>Aprender\u00e1s acerca de los m\u00e9todos del ciclo de vida del componente, como <code>ngOnInit<\/code>, <code>ngOnChanges<\/code>, <code>ngAfterViewInit<\/code>, <code>ngOnDestroy <\/code>y otros. Estos m\u00e9todos te permiten realizar acciones espec\u00edficas en diferentes momentos del ciclo de vida del componente.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes una tabla que representa el ciclo de vida de un componente en Angular y las fases clave del ciclo de vida del componente:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><td><strong>Fase del Ciclo de Vida<\/strong><\/td><td><strong>Descripci\u00f3n<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>ngOnChanges<\/strong><\/td><td>Se llama cuando los valores de las propiedades de entrada (<code>@Input()<\/code>) del componente cambian. Permite detectar cambios en las entradas y realizar acciones en respuesta a estos cambios.<\/td><\/tr><tr><td><strong>ngOnInit<\/strong><\/td><td>Se llama una vez que el componente ha sido inicializado. Es el lugar adecuado para realizar tareas de inicializaci\u00f3n, como obtener datos iniciales o configurar sus propiedades.<\/td><\/tr><tr><td><strong>ngDoCheck<\/strong><\/td><td>Se llama durante cada ciclo de detecci\u00f3n de cambios en Angular. Permite realizar tareas de detecci\u00f3n de cambios personalizadas y optimizaciones manuales.<\/td><\/tr><tr><td><strong>ngAfterContentInit<\/strong><\/td><td>Se llama despu\u00e9s de que el contenido proyectado (proyecciones de contenido) ha sido inicializado. Es \u00fatil cuando un componente contiene contenido proyectado (ng-content) y necesita interactuar con \u00e9l.<\/td><\/tr><tr><td><strong>ngAfterContentChecked<\/strong><\/td><td>Se llama despu\u00e9s de cada ciclo de detecci\u00f3n de cambios que verifica el contenido proyectado. Permite realizar acciones despu\u00e9s de que se haya verificado el contenido proyectado.<\/td><\/tr><tr><td><strong>ngAfterViewInit<\/strong><\/td><td>Se llama despu\u00e9s de que la vista del componente y sus vistas secundarias (hijas) se hayan inicializado. Puede usarse para interactuar con el DOM despu\u00e9s de que la vista est\u00e9 lista.<\/td><\/tr><tr><td><strong>ngAfterViewChecked<\/strong><\/td><td>Se llama despu\u00e9s de cada ciclo de detecci\u00f3n de cambios que verifica la vista y sus vistas secundarias. Permite realizar acciones despu\u00e9s de que se haya verificado la vista.<\/td><\/tr><tr><td><strong>ngOnDestroy<\/strong><\/td><td>Se llama justo antes de que se elimine un componente. Es el lugar adecuado para realizar la limpieza de recursos, como la eliminaci\u00f3n de suscripciones a observables o la liberaci\u00f3n de recursos.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Estas son las principales fases del ciclo de vida de un componente en Angular. Cada fase se llama en un momento espec\u00edfico durante la vida \u00fatil del componente y permite realizar acciones y l\u00f3gica personalizadas en respuesta a eventos espec\u00edficos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2.5. Ejemplos Pr\u00e1cticos:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Creaci\u00f3n de componentes personalizados en Angular <\/strong>Te guiar\u00e9 a trav\u00e9s del proceso de creaci\u00f3n de componentes personalizados en Angular utilizando Angular CLI. Tambi\u00e9n ver\u00e1s c\u00f3mo definir propiedades de entrada (Input) en un componente.<\/li>\n\n\n\n<li><strong>Comunicaci\u00f3n entre componentes <\/strong>Ver\u00e1s ejemplos pr\u00e1cticos de comunicaci\u00f3n entre componentes, incluyendo c\u00f3mo pasar datos desde un componente padre a un componente hijo utilizando propiedades de entrada y c\u00f3mo emitir eventos desde un componente hijo para comunicarse con un componente padre.<\/li>\n\n\n\n<li><strong>Uso de directivas estructurales <\/strong>Aprender\u00e1s a utilizar directivas estructurales como <code>*ngIf <\/code>y <code>*ngFor <\/code>en ejemplos pr\u00e1cticos. Ver\u00e1s c\u00f3mo condicionar la visualizaci\u00f3n de elementos y c\u00f3mo iterar sobre listas de datos en tus plantillas.<\/li>\n\n\n\n<li><strong>Gesti\u00f3n del ciclo de vida del componente <\/strong>Te mostrar\u00e9 c\u00f3mo utilizar los m\u00e9todos del ciclo de vida del componente en ejemplos pr\u00e1cticos. Aprender\u00e1s a realizar tareas de inicializaci\u00f3n, limpieza de recursos y ejecuci\u00f3n de c\u00f3digo en momentos espec\u00edficos del ciclo de vida del componente.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes un ejemplo de c\u00f3mo crear componentes personalizados en Angular, establecer la comunicaci\u00f3n entre componentes, utilizar directivas estructurales y gestionar el ciclo de vida del componente. En este ejemplo, construiremos una lista de tareas donde los componentes interactuar\u00e1n entre s\u00ed.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Creaci\u00f3n de Componentes Personalizados:<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Crearemos tres componentes: <code>TaskListComponent<\/code>, <code>AddTaskComponent <\/code>y <code>TaskItemComponent<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>task-list.component.ts (TaskListComponent):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-task-list',\r\n  templateUrl: '.\/task-list.component.html',\r\n})\r\nexport class TaskListComponent implements OnInit {\r\n  tasks: string&#91;] = &#91;];\r\n\r\n  ngOnInit() {\r\n    \/\/ Inicializamos la lista de tareas con algunas tareas de ejemplo\r\n    this.tasks = &#91;'Tarea 1', 'Tarea 2', 'Tarea 3'];\r\n  }\r\n\r\n  addTask(newTask: string) {\r\n    this.tasks.push(newTask);\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>add-task.component.ts (AddTaskComponent):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component, Output, EventEmitter } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-add-task',\r\n  templateUrl: '.\/add-task.component.html',\r\n})\r\nexport class AddTaskComponent {\r\n  newTask: string = '';\r\n\r\n  @Output() taskAdded = new EventEmitter&lt;string>();\r\n\r\n  addTask() {\r\n    this.taskAdded.emit(this.newTask);\r\n    this.newTask = '';\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>task-item.component.ts (TaskItemComponent):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component, Input } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-task-item',\r\n  templateUrl: '.\/task-item.component.html',\r\n})\r\nexport class TaskItemComponent {\r\n  @Input() task: string = '';\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Plantillas HTML:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>task-list.component.html:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h2>Lista de Tareas&lt;\/h2>\r\n&lt;ul>\r\n  &lt;li *ngFor=\"let task of tasks\">\r\n    &lt;app-task-item &#91;task]=\"task\">&lt;\/app-task-item>\r\n  &lt;\/li>\r\n&lt;\/ul>\r\n&lt;app-add-task (taskAdded)=\"addTask($event)\">&lt;\/app-add-task>\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>add-task.component.html:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div>\r\n  &lt;input type=\"text\" &#91;(ngModel)]=\"newTask\" placeholder=\"Nueva Tarea\">\r\n  &lt;button (click)=\"addTask()\">Agregar Tarea&lt;\/button>\r\n&lt;\/div>\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>task-item.component.html:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{{ task }}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Comunicaci\u00f3n entre Componentes:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>TaskListComponent <\/code>muestra la lista de tareas y recibe nuevas tareas del componente <code>AddTaskComponent<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>AddTaskComponent <\/code>emite un evento <code>taskAdded <\/code>cuando se agrega una nueva tarea.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>TaskItemComponent <\/code>muestra una tarea individual y recibe la tarea a mostrar desde <code>TaskListComponent<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Directivas Estructurales:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>*ngFor<\/code> se utiliza en <code>task-list.component.html <\/code>para repetir elementos y mostrar la lista de tareas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>*ngFor <\/code>se utiliza para iterar sobre las tareas y crear elementos <code>&lt;app-task-item&gt; <\/code>para cada tarea.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Gesti\u00f3n del Ciclo de Vida:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>ngOnInit <\/code>en <code>TaskListComponent <\/code>se utiliza para inicializar la lista de tareas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No es necesario gestionar expl\u00edcitamente otras fases del ciclo de vida en este ejemplo, pero puedes implementarlas si es necesario.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este ejemplo muestra la creaci\u00f3n de componentes personalizados, la comunicaci\u00f3n entre ellos, el uso de directivas estructurales (<code>*ngFor<\/code>) y una parte de la gesti\u00f3n del ciclo de vida (<code>ngOnInit<\/code>) en Angular. Puedes ampliar este ejemplo para incluir m\u00e1s funcionalidad y caracter\u00edsticas seg\u00fan tus necesidades.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este cap\u00edtulo profundiza en la creaci\u00f3n y gesti\u00f3n de componentes en Angular, as\u00ed como en la comunicaci\u00f3n entre ellos y el uso de directivas estructurales. Adem\u00e1s, aprender\u00e1s c\u00f3mo aprovechar el ciclo de vida del componente para realizar tareas espec\u00edficas en momentos cruciales. Los ejemplos pr\u00e1cticos te ayudar\u00e1n a aplicar estos conceptos en situaciones reales.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introducci\u00f3n: Los componentes son fundamentales en Angular. En este cap\u00edtulo, exploraremos en detalle c\u00f3mo trabajar con componentes en Angular, incluyendo su creaci\u00f3n, la comunicaci\u00f3n entre componentes, el uso de directivas estructurales y el ciclo de vida de un componente. 2.1. Creaci\u00f3n de componentes Aqu\u00ed tienes un ejemplo de la estructura b\u00e1sica de un componente en [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1961,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[38],"tags":[],"class_list":["post-1960","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-y-otras-hierbas"],"uagb_featured_image_src":{"full":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Componentes-en-Angular.jpg",1000,667,false],"thumbnail":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Componentes-en-Angular-150x150.jpg",150,150,true],"medium":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Componentes-en-Angular-300x200.jpg",300,200,true],"medium_large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Componentes-en-Angular-768x512.jpg",768,512,true],"large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Componentes-en-Angular.jpg",1000,667,false],"1536x1536":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Componentes-en-Angular.jpg",1000,667,false],"2048x2048":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Componentes-en-Angular.jpg",1000,667,false]},"uagb_author_info":{"display_name":"arquitecto","author_link":"https:\/\/stackcodelab.com\/blog\/author\/arquitecto\/"},"uagb_comment_info":0,"uagb_excerpt":"Introducci\u00f3n: Los componentes son fundamentales en Angular. En este cap\u00edtulo, exploraremos en detalle c\u00f3mo trabajar con componentes en Angular, incluyendo su creaci\u00f3n, la comunicaci\u00f3n entre componentes, el uso de directivas estructurales y el ciclo de vida de un componente. 2.1. Creaci\u00f3n de componentes Aqu\u00ed tienes un ejemplo de la estructura b\u00e1sica de un componente en&hellip;","_links":{"self":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/comments?post=1960"}],"version-history":[{"count":1,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1960\/revisions"}],"predecessor-version":[{"id":1962,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1960\/revisions\/1962"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media\/1961"}],"wp:attachment":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media?parent=1960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/categories?post=1960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/tags?post=1960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}