COMPONENTES en ANGULAR 17 💜 | ¿Qué es un componente? | Explicación y conceptos básicos 2024
Summary
TLDREn 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
🖥️ 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.
🔀 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.
📁 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.
🧩 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.
🚀 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.
Mindmap
Keywords
💡Componente
💡Angular
💡ng generate
💡Selector
💡Standalone
💡Importar dependencias
💡templateUrl
💡styleUrls
💡Lógica del componente
💡Encapsulamiento de estilos
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
浏览更多相关视频
![](https://i.ytimg.com/vi/81Nflb3SPk4/hq720.jpg)
Factorización por Diferencia de Cuadrados @MatematicasprofeAlex
![](https://i.ytimg.com/vi/OgkgPv19gYY/hq720.jpg)
Consumir API REST con #ANGULAR 17 con MANEJO DE ERRORES e INTERCEPTORS
![](https://i.ytimg.com/vi/as1opL254NA/hq720.jpg?v=65cfe9b4)
Lógica de Programación 👩💻 Aprende a programar en 10 minutos
![](https://i.ytimg.com/vi/ihs7kdshIjo/hq720.jpg)
Capítulo 3 Concepto de procesos (Sistema Operativo)
![](https://i.ytimg.com/vi/W6434nulBu8/hq720.jpg)
Como utilizar la Consola de Windows (Comandos básicos CMD)
![](https://i.ytimg.com/vi/rV6szl_t1Vw/hq720.jpg)
Curso de HTML. 2.3. Introducción a las Hojas de Estilo CSS
5.0 / 5 (0 votes)