COMPONENTES en ANGULAR 17 ūüíú | ¬ŅQu√© es un componente? | Explicaci√≥n y conceptos b√°sicos 2024

Zaiel
26 Feb 202425:01

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

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.

Mindmap

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

play00:00

Qué onda gente Todo bien antes de

play00:02

arrancar con la explicación de

play00:03

componentes de angular quería comentarle

play00:05

un par de cositas primero que nada r y

play00:07

segundo en esta semana tuve unos ciertos

play00:10

líos con el Hardware de la compu por eso

play00:12

no pude traer el contenido que quería

play00:15

traer la cantidad de contenido que

play00:16

quería traer en estas semanas Pero bueno

play00:19

ya est√° volviendo todo a lo normal eh Y

play00:22

vamos a explicar lo que es un componente

play00:24

en angular Porque si es muy lindo

play00:27

programar en angular saber un montón de

play00:29

cosas etcétera Pero vamos a las bases

play00:31

voy a tratar de ir a las bases en todos

play00:33

estos vdeos Por qué Porque voy a ir

play00:36

específicamente puntos por puntos eh

play00:39

obviamente de manera teórica los voy a

play00:41

dividir en en videos ya me dir√°n ustedes

play00:44

si quieren un video largo explicando

play00:46

todo o varios videos cortitos que en el

play00:50

caso de que ustedes lo lo Comenten bueno

play00:53

específicamente de cada uno de los

play00:55

conceptos en principio Esta es una

play00:57

explicación general de lo que son los

play00:59

componentes y vamos directamente con los

play01:02

componentes de angular Esta es la

play01:05

versión que estoy utilizando

play01:07

17.1.0 de angular Okay esta es la

play01:10

versión actual que estoy utilizando y

play01:13

vamos a empezar con los componentes

play01:15

primero que nada Cómo se crea un

play01:16

componente bueno Esto es muy

play01:19

sencillo ac√° podemos utilizar Bueno una

play01:23

extensión etcétera Pero vamos a crearlo

play01:24

de una manera eh nativa Por así decirlo

play01:27

de una manera de la manera en la cual

play01:30

nos recomienda eh las mismas personas de

play01:33

angular primero que nada tenemos que

play01:35

utilizar el comando de ng ng Uy ac√° se

play01:39

me rompió un poquito ahí está ng y

play01:43

después damos un espacio Cómo generamos

play01:46

cualquier cosa en angular no solamente

play01:48

componentes sino servicios también un

play01:50

montón de otras cosas con la g de

play01:52

generar o

play01:53

gener generate generate en English Pero

play01:58

bueno vamos a utilizar ng generate ng

play02:02

generate e y le tenemos que especificar

play02:05

qué es lo que queremos generar a angular

play02:07

que qué es lo que queremos crear a

play02:09

partir de este Comando en este caso

play02:12

componente un component Okay perfecto

play02:15

Ac√° hay distintas banderas pero vamos a

play02:18

generar un componente de base o sea un

play02:20

componente por defecto en una en una

play02:24

raíz específica nosotros Así que no

play02:26

vamos a agregarle ninguna bandera

play02:28

ninguna opción adicional que después lo

play02:30

voy a traer en otros videos o en otro o

play02:33

en general un video largo ya como les

play02:35

dije Déjenme en los comentarios saber

play02:37

qué opinan ustedes pero bueno después de

play02:41

este espacio después del componente

play02:42

vamos a indicarle la ruta Disculpen ac√°

play02:46

que se me rompe un poquito la la

play02:48

terminal la ruta inicialmente empiezan

play02:52

app O sea la carpeta app no empieza en

play02:55

assets no empieza afuera no empieza ac√°

play02:57

al lado del package Jon en App Okay

play03:01

entonces ac√° nosotros podemos agregarle

play03:04

e de cierta manera

play03:07

carpetas dentro de carpetas o un montón

play03:10

de carpetas dentro de otras carpetas qué

play03:12

quiero decir con esto que ac√° nosotros

play03:14

podemos no solamente darle el nombre a

play03:16

nuestro componente porque acá después

play03:19

del component nos va a pedir el nombre

play03:21

sino también dentro de qué carpeta está

play03:24

y no es necesaria que esté creada la

play03:25

carpeta por ejemplo algo muy com√ļn que

play03:28

hacemos en ul es poner components Slash

play03:33

y el nombre del componente no solamente

play03:35

en esto sino en el caso de que tengamos

play03:38

Alguna alg√ļn sistema de de carpetas por

play03:41

ejemplo o alguna arquitectura que

play03:43

estemos implementando también unos

play03:44

features Slash tal tal tal etcétera Pero

play03:47

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

play03:50

componente en Sí Dentro de una carpeta

play03:53

llamada component Bueno nombramos

play03:55

components Slash y el nombre del

play03:58

componente por ejemplo example porque lo

play04:00

voy a llamar example de por sí Y luego

play04:06

como les dije

play04:07

anteriormente este este componente se va

play04:11

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

play04:14

la carpeta app la que tenemos ac√° le

play04:18

damos a enter y esperamos la terminal va

play04:21

a crear todos los archivos necesarios y

play04:24

nos va a crear nuestro componente cuando

play04:27

nosotros le mencionamos el nombre

play04:29

ponente por lo general o sea eh Por

play04:32

defecto no Por lo general por defecto

play04:34

angular lo que hace es crear una carpeta

play04:37

con el nombre de ese componente y dentro

play04:39

todos los archivos que necesita que son

play04:41

cuatro en sí el tercero sería el cuarto

play04:45

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

play04:47

a utilizar a nivel de de producción

play04:50

ahora pero sí se va a utilizar para

play04:52

hacer pruebas unitarias cuando nosotros

play04:54

estemos utilizando el testing si quieren

play04:56

videos de testing también déjenmelo en

play04:57

los comentarios con angular

play05:00

17 Pero bueno la cuestión otro angular

play05:03

también una versión anterior también

play05:05

Déjenme en los comentarios los videos

play05:06

que ustedes crean que que son son

play05:10

necesarios para no solo la comunidad

play05:12

sino que para para todos ustedes Bueno

play05:14

la cuestión sin ir sin dar muchas

play05:17

vueltas nosotros ya queramos nuestro

play05:19

primer componente Okay lo tenemos ac√°

play05:22

pero ese componente est√° de manera

play05:24

aislada vamos a importarlo en el app

play05:26

component para llamarlo porque ac√°

play05:28

tenemos un mundo no no me interesa tener

play05:31

el do mundo vamos a la app component

play05:33

html y lo borramos nosotros tendríamos

play05:35

que

play05:36

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

play05:39

app example no lo tenemos por qué porque

play05:43

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

play05:47

yo este nombre Bueno lo

play05:50

cortamos supongamos que no lo sé vamos

play05:52

al tpt del example component y ac√°

play05:56

tenemos el selector lo m√°s f√°cil es

play05:59

copiar

play06:00

selector o sea entender que b√°sicamente

play06:02

siempre empiezan con app gu y el nombre

play06:05

del componente que en uno de los videos

play06:07

les mostré Cómo dejar eh que el example

play06:10

y muy parecido a react Cómo llamar los

play06:14

componentes como en react pero ac√° vamos

play06:16

a a crearlo por defecto y dejarlo por

play06:19

defecto Okay nosotros tendríamos que

play06:21

tener en en el app component html algo

play06:25

de este estilo Okay Se est√° quejando eh

play06:28

visual Studio code Por qué Porque no lo

play06:30

tenemos importado esto no lo reconoce

play06:33

porque no lo tenemos importado vamos a

play06:34

cerrar esta terminal vamos al punto ts

play06:37

del app component en App component vamos

play06:40

a ir a imports como esto es un standal

play06:43

component y no utilizamos módulos vamos

play06:45

a ir a imports ponemos una coma y

play06:48

ponemos eh

play06:49

example

play06:51

component y Listo ya cuando guardamos ya

play06:55

del otro lado no se nos est√° quejando Y

play06:58

si guardamos de dos lugares obviamente

play07:00

nos va a refrescar la p√°gina y nos va a

play07:03

mostrar que example est√° est√° trabajando

play07:06

por así decir lo está works Laura Laura

play07:10

no en realidad funciona Pero bueno se

play07:12

entiende el el siste la cuestión es la

play07:15

siguiente nosotros ac√° ya tenemos el

play07:17

example works que significa que est√°

play07:20

funcionando correctamente nuestro eh

play07:22

componente de ejemplo y vamos al example

play07:25

works les voy a pedir que cierren estas

play07:27

dos pesta√Īas de component

play07:30

html y vamos a el componente que tenemos

play07:34

nosotros vamos a abrir el primero el

play07:36

segundo el tercero y el cuarto todos los

play07:39

archivos vamos a abrir Okay y ac√° voy a

play07:42

minimizar un poco y si no lo puedo hacer

play07:46

grande lo puedo dejar así voy a dejarlo

play07:49

en pantalla completa porque porque

play07:51

quiero explicar unas cositas ac√° ac√° lo

play07:53

voy voy a dejar la c√°mara de este lado

play07:56

Ahí estamos la cuestión es la siguiente

play07:58

nosotros tenemos cu archivos voy a dejar

play08:01

el html primero el css segundo y tercero

play08:05

el punto ts y el de El de pruebas cuarto

play08:08

el de pruebas lo voy a explicar

play08:11

específicamente en un video de testing

play08:14

pero b√°sicamente lo que nosotros tenemos

play08:16

ac√° en el momento en el que nosotros

play08:18

corramos El Comando para utilizar

play08:21

nuestra

play08:22

aplicación de forma de prueba

play08:25

b√°sicamente utilizando los testing tanto

play08:28

unitarios como eh los testing de

play08:31

endtoend b√°sicamente cuando corramos

play08:34

nuestra aplicación en modo de testing

play08:37

vamos a utilizar estos archivos spec.ts

play08:41

Okay nosotros en el

play08:44

enerve com√ļn y corriente no los vamos a

play08:47

utilizar Okay Por qué Porque básicamente

play08:50

estamos corriendo la aplicación como si

play08:51

fuera producción ya en este caso bueno

play08:55

no voy a explicar mucho específicamente

play08:57

de esto voy a cerrar este archivo el

play08:59

archivo de testing pero no lo vamos a

play09:01

eliminar Por qué Porque son necesarios

play09:04

para utilizar

play09:06

la la las pruebas unitarias son

play09:10

necesarios para utilizar nuestra

play09:11

aplicación y testear correctamente Pero

play09:14

bueno vamos a lo que son los tres

play09:16

archivos fundamentales de

play09:18

angular porque Sabiendo esto ya vas a

play09:20

poder arrancar a desarrollar mucho m√°s

play09:23

r√°pido y obviamente vas a necesitar

play09:26

testing pero eso es un poco m√°s adelante

play09:28

la la siguiente tenemos tres archivos de

play09:30

angular que esto nos hace recordar mucho

play09:33

a los tres archivos que tenemos en una

play09:35

eh aplicación o en una página

play09:38

interactiva Si se quiere eh cuando

play09:41

empezamos a aprender de html css y

play09:43

javascript nada m√°s que ac√° en vez de

play09:45

javascript tenemos t Script Pero bueno

play09:47

es lo mismo o sea no es exactamente lo

play09:49

mismo se entiende tenemos el html ac√°

play09:52

Vamos a ingresar todo el código html

play09:55

literalmente o sea ac√° todo lo que eh

play09:58

esté

play10:00

que sea compatible con html o sea toda

play10:03

la sintaxis de html la podemos colocar

play10:05

de esta manera Obviamente con

play10:07

superpoderes que nos da

play10:10

angular Como por ejemplo las las

play10:13

variables la interpolación de variables

play10:15

el el for el If etcétera Pero la

play10:19

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

play10:22

en html es v√°lido lo vamos a poder

play10:24

ingresar ac√° por ejemplo un h1 que diga

play10:28

este Es mi primer componente vamos ac√° y

play10:33

lo tenemos tenemos este texto

play10:36

perfectamente colocado de esta manera

play10:39

después tenemos el segundo archivo que

play10:41

es los estilos y esto Cabe destacar que

play10:44

estos estilos est√°n encapsulados en

play10:46

nuestro componente Qué significa esto

play10:49

que yo acá No puedo venir no sé por

play10:50

ejemplo no solo el body no puedo venir a

play10:53

al ponerle ac√° en el app eh ponerle que

play10:58

tenga un

play11:00

div Class y tenga no sé ejemplo no puedo

play11:05

venir a un componente y ac√° editar la

play11:08

clase ejemplo Uy cualquier cosa copié

play11:11

ejemplo y ponerle no sé background color

play11:15

red por ponerle algo y display block por

play11:21

poner alg√ļn ejemplo no puedo hacer esto

play11:24

Ok por no va a afectar por porque el app

play11:27

component html es el app padre Si se

play11:31

quiere pero que incluso no est√°

play11:34

sectorizado dentro de lo que es eh el el

play11:39

componente Por qué Porque si yo Dentro

play11:42

de este Pon me copio este div me lo

play11:46

corto por ejemplo vamos

play11:48

al al example component lo pegamos ac√°

play11:53

ya lo tenemos ac√°

play11:54

perfecto este con la clase ejemplo Vamos

play11:57

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

play12:02

de 50 píxeles tenemos el cuadrado este

play12:05

que me acabo de acordar vamos a cortarlo

play12:08

vuelvan al app component html y vamos a

play12:11

pegarlo para demostrarles que no

play12:12

funciona de esta manera o sea eh Porque

play12:15

no le había agregado un ancho y un alto

play12:17

disc√ļlpenme ah√≠ Ese fue error m√≠o pero

play12:20

para demostrarles lo pegamos en el app

play12:22

component html y no funciona no est√° el

play12:26

cuadradito rojo pero si lo pegamos en el

play12:29

html del ejemplo del example Sí si está

play12:33

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

play12:37

es angular dentro de los componentes

play12:38

porque cuando se crea un componente

play12:41

nosotros vamos al componente Sí al app

play12:44

example no cuando se se crea el el

play12:48

componente este que tiene la clase

play12:51

ejemplo que efectivamente tiene la clase

play12:53

ejemplo ven que ac√° Tiene un en content

play12:56

no sé un ID todo rarísimo bueno bueno

play12:59

ac√° en los estilos vamos a ver que el

play13:01

ejemplo dentro del engine content con es

play13:04

ID le est√° aplicando todas estas

play13:06

propiedades SS Entonces qué quiere decir

play13:08

esto que angular

play13:28

activar un toquecito no sé si lo dejé

play13:31

bien explicado pero el engine content es

play13:34

lo que lo que quería mostrarles el

play13:37

engine content con este ID le est√°

play13:39

aplicando estos estilos a la derecha se

play13:41

ve que le est√° aplicando estos estilos

play13:43

que nosotros pusimos ac√° Okay eso es lo

play13:47

que quería mencionar e en este en este

play13:51

apartado que b√°sicamente voy a dejarlo

play13:54

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

play13:57

abajo perfecto que b√°sicamente angular

play13:59

lo que hace es sectorizar en temas de

play14:01

componentes en interfaz de componentes

play14:04

los estilos también incluso del html

play14:07

okay Estamos claros en resumen el html

play14:11

es nuestro html de toda la vida El css

play14:14

es el que es lo son los estilos que

play14:17

aplican a este

play14:18

html quiero que quede bien claro que

play14:21

aplican a este por qué Porque si yo acá

play14:23

dejo la clase ejemplo y lo mismo que

play14:26

antes o sea por ejemplo me corto

play14:30

este esta clase ejemplo la guardamos

play14:33

todo ya se fue el cuadradito vamos a un

play14:36

eh a un componente padre le pegamos esta

play14:40

clase de ejemplo lo guardamos todo no va

play14:43

a aparecer cuadradito Por qué Porque

play14:45

est√° todo bien con que sea la misma

play14:47

clase la misma clase ejemplo pero no

play14:50

est√° dentro el contenido que yo

play14:53

especifiquen entonces si yo ac√° en el

play14:55

example dejo una clase ejemplo no va a

play14:57

afectar algo de afuera no va a afectar

play15:00

dentro de nuestro componente se entiende

play15:03

b√°sicamente es eso vamos a ir para atr√°s

play15:07

ac√° y lo dejamos donde lo dejamos vamos

play15:10

a cerrar el app component

play15:12

y dejamos los tres archivos como antes

play15:16

b√°sicamente es eso el css se aplica a

play15:19

este html que tenemos ac√° luego tenemos

play15:22

la parte m√°s importante que que es el

play15:25

punto ts el donde se crea el componente

play15:27

s si es esta parte de components si esta

play15:30

declaración no existiera no existe el

play15:33

componente en ning√ļn lado y se arma un

play15:35

kilombo terrible nosotros lo que vamos a

play15:37

hacer ahora es ver el app Okay nosotros

play15:43

cortamos ese esa declaración de

play15:44

componente Y actualizamos sí no hay nada

play15:47

Hay un kilombo terrible nos da error por

play15:49

todos lados Así que esta parte no la

play15:51

cortemos por favor

play15:53

e Pero bueno b√°sicamente Esta es ac√° es

play15:57

donde nosotros declaramos el componente

play15:59

para que lo podamos importar en otros

play16:01

componentes y utilizarlo a nuestro eh a

play16:04

nuestro

play16:04

gusto este component tiene un objeto por

play16:08

dentro o sea nosotros cuando lo llamamos

play16:10

este decorador se dice cuando nosotros

play16:13

tenemos una palabra después de un ara es

play16:16

un decorador cuando nosotros lo llamamos

play16:19

dentro hay opciones que nosotros podemos

play16:22

aplicarles a ese componente obviamente

play16:24

Esto est√° generado por angular esto

play16:27

siempre o sea no

play16:29

no cambia cuando nosotros lo generamos

play16:30

el ng generate component va a ser

play16:33

siempre igual y nos va a traer bastantes

play16:35

herramientas que nos van a facilitar la

play16:37

vida pero hay m√°s opciones que Podemos

play16:40

agregar ac√° primero que nada vamos a

play16:42

explicar un poco lo que es el selector

play16:44

el selector b√°sicamente es el nombre con

play16:46

el cual yo llamo al elemento html que me

play16:49

va a renderizar este componente Okay si

play16:52

se entendió joya Si no vamos al app

play16:55

component ac√° Este selector es el que yo

play16:59

tengo ac√° por ejemplo quiero llamarlo

play17:01

example así si yo lo guardo me va a dar

play17:05

un error esto por qué Porque no está

play17:08

reconociendo Cu√°l es este este

play17:10

componente no est√° en ning√ļn lado

play17:11

entonces si yo lo cambio así a sample

play17:14

con may√ļscula va a seguir funcionando si

play17:16

lo vuelvo para atr√°s no va a funcionar

play17:18

si vuelvo para adante va a funcionar Y

play17:19

así sucesivamente Okay voy a cambiarlo A

play17:23

como estaba antes ustedes déjenlo como

play17:25

ustedes

play17:26

quieran el segundo la segunda opción es

play17:28

standalone en true Qué significa esto

play17:31

que b√°sicamente convierte nuestro

play17:33

componente en standalone que no necesita

play17:36

eh de un módulo que importe que lo

play17:39

importe a ese componente y que importe

play17:41

todas las otras dependencias que

play17:42

tengamos para funcionar Okay si no lo

play17:45

tenemos en standalone van a ver que se

play17:47

va a quejar de El imports este que este

play17:49

imports antes estaba en un módulo pero

play17:52

no vamos a ir con cuestiones de de

play17:54

anteriores de angular si quieren que lo

play17:56

explique

play17:56

eh con

play17:59

la aplicación con módulos con una

play18:01

versión anterior de angular déjen en los

play18:02

comentarios pero b√°sicamente lo que

play18:05

queremos decir con Stand igual a true

play18:07

que Yo supongo que va a estar por

play18:09

defecto en true en alguna

play18:11

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

play18:15

es Okay este componente tratalo como que

play18:17

si fuera una pieza √ļnica y que yo voy a

play18:20

importar dependencias depende de lo que

play18:23

yo tenga en el contenido de mi

play18:25

componente okay Bueno gente vamos a la

play18:27

tercer propiedad de un componente la

play18:30

tercer propiedad b√°sicamente es un

play18:32

import Qué significa esto que acá este

play18:35

este import como anteriormente lo

play18:37

mencioné depende de que el standalone

play18:40

esté en true de que la propiedad

play18:41

standalone esté en true por qué porque

play18:43

ac√° vamos a importar todas la

play18:45

dependencia que nosotros utilicemos en

play18:47

este componente no vamos a importar

play18:49

obviamente toda la aplicación de angular

play18:51

Así que suponete que quiero importar una

play18:53

dependencia para esto voy a utilizar un

play18:55

input de tipo texto

play18:59

que guardamos y lo tenemos de ac√° ac√° si

play19:02

quiero capturar el valor voy a utilizar

play19:04

un engine model por poner una opción

play19:07

pero voy a utilizar el en model puedo

play19:09

utilizar

play19:10

eh formularios reactivos pero voy a

play19:14

utilizar en este caso formularios

play19:16

comunes un mod vamos a sear una

play19:19

propiedad propiedad obviamente esto

play19:22

puede ser una se√Īal etc√©tera Pero vamos

play19:24

a dejar una propiedad como ejemplo okay

play19:29

y vamos a utilizar ac√° en el texto un

play19:31

engine

play19:33

model el engine model lo que va a ser

play19:35

b√°sicamente es a esta propiedad que

play19:38

nosotros sete que creamos en nuestro

play19:40

componente le va a setear el valor que

play19:42

nosotros escribamos ac√° dentro Okay se

play19:45

nos va a quejar angular Por qué Porque

play19:47

justamente tenemos que utilizar el

play19:49

import Cómo utilizamos el import acá

play19:51

para solucionar ese problema Bueno un

play19:53

forms

play19:54

module Este es un caso específico del

play19:57

eng model no tiene no es necesario que

play20:00

utilicen el for mod para todo obviamente

play20:03

pero es un ejemplo de en el cual

play20:05

nosotros importamos un módulo en nuestro

play20:09

nuestro componente de angular para lo

play20:11

que estemos utilizando en este caso es

play20:13

un forms modu Okay Esa es la cuestión el

play20:17

tercer el cuarto perdón el cuarto la

play20:21

cuarta propiedad es template

play20:23

URL b√°sicamente esta propiedad que ya lo

play20:26

expliqué en algunos otros videos

play20:28

nos va a pedir un String que b√°sicamente

play20:31

se√Īale a

play20:33

un a un código html que nosotros

play20:38

tengamos que utilizar OK tengamos para

play20:41

qué Para que lo render o sea básicamente

play20:44

definimos el componente Acá está estaría

play20:47

nuestra clase y va a utilizar el punto

play20:50

html que nosotros le coloquemos ac√° ac√°

play20:53

también hay otra otro ejemplo que

play20:55

podemos utilizar un template con str

play20:58

literal que ya saben

play21:01

có cómo funciona básicamente lo podemos

play21:04

setear ac√° pero en el caso por defecto

play21:07

angular nos va a crear es este

play21:09

componente con el

play21:11

html y lo va a llamar ac√° Okay en este

play21:16

caso bueno el Style URL es lo mismo que

play21:18

el template nada m√°s que con los estilos

play21:21

b√°sicamente se utiliza de esta manera

play21:23

llama al punto css que vamos a utilizar

play21:26

para eh Llamar a este contenido Okay y

play21:30

bueno Después vamos a la clase esta

play21:33

clase b√°sicamente es la que en donde

play21:34

Vamos a ingresar toda la lógica es el

play21:37

código punto

play21:38

eh ts punt escript que bueno es como

play21:42

javascript pero mejor pero es el código

play21:45

typescript que vamos a utilizar para

play21:49

eh gestionar la lógica de nuestro

play21:52

componente específicamente el componente

play21:54

se entiende Si nosotros no renderizar

play21:56

este componente no vamos a no vamos a

play22:00

renderizar el el tpt que estemos

play22:03

utilizando no vamos a llamar los eventos

play22:06

etcétera por eso es importante que

play22:09

entendamos esto acá va el código todo el

play22:12

código que tengamos después podemos

play22:14

entrar en detalles de voy a vo ir ac√°

play22:18

esto lo voy a

play22:21

comentar después podemos entrar en

play22:23

detalles de ciclos de vida podemos

play22:24

entrar en detalles de inputs

play22:26

outputs eta De qué se qué se utiliza en

play22:30

cada en cada caso de formularios

play22:33

etcétera Pero lo importante es que

play22:35

ustedes sepan que ni afuera ni ac√°

play22:38

arriba ni en otro lugar se utiliza

play22:40

logica punto de typescript Okay si

play22:44

ustedes van a utilizar un componente van

play22:46

a utilizarlo con estas llaves dentro de

play22:49

de ac√° Okay si quieren utilizar se√Īales

play22:52

por ejemplo una se√Īal no con no una

play22:56

se√Īal Ah√≠ est√° Signal Okay vamos a

play23:01

utilizarla de esta de esta

play23:03

manera así y ponerle Que tengan un

play23:06

evento eh vamos a cambio valor este es

play23:12

así nosotros gestionamos los eventos en

play23:16

en en angular t. senal set

play23:22

XD podemos usar el update pero ya

play23:25

entienden b√°sicamente no quiero eh

play23:27

hacerlo muy complicado este video porque

play23:29

son conceptos generales ac√° dentro de

play23:31

estas llaves vamos a utilizar el código

play23:34

tpt que va a renderizar nuestro

play23:37

componente la lógica de programación los

play23:39

eventos que maneje La idea es esa Okay

play23:43

dentro de estas llaves se utiliza eso y

play23:46

b√°sicamente Eso es todo dentro de lo que

play23:48

son los componentes un componente est√°

play23:50

dividido en esas tres partes la cuarta

play23:53

sería obviamente los test pero

play23:55

b√°sicamente es eso quiero que se

play23:57

entienda bien Por qué Porque de acá

play23:59

vamos a partir a utilizar los ciclos de

play24:02

vida utilizar las se√Īales utilizar un

play24:04

montón de otras cosas por qué porque las

play24:06

voy a explicar de 1 maneras posibles

play24:08

para que se quede quede bien eh Claro

play24:11

que un componente en angular no es

play24:14

complicado ni de hacer ni tampoco de

play24:16

entender una vez entendés estos

play24:17

conceptos básicos después es un poco eh

play24:20

rebuscar tela con los conceptos de

play24:22

programación que ya tengas eh en

play24:24

javascript en este caso typescript se

play24:27

entiende eh nos vemos en el siguiente

play24:29

video espero les haya gustado Disculpen

play24:32

si no traigo videos tan seguidos eh lo

play24:34

tuve este tema con el Hardware de de mi

play24:37

compu pero ya se est√° regularizando y

play24:39

los voy a traer en breve voy a traer un

play24:41

montón de contenido más relacionado a

play24:43

angular y react que eh eh dise√Īo pero

play24:46

bueno a los a las personas que me ven

play24:48

por el dise√Īo etc√©tera vamos a traer un

play24:50

montón de talleres de de interfaces

play24:52

vamos a traer un montón de herramientas

play24:54

de Inteligencia artificial que nos

play24:55

pueden ayudar y nada estoy preparando un

play24:58

montón de cosas no vemos gente cho chao

Rate This
‚ėÖ
‚ėÖ
‚ėÖ
‚ėÖ
‚ėÖ

5.0 / 5 (0 votes)

Do you need a summary in English?