COMPONENTES en ANGULAR 17 💜 | ¿Qué es un componente? | Explicación y conceptos básicos 2024

Summary

En este video instructivo, el presentador explica de manera detallada cómo crear componentes en Angular, abarcando conceptos fundamentales como la generación de componentes mediante la terminal, la estructura de archivos que los componen (HTML, CSS y TypeScript), y la importancia de cada uno de ellos. Además, aborda temas como la encapsulación de estilos, la importación de dependencias necesarias y la lógica de programación en el archivo TypeScript. A lo largo de la explicación, el presentador utiliza ejemplos prácticos para facilitar la comprensión y alienta a los espectadores a dejar comentarios sobre posibles temas futuros que deseen explorar.

Takeaways

• 😃 Angular utiliza la terminal (CLI) para generar componentes, servicios y otras funcionalidades mediante el comando 'ng generate'.
• 🤖 Los componentes en Angular se componen de 4 archivos: HTML (vista), CSS (estilos), TypeScript (lógica) y uno de pruebas unitarias.
• ✨ El archivo HTML alberga el código HTML junto con la sintaxis especial de Angular (interpolación, directivas, etc.).
• 💄 El archivo CSS contiene los estilos CSS encapsulados y aplicados únicamente al componente en cuestión.
• 🧠 El archivo TypeScript (*.ts) es donde se define y declara el componente, además de contener toda la lógica de programación.
• 🔗 El 'selector' es el nombre que se utiliza para llamar e insertar el componente en otros lugares de la aplicación.
• ⚡ La propiedad 'standalone' indica si el componente es independiente y no requiere de un módulo para importarlo.
• 📥 Los 'imports' permiten importar dependencias (como módulos) que se utilicen dentro del componente.
• 🔍 'templateUrl' y 'styleUrls' especifican las rutas de los archivos HTML y CSS que se utilizarán en el componente.
• 🚀 Dentro de las llaves '{}' del archivo TypeScript se gestiona toda la lógica, eventos y señales del componente.

Q & A

¿Cuál es el propósito principal del video?

El principal propósito del video es explicar qué son los componentes en Angular y cómo crearlos.

¿Qué comando se utiliza para generar un nuevo componente en Angular?

El comando utilizado para generar un nuevo componente en Angular es 'ng generate component'.

¿Qué archivos se crean al generar un nuevo componente?

Al generar un nuevo componente, se crean cuatro archivos: el HTML, el CSS, el TypeScript y el archivo de pruebas.

¿Qué función cumple el archivo HTML de un componente?

El archivo HTML de un componente contiene el código HTML que define la estructura y el contenido visual del componente.

¿Cómo se aplican los estilos CSS a un componente en Angular?

Los estilos CSS se aplican específicamente al componente donde se definen, encapsulados dentro del mismo. No afectan a otros componentes a menos que se importen explícitamente.

¿Qué representa el archivo TypeScript en un componente de Angular?

El archivo TypeScript contiene la lógica del componente, donde se definen las propiedades, métodos y eventos que controlan su comportamiento.

¿Qué significa la propiedad 'standalone' en un componente de Angular?

La propiedad 'standalone' indica que el componente no necesita un módulo para importarlo y puede funcionar de manera independiente.

¿Cómo se importan dependencias en un componente de Angular?

Las dependencias se importan en el archivo TypeScript del componente utilizando la sintaxis de importación de ES6.

¿Qué función cumple la propiedad 'templateUrl' en un componente de Angular?

La propiedad 'templateUrl' especifica la ruta del archivo HTML que se utilizará como plantilla para el componente.

¿Qué se debe evitar hacer en el archivo TypeScript de un componente de Angular?

Se debe evitar incluir lógica fuera de las llaves de la clase del componente, ya que ese código no se ejecutará.

Outlines

00:00

🖥️ Introducción y creación de componentes en Angular

El párrafo introduce el tema de los componentes en Angular. Menciona problemas recientes con el hardware del equipo que retrasaron el contenido. Explica que se enfocará en explicar los conceptos básicos de los componentes en varios videos cortos, a menos que los usuarios prefieran un video largo. Luego, muestra cómo crear un componente utilizando el comando 'ng generate component' en la terminal, especificando la ruta y el nombre del componente.

05:00

🔀 Importar el componente creado en app.component

Este párrafo detalla cómo importar el componente recién creado en el archivo app.component.ts para poder utilizarlo en la aplicación. Explica que se debe copiar el selector del componente desde su archivo .ts y pegarlo en el HTML del app.component. Luego, muestra cómo importar el componente utilizando la sintaxis de importación de Angular en el archivo app.component.ts.

10:01

📁 Estructura de archivos de un componente

Aquí se explica la estructura de archivos que compone un componente en Angular. Se detallan los cuatro archivos principales: el HTML para la plantilla, el CSS para los estilos encapsulados, el archivo .ts para la lógica y el archivo .spec.ts para las pruebas unitarias. Se enfatiza que los estilos CSS están encapsulados dentro del componente y no afectan a otros componentes, a menos que se especifique explícitamente.

15:03

🧩 Propiedades y configuración de un componente

Este párrafo describe las propiedades principales de un componente en Angular: selector, standalone, imports, templateUrl y styleUrls. Se explica el propósito de cada una y se muestra un ejemplo de cómo importar el módulo FormsModule para utilizar ngModel en el componente. También se menciona que dentro de la clase del componente es donde se escribirá la lógica en TypeScript.

20:04

🚀 Resumen y próximos pasos

El último párrafo resume los conceptos clave de los componentes en Angular y reitera la importancia de entender estos conceptos básicos antes de avanzar a temas más complejos. Promete traer más contenido relacionado con Angular y React, así como talleres de interfaces y herramientas de inteligencia artificial. Finaliza disculpándose por los retrasos en el contenido debido a problemas con el hardware y se despide.

Keywords

💡Componente

Un componente es una pieza fundamental de una aplicación en Angular. Es un bloque de construcción reutilizable que combina estructura (HTML), estilos (CSS) y lógica (TypeScript). En el video, se explica cómo crear un componente en Angular y se destacan sus tres archivos principales: el HTML para la estructura, el CSS para los estilos y el TypeScript para la lógica. Los componentes son fundamentales en Angular, ya que permiten una organización modular y reutilizable del código.

💡Angular

Angular es un framework de desarrollo de aplicaciones web de código abierto, mantenido por Google. Se utiliza para construir aplicaciones de una sola página (SPA) y aplicaciones web escalables. En el video, se utiliza Angular como el marco de trabajo principal para explicar los conceptos y la creación de componentes. Angular promueve un enfoque modular y basado en componentes, lo que facilita el desarrollo y el mantenimiento de aplicaciones complejas.

💡ng generate

El comando 'ng generate' (abreviado como 'ng g') es una herramienta de línea de comandos de Angular CLI que se utiliza para generar diversos elementos en una aplicación Angular, como componentes, servicios, módulos, entre otros. En el video, se muestra cómo utilizar 'ng generate component' para crear un nuevo componente de manera rápida y sencilla, siguiendo las convenciones y estructuras predeterminadas de Angular.

💡Selector

El selector es una propiedad de un componente en Angular que define cómo se puede hacer referencia a ese componente desde otros elementos de la aplicación. En el video, se explica que el selector se utiliza en el HTML de otros componentes para incluir y renderizar el componente correspondiente. Por ejemplo, si un componente tiene un selector 'app-ejemplo', se puede utilizar la etiqueta <app-ejemplo> en el HTML de otro componente para representarlo.

💡Standalone

La propiedad 'standalone' es una configuración en los componentes de Angular que determina si un componente es independiente o no de un módulo. Cuando 'standalone' está establecido en 'true', el componente no requiere ser importado en un módulo y puede gestionar sus propias dependencias directamente. En el video, se explica que esta propiedad permite que un componente se trate como una pieza única, lo que simplifica su gestión y uso.

💡Importar dependencias

En Angular, es necesario importar las dependencias que se utilizarán en un componente. Esto se realiza en el archivo TypeScript del componente, utilizando la sintaxis de importación adecuada. En el video, se muestra cómo importar el 'FormsModule' para utilizar la directiva 'ngModel' en el componente. Importar las dependencias correctamente es fundamental para que el componente funcione correctamente y pueda acceder a los módulos, servicios o funcionalidades necesarias.

💡templateUrl

La propiedad 'templateUrl' en un componente de Angular especifica la ruta o ubicación del archivo HTML que contiene la estructura y contenido visual del componente. En el video, se explica que Angular crea un archivo HTML para cada componente por defecto y que esta propiedad se utiliza para vincular ese archivo HTML al componente correspondiente. De esta manera, el componente puede renderizar la estructura HTML definida en ese archivo.

💡styleUrls

La propiedad 'styleUrls' en un componente de Angular es una matriz que especifica las rutas o ubicaciones de los archivos CSS que contienen los estilos para ese componente. En el video, se destaca que los estilos definidos en estos archivos CSS se aplican únicamente al componente en cuestión, lo que proporciona un ámbito y encapsulamiento adecuados para los estilos. Esto evita conflictos de estilos entre diferentes componentes y facilita el mantenimiento del código.

💡Lógica del componente

La lógica del componente se refiere al código TypeScript que define el comportamiento y la funcionalidad del componente. En el video, se explica que este código se encuentra dentro de las llaves de la clase del componente, y es donde se gestionan eventos, se definen propiedades, se implementan métodos y se realiza la programación necesaria para que el componente funcione correctamente. La lógica del componente es fundamental para dotar de interactividad y funcionalidad a la estructura HTML y los estilos CSS del componente.

💡Encapsulamiento de estilos

El encapsulamiento de estilos en Angular se refiere a la capacidad de los componentes de aislar sus estilos CSS, evitando que se apliquen a otros componentes o elementos de la aplicación. En el video, se menciona que los estilos definidos en el archivo CSS de un componente solo se aplicarán a ese componente específico, y no afectarán a otros componentes o elementos fuera de su ámbito. Este encapsulamiento facilita el mantenimiento y la reutilización de componentes, ya que los estilos no se solapan ni interfieren entre sí.

Highlights

En este video, el orador explicará detalladamente los componentes de Angular, que son la base para desarrollar aplicaciones con este framework.

El orador utilizará la versión 17.1.0 de Angular para crear y explicar los componentes.

Se muestra cómo crear un nuevo componente utilizando el comando 'ng generate component' en la terminal.

Se explica la estructura de los archivos generados para un componente: el HTML, el CSS, el TypeScript y el archivo de pruebas.

El archivo HTML contiene el código HTML del componente, incluyendo la posibilidad de usar funcionalidades adicionales de Angular como la interpolación de variables, directivas, etc.

El archivo CSS contiene los estilos que se aplican específicamente al componente, encapsulados y sin afectar a otros componentes.

El archivo TypeScript es donde se declara el componente y se incluye la lógica y la programación del mismo.

Se explica el decorador '@Component' y sus propiedades, como 'selector', 'standalone', 'imports', 'templateUrl' y 'styleUrls'.

El 'selector' es el nombre que se utiliza para renderizar el componente en el HTML.

La propiedad 'standalone' indica si el componente es independiente y no necesita un módulo para importarlo.

La propiedad 'imports' se utiliza para importar las dependencias que se necesitan en el componente, como módulos específicos.

Las propiedades 'templateUrl' y 'styleUrls' se utilizan para apuntar a los archivos HTML y CSS respectivamente.

Dentro de la clase del componente en el archivo TypeScript es donde se define toda la lógica y programación del mismo.

Se menciona que se abordarán conceptos más avanzados como ciclos de vida, inputs, outputs y formularios en futuros videos.

El orador recalca la importancia de comprender bien estos conceptos básicos de los componentes antes de avanzar a temas más complejos.

Transcripts

Qué onda gente Todo bien antes de

arrancar con la explicación de

componentes de angular quería comentarle

un par de cositas primero que nada r y

segundo en esta semana tuve unos ciertos

líos con el Hardware de la compu por eso

no pude traer el contenido que quería

traer la cantidad de contenido que

quería traer en estas semanas Pero bueno

ya está volviendo todo a lo normal eh Y

vamos a explicar lo que es un componente

en angular Porque si es muy lindo

programar en angular saber un montón de

cosas etcétera Pero vamos a las bases

voy a tratar de ir a las bases en todos

estos vdeos Por qué Porque voy a ir

específicamente puntos por puntos eh

obviamente de manera teórica los voy a

dividir en en videos ya me dirán ustedes

si quieren un video largo explicando

todo o varios videos cortitos que en el

caso de que ustedes lo lo Comenten bueno

específicamente de cada uno de los

conceptos en principio Esta es una

explicación general de lo que son los

componentes y vamos directamente con los

componentes de angular Esta es la

versión que estoy utilizando

17.1.0 de angular Okay esta es la

versión actual que estoy utilizando y

vamos a empezar con los componentes

primero que nada Cómo se crea un

componente bueno Esto es muy

sencillo acá podemos utilizar Bueno una

extensión etcétera Pero vamos a crearlo

de una manera eh nativa Por así decirlo

de una manera de la manera en la cual

nos recomienda eh las mismas personas de

angular primero que nada tenemos que

utilizar el comando de ng ng Uy acá se

me rompió un poquito ahí está ng y

después damos un espacio Cómo generamos

cualquier cosa en angular no solamente

componentes sino servicios también un

montón de otras cosas con la g de

generar o

gener generate generate en English Pero

bueno vamos a utilizar ng generate ng

generate e y le tenemos que especificar

qué es lo que queremos generar a angular

que qué es lo que queremos crear a

partir de este Comando en este caso

componente un component Okay perfecto

Acá hay distintas banderas pero vamos a

generar un componente de base o sea un

componente por defecto en una en una

raíz específica nosotros Así que no

vamos a agregarle ninguna bandera

ninguna opción adicional que después lo

voy a traer en otros videos o en otro o

en general un video largo ya como les

dije Déjenme en los comentarios saber

qué opinan ustedes pero bueno después de

este espacio después del componente

vamos a indicarle la ruta Disculpen acá

que se me rompe un poquito la la

terminal la ruta inicialmente empiezan

app O sea la carpeta app no empieza en

assets no empieza afuera no empieza acá

al lado del package Jon en App Okay

entonces acá nosotros podemos agregarle

e de cierta manera

carpetas dentro de carpetas o un montón

de carpetas dentro de otras carpetas qué

quiero decir con esto que acá nosotros

podemos no solamente darle el nombre a

nuestro componente porque acá después

del component nos va a pedir el nombre

sino también dentro de qué carpeta está

y no es necesaria que esté creada la

carpeta por ejemplo algo muy común que

hacemos en ul es poner components Slash

y el nombre del componente no solamente

en esto sino en el caso de que tengamos

Alguna algún sistema de de carpetas por

ejemplo o alguna arquitectura que

estemos implementando también unos

features Slash tal tal tal etcétera Pero

vamos a lo básico hoy cómo creamos un

componente en Sí Dentro de una carpeta

llamada component Bueno nombramos

components Slash y el nombre del

componente por ejemplo example porque lo

voy a llamar example de por sí Y luego

como les dije

anteriormente este este componente se va

a crear a partir de la raíz de App Ok de

la carpeta app la que tenemos acá le

damos a enter y esperamos la terminal va

a crear todos los archivos necesarios y

nos va a crear nuestro componente cuando

nosotros le mencionamos el nombre

ponente por lo general o sea eh Por

defecto no Por lo general por defecto

angular lo que hace es crear una carpeta

con el nombre de ese componente y dentro

todos los archivos que necesita que son

cuatro en sí el tercero sería el cuarto

Perdón sería el de testing que no se va

a utilizar a nivel de de producción

ahora pero sí se va a utilizar para

hacer pruebas unitarias cuando nosotros

estemos utilizando el testing si quieren

videos de testing también déjenmelo en

los comentarios con angular

17 Pero bueno la cuestión otro angular

también una versión anterior también

Déjenme en los comentarios los videos

que ustedes crean que que son son

necesarios para no solo la comunidad

sino que para para todos ustedes Bueno

la cuestión sin ir sin dar muchas

vueltas nosotros ya queramos nuestro

primer componente Okay lo tenemos acá

pero ese componente está de manera

aislada vamos a importarlo en el app

component para llamarlo porque acá

tenemos un mundo no no me interesa tener

el do mundo vamos a la app component

html y lo borramos nosotros tendríamos

que

tener la opción de acá de poner no sé

app example no lo tenemos por qué porque

lo tenemos que importar en el ts Cómo sé

yo este nombre Bueno lo

cortamos supongamos que no lo sé vamos

al tpt del example component y acá

tenemos el selector lo más fácil es

copiar

selector o sea entender que básicamente

siempre empiezan con app gu y el nombre

del componente que en uno de los videos

les mostré Cómo dejar eh que el example

y muy parecido a react Cómo llamar los

componentes como en react pero acá vamos

a a crearlo por defecto y dejarlo por

defecto Okay nosotros tendríamos que

tener en en el app component html algo

de este estilo Okay Se está quejando eh

visual Studio code Por qué Porque no lo

tenemos importado esto no lo reconoce

porque no lo tenemos importado vamos a

cerrar esta terminal vamos al punto ts

del app component en App component vamos

a ir a imports como esto es un standal

component y no utilizamos módulos vamos

a ir a imports ponemos una coma y

ponemos eh

example

component y Listo ya cuando guardamos ya

del otro lado no se nos está quejando Y

si guardamos de dos lugares obviamente

nos va a refrescar la página y nos va a

mostrar que example está está trabajando

por así decir lo está works Laura Laura

no en realidad funciona Pero bueno se

entiende el el siste la cuestión es la

siguiente nosotros acá ya tenemos el

example works que significa que está

funcionando correctamente nuestro eh

componente de ejemplo y vamos al example

works les voy a pedir que cierren estas

dos pestañas de component

html y vamos a el componente que tenemos

nosotros vamos a abrir el primero el

segundo el tercero y el cuarto todos los

archivos vamos a abrir Okay y acá voy a

minimizar un poco y si no lo puedo hacer

grande lo puedo dejar así voy a dejarlo

en pantalla completa porque porque

quiero explicar unas cositas acá acá lo

voy voy a dejar la cámara de este lado

Ahí estamos la cuestión es la siguiente

nosotros tenemos cu archivos voy a dejar

el html primero el css segundo y tercero

el punto ts y el de El de pruebas cuarto

el de pruebas lo voy a explicar

específicamente en un video de testing

pero básicamente lo que nosotros tenemos

acá en el momento en el que nosotros

corramos El Comando para utilizar

nuestra

aplicación de forma de prueba

básicamente utilizando los testing tanto

unitarios como eh los testing de

endtoend básicamente cuando corramos

nuestra aplicación en modo de testing

vamos a utilizar estos archivos spec.ts

Okay nosotros en el

enerve común y corriente no los vamos a

utilizar Okay Por qué Porque básicamente

estamos corriendo la aplicación como si

fuera producción ya en este caso bueno

no voy a explicar mucho específicamente

de esto voy a cerrar este archivo el

archivo de testing pero no lo vamos a

eliminar Por qué Porque son necesarios

para utilizar

la la las pruebas unitarias son

necesarios para utilizar nuestra

aplicación y testear correctamente Pero

bueno vamos a lo que son los tres

archivos fundamentales de

angular porque Sabiendo esto ya vas a

poder arrancar a desarrollar mucho más

rápido y obviamente vas a necesitar

testing pero eso es un poco más adelante

la la siguiente tenemos tres archivos de

angular que esto nos hace recordar mucho

a los tres archivos que tenemos en una

eh aplicación o en una página

interactiva Si se quiere eh cuando

empezamos a aprender de html css y

javascript nada más que acá en vez de

javascript tenemos t Script Pero bueno

es lo mismo o sea no es exactamente lo

mismo se entiende tenemos el html acá

Vamos a ingresar todo el código html

literalmente o sea acá todo lo que eh

esté

que sea compatible con html o sea toda

la sintaxis de html la podemos colocar

de esta manera Obviamente con

superpoderes que nos da

angular Como por ejemplo las las

variables la interpolación de variables

el el for el If etcétera Pero la

cuestión es que acá si html si un código

en html es válido lo vamos a poder

ingresar acá por ejemplo un h1 que diga

este Es mi primer componente vamos acá y

lo tenemos tenemos este texto

perfectamente colocado de esta manera

después tenemos el segundo archivo que

es los estilos y esto Cabe destacar que

estos estilos están encapsulados en

nuestro componente Qué significa esto

que yo acá No puedo venir no sé por

ejemplo no solo el body no puedo venir a

al ponerle acá en el app eh ponerle que

tenga un

div Class y tenga no sé ejemplo no puedo

venir a un componente y acá editar la

clase ejemplo Uy cualquier cosa copié

ejemplo y ponerle no sé background color

red por ponerle algo y display block por

poner algún ejemplo no puedo hacer esto

Ok por no va a afectar por porque el app

component html es el app padre Si se

quiere pero que incluso no está

sectorizado dentro de lo que es eh el el

componente Por qué Porque si yo Dentro

de este Pon me copio este div me lo

corto por ejemplo vamos

al al example component lo pegamos acá

ya lo tenemos acá

perfecto este con la clase ejemplo Vamos

a darle un with de 50 píxeles y un hate

de 50 píxeles tenemos el cuadrado este

que me acabo de acordar vamos a cortarlo

vuelvan al app component html y vamos a

pegarlo para demostrarles que no

funciona de esta manera o sea eh Porque

no le había agregado un ancho y un alto

discúlpenme ahí Ese fue error mío pero

para demostrarles lo pegamos en el app

component html y no funciona no está el

cuadradito rojo pero si lo pegamos en el

html del ejemplo del example Sí si está

acá por qué funciona así css en lo que

es angular dentro de los componentes

porque cuando se crea un componente

nosotros vamos al componente Sí al app

example no cuando se se crea el el

componente este que tiene la clase

ejemplo que efectivamente tiene la clase

ejemplo ven que acá Tiene un en content

no sé un ID todo rarísimo bueno bueno

acá en los estilos vamos a ver que el

ejemplo dentro del engine content con es

ID le está aplicando todas estas

propiedades SS Entonces qué quiere decir

esto que angular

activar un toquecito no sé si lo dejé

bien explicado pero el engine content es

lo que lo que quería mostrarles el

engine content con este ID le está

aplicando estos estilos a la derecha se

ve que le está aplicando estos estilos

que nosotros pusimos acá Okay eso es lo

que quería mencionar e en este en este

apartado que básicamente voy a dejarlo

de este lado Ahí está un poquito más

abajo perfecto que básicamente angular

lo que hace es sectorizar en temas de

componentes en interfaz de componentes

los estilos también incluso del html

okay Estamos claros en resumen el html

es nuestro html de toda la vida El css

es el que es lo son los estilos que

aplican a este

html quiero que quede bien claro que

aplican a este por qué Porque si yo acá

dejo la clase ejemplo y lo mismo que

antes o sea por ejemplo me corto

este esta clase ejemplo la guardamos

todo ya se fue el cuadradito vamos a un

eh a un componente padre le pegamos esta

clase de ejemplo lo guardamos todo no va

a aparecer cuadradito Por qué Porque

está todo bien con que sea la misma

clase la misma clase ejemplo pero no

está dentro el contenido que yo

especifiquen entonces si yo acá en el

example dejo una clase ejemplo no va a

afectar algo de afuera no va a afectar

dentro de nuestro componente se entiende

básicamente es eso vamos a ir para atrás

acá y lo dejamos donde lo dejamos vamos

a cerrar el app component

y dejamos los tres archivos como antes

básicamente es eso el css se aplica a

este html que tenemos acá luego tenemos

la parte más importante que que es el

punto ts el donde se crea el componente

s si es esta parte de components si esta

declaración no existiera no existe el

componente en ningún lado y se arma un

kilombo terrible nosotros lo que vamos a

hacer ahora es ver el app Okay nosotros

cortamos ese esa declaración de

componente Y actualizamos sí no hay nada

Hay un kilombo terrible nos da error por

todos lados Así que esta parte no la

cortemos por favor

e Pero bueno básicamente Esta es acá es

donde nosotros declaramos el componente

para que lo podamos importar en otros

componentes y utilizarlo a nuestro eh a

nuestro

gusto este component tiene un objeto por

dentro o sea nosotros cuando lo llamamos

este decorador se dice cuando nosotros

tenemos una palabra después de un ara es

un decorador cuando nosotros lo llamamos

dentro hay opciones que nosotros podemos

aplicarles a ese componente obviamente

Esto está generado por angular esto

siempre o sea no

no cambia cuando nosotros lo generamos

el ng generate component va a ser

siempre igual y nos va a traer bastantes

herramientas que nos van a facilitar la

vida pero hay más opciones que Podemos

agregar acá primero que nada vamos a

explicar un poco lo que es el selector

el selector básicamente es el nombre con

el cual yo llamo al elemento html que me

va a renderizar este componente Okay si

se entendió joya Si no vamos al app

component acá Este selector es el que yo

tengo acá por ejemplo quiero llamarlo

example así si yo lo guardo me va a dar

un error esto por qué Porque no está

reconociendo Cuál es este este

componente no está en ningún lado

entonces si yo lo cambio así a sample

con mayúscula va a seguir funcionando si

lo vuelvo para atrás no va a funcionar

si vuelvo para adante va a funcionar Y

así sucesivamente Okay voy a cambiarlo A

como estaba antes ustedes déjenlo como

ustedes

quieran el segundo la segunda opción es

standalone en true Qué significa esto

que básicamente convierte nuestro

componente en standalone que no necesita

eh de un módulo que importe que lo

importe a ese componente y que importe

todas las otras dependencias que

tengamos para funcionar Okay si no lo

tenemos en standalone van a ver que se

va a quejar de El imports este que este

imports antes estaba en un módulo pero

no vamos a ir con cuestiones de de

anteriores de angular si quieren que lo

explique

eh con

la aplicación con módulos con una

versión anterior de angular déjen en los

comentarios pero básicamente lo que

queremos decir con Stand igual a true

que Yo supongo que va a estar por

defecto en true en alguna

versión próxima lo que nos está diciendo

es Okay este componente tratalo como que

si fuera una pieza única y que yo voy a

importar dependencias depende de lo que

yo tenga en el contenido de mi

componente okay Bueno gente vamos a la

tercer propiedad de un componente la

tercer propiedad básicamente es un

import Qué significa esto que acá este

este import como anteriormente lo

mencioné depende de que el standalone

esté en true de que la propiedad

standalone esté en true por qué porque

acá vamos a importar todas la

dependencia que nosotros utilicemos en

este componente no vamos a importar

obviamente toda la aplicación de angular

Así que suponete que quiero importar una

dependencia para esto voy a utilizar un

input de tipo texto

que guardamos y lo tenemos de acá acá si

quiero capturar el valor voy a utilizar

un engine model por poner una opción

pero voy a utilizar el en model puedo

utilizar

eh formularios reactivos pero voy a

utilizar en este caso formularios

comunes un mod vamos a sear una

propiedad propiedad obviamente esto

puede ser una señal etcétera Pero vamos

a dejar una propiedad como ejemplo okay

y vamos a utilizar acá en el texto un

engine

model el engine model lo que va a ser

básicamente es a esta propiedad que

nosotros sete que creamos en nuestro

componente le va a setear el valor que

nosotros escribamos acá dentro Okay se

nos va a quejar angular Por qué Porque

justamente tenemos que utilizar el

import Cómo utilizamos el import acá

para solucionar ese problema Bueno un

forms

module Este es un caso específico del

eng model no tiene no es necesario que

utilicen el for mod para todo obviamente

pero es un ejemplo de en el cual

nosotros importamos un módulo en nuestro

nuestro componente de angular para lo

que estemos utilizando en este caso es

un forms modu Okay Esa es la cuestión el

tercer el cuarto perdón el cuarto la

cuarta propiedad es template

URL básicamente esta propiedad que ya lo

expliqué en algunos otros videos

nos va a pedir un String que básicamente

señale a

un a un código html que nosotros

tengamos que utilizar OK tengamos para

qué Para que lo render o sea básicamente

definimos el componente Acá está estaría

nuestra clase y va a utilizar el punto

html que nosotros le coloquemos acá acá

también hay otra otro ejemplo que

podemos utilizar un template con str

literal que ya saben

có cómo funciona básicamente lo podemos

setear acá pero en el caso por defecto

angular nos va a crear es este

componente con el

html y lo va a llamar acá Okay en este

caso bueno el Style URL es lo mismo que

el template nada más que con los estilos

básicamente se utiliza de esta manera

llama al punto css que vamos a utilizar

para eh Llamar a este contenido Okay y

bueno Después vamos a la clase esta

clase básicamente es la que en donde

Vamos a ingresar toda la lógica es el

código punto

eh ts punt escript que bueno es como

javascript pero mejor pero es el código

typescript que vamos a utilizar para

eh gestionar la lógica de nuestro

componente específicamente el componente

se entiende Si nosotros no renderizar

este componente no vamos a no vamos a

renderizar el el tpt que estemos

utilizando no vamos a llamar los eventos

etcétera por eso es importante que

entendamos esto acá va el código todo el

código que tengamos después podemos

entrar en detalles de voy a vo ir acá

esto lo voy a

comentar después podemos entrar en

detalles de ciclos de vida podemos

entrar en detalles de inputs

outputs eta De qué se qué se utiliza en

cada en cada caso de formularios

etcétera Pero lo importante es que

ustedes sepan que ni afuera ni acá

arriba ni en otro lugar se utiliza

logica punto de typescript Okay si

ustedes van a utilizar un componente van

a utilizarlo con estas llaves dentro de

de acá Okay si quieren utilizar señales

por ejemplo una señal no con no una

señal Ahí está Signal Okay vamos a

utilizarla de esta de esta

manera así y ponerle Que tengan un

evento eh vamos a cambio valor este es

así nosotros gestionamos los eventos en

en en angular t. senal set

XD podemos usar el update pero ya

entienden básicamente no quiero eh

hacerlo muy complicado este video porque

son conceptos generales acá dentro de

estas llaves vamos a utilizar el código

tpt que va a renderizar nuestro

componente la lógica de programación los

eventos que maneje La idea es esa Okay

dentro de estas llaves se utiliza eso y

básicamente Eso es todo dentro de lo que

son los componentes un componente está

dividido en esas tres partes la cuarta

sería obviamente los test pero

básicamente es eso quiero que se

entienda bien Por qué Porque de acá

vamos a partir a utilizar los ciclos de

vida utilizar las señales utilizar un

montón de otras cosas por qué porque las

voy a explicar de 1 maneras posibles

para que se quede quede bien eh Claro

que un componente en angular no es

complicado ni de hacer ni tampoco de

entender una vez entendés estos

conceptos básicos después es un poco eh

rebuscar tela con los conceptos de

programación que ya tengas eh en

javascript en este caso typescript se

entiende eh nos vemos en el siguiente

video espero les haya gustado Disculpen

si no traigo videos tan seguidos eh lo

tuve este tema con el Hardware de de mi

compu pero ya se está regularizando y

los voy a traer en breve voy a traer un

montón de contenido más relacionado a

angular y react que eh eh diseño pero

bueno a los a las personas que me ven

por el diseño etcétera vamos a traer un

montón de talleres de de interfaces

vamos a traer un montón de herramientas

de Inteligencia artificial que nos

pueden ayudar y nada estoy preparando un

montón de cosas no vemos gente cho chao