¿Qué son los componentes?

Si en algún caso, debes crear un componente muy básico, que no requiera un archivo de estilos, puedes añadir el flag “-is” que es “inline styles”, esto hace que no se genere un archivo de estilos…

También puedes usar --skip-tests para no crear el archivo de pruebas en caso de que lo necesites… 😄

ng g c componentes/img --skip-tests -is

Con esto deberian iniciar en el curso de fundamentos 😛 (para organizacion)

Incluso si este video es de react ayuda en teorizar que es un componente
https://www.youtube.com/watch?v=2dND8evRRls

¿QUÉ SON LOS COMPONENTES?

Un componente tiene responsabilidades unicas, estructura propia con estilos apropiados.

Componentes generado tiene los siguientes archivos:
-> todo.component.html
-> todo.component.css
-> todo.component.spec.ts (pruebas en angular)
-> todo.component.ts

Comando para crear un componente
-> ng g c name_component

Crear componente sin estilos
-> ng g c componentes/name_component -is

Crear componente sin archivos de testing
-> ng g c componentes/img --skip-tests

Si alguién más quiere aprender más de los decoradores, este video me ayudó bastante

Ya trabajo con Angular pero en todo este tiempo no habían tenido la oportunidad de ver estos cursos, hasta ahorita! Entonces voy a tragarmelos todos en un poco tiempo para alcanzar a abarcar todo lo que pueda! Igual se me están haciendo faciles por lo mismo que ya he trabajado con esto

Si no te pregunta el tipo de preprocesador que quieres usar o por la creación de rutas al crear el proyecto, o ejecuta el siguiente comando:

ng new my-store --style=scss
ng generate module app-routing --flat --module=app

Se me genero un inconveniente al momento de generar el componente, en donde me indicaba lo siguiente

More than one module matches. Use the '--skip-import' option to skip importing the component into the closest module or use the module option to specify a module.

Por alguna extraña razón no encontraba al archivo principal “app.module.ts” por ello es necesario que se especifique después del nombre del componente con “–module app” por ejemplo

ng g c components/img --module app

Me ayudo esta referencia

Muy bien explicado lo que es un componente nos ayudan mucho

Con toda a aprender con Nicolas, ye v i el primero muy completo, a por ello!!

En Angular, los componentes son una de las principales piezas de la arquitectura del framework. Un componente es un bloque de código reutilizable que se encarga de una tarea específica en una aplicación. Cada componente tiene su propia vista y lógica de negocio, y puede ser utilizado en diferentes partes de la aplicación.

Un componente consta de tres partes principales:

Una plantilla HTML que define la vista del componente y cómo se verá en la pantalla.
Un archivo TypeScript que contiene la lógica de negocio del componente, como métodos y propiedades.
Un archivo de estilo CSS opcional que aplica estilos a la vista del componente.
Para crear un componente en Angular, primero debes definir una clase TypeScript con una decoración @Component. Esto le dice a Angular que esta clase es un componente y le proporciona información sobre cómo debe ser utilizado. A continuación, puedes utilizar la plantilla HTML y el archivo de estilo CSS para definir la apariencia y la funcionalidad del componente.

Los componentes son muy útiles para dividir una aplicación en partes más pequeñas y manejables, y para reutilizar código a través de la aplicación.

Muy bien explicado lo que es un componente

Si me preguntaran ¿Qué es un componente? Yo respondería “Es un elemento reutilizable, que encapsula la lógica y vista de una parte especifica de nuestra aplicación”.

Componentes: Crear componente : ng g c nombre_componente

no es por nada pero este profesor es un mostor en Angular … pura elegancia de Francia la de platzi

ng g c <nombre del componente> --skip-tests --inline-template --inline-style

comando para crear componente sin la hoja de estilos, html y test es muy facil de usar 😁

¿Qué son los componentes?

En Angular, un componente es una clase TypeScript decorada con el decorador **@Component**que encapsula la lógica de negocio y la vista de una parte específica de la interfaz de usuario de la aplicación.

<aside>
<img src=“https://static.platzi.com/media/achievements/badge-angular-componentes-servicios-75f68ec3-48e0-430e-b7e2-889fad0d1984.png” alt=“https://static.platzi.com/media/achievements/badge-angular-componentes-servicios-75f68ec3-48e0-430e-b7e2-889fad0d1984.png” width=“40px” /> Los componentes se utilizan para crear una interfaz de usuario modular, reutilizable y fácil de mantener.

</aside>

Para generar un nuevo componente en Angular, puedes utilizar el Angular CLI. Abre una terminal y ejecuta el siguiente comando:

ng generate component <name-component>
ng g c <name-component>

Donde **<**name-component**>** es el nombre del componente que deseas crear.

Tambien podemos especificar la carpeta en donde queremos que se cree nuestro componente dentro de la carpeta app

ng generate component <name-folder>/<name-component>
ng g c <name-folder>/<name-component>

Si deseas omitir algunos de estos archivos, puedes utilizar las opciones --skip-Tests, **-is**y --inlineTemplate cuando ejecutas el comando ng generate component.

Por ejemplo, si deseas omitir los archivos de prueba unitaria y de estilo para un nuevo componente llamado mi-componente, puedes ejecutar el siguiente comando:

ng generate component mi-componente --skip-Tests -is

Ejecutamos el comando

El Angular CLI generará automáticamente varios archivos para el nuevo componente, incluyendo:

• Un archivo TypeScript con la definición de la clase del componente y su lógica de negocio.
• Un archivo HTML con la plantilla que se utiliza para renderizar el componente en la vista.

• Un archivo CSS o SCSS opcional que contiene estilos específicos para el componente.
• Un archivo de prueba unitaria de Karma para probar el componente.

Se actualizan automáticamente otros archivos de la aplicación, como app.module.ts, para incluir el nuevo componente y hacerlo disponible para el resto de la aplicación.

Como visualizarlo

Puedes llamarlo desde otra plantilla o componente utilizando el selector que se especifica en el archivo nombre-componente.component.ts

<app-mi-componente></app-mi-componente>

Por ejemplo, si el selector del componente es app-mi-componente, puedes llamarlo en otra plantilla utilizando la siguiente etiqueta:

Esta etiqueta indicará al Angular que debe utilizar el componente app-mi-componente en el lugar donde se coloque la etiqueta.

Decorador @Component

Los decoradores alteran el comportamiento de una clase en Angular, para que el compilador de TypeScript interprete el código de la manera correcta y sepa que una clase es:

• un componente,
• un módulo,
• un servicio,
• una directiva, etc.

Este decorador es quién enlaza el componente con el archivo HTML y la hoja de estilos, además le otorga al componente un selector o un nombre para utilizarlo en tus templates.

import { Component } from '@angular/core';

@Component({
  selector: 'app-mi-componente',
  templateUrl: './mi-componente.component.html',
  styleUrls: ['./mi-componente.component.css']
})
export class MiComponenteComponent {
  // Lógica del componente
}

En este ejemplo, el decorador @Component define el selector del componente (app-mi-componente), la plantilla (./mi-componente.component.html) y la hoja de estilo (./mi-componente.component.css). Estos metadatos son utilizados por Angular para crear y renderizar el componente en la aplicación.

¿Qué son los componentes?

Son partes de código que tienen funciones en específico. Juntos se forma toda la aplicación.

Para crear componentes en Angular, usamos la cli con el comando ng g c todo -> ‘angular create component “nombre”’.

Para recordar: cada componente debe pertenecer a 1 módulo. Es una relación 1 a 1.

Angular declara los componentes con el uso del decorador @Component.

Para usar los componentes, basta con llamarlos como si fueran una etiqueta HTML.

El componente de img está construido en img.components.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-img',
  templateUrl: './img.component.html',
  styleUrls: ['./img.component.scss']
})
export class ImgComponent {

}

Su html es img.component.html:

<p>img works!</p>

Y lo usamos en, por ejemplo, app.component.html:

<app-img></app-img>

solucion a error “No se puede cargar el archivo C:\Users\SantiagoAndresCastro\AppData\Roaming\npm\ng.ps1. El archivo C:\Users\UserName\AppData\Roaming\npm\ng.ps1 no está firmado digitalmente. No se puede ejecutar este script
en el sistema actual. Para obtener más información acerca de la ejecución de scripts y la configuración de la directiva de ejecución, consulta about_Execution_Policies en https:/go.microsoft.com/fwlink/?LinkID=135170.”

simplemente borren la el documento ng.ps1 que especifica en el error

Que son los componentes?

Los componentes son la parte mas importante y son el bloque principal para desarrollar nuestras aplicaciones en Angular. No es buena practica tener toda la logica y toda la aplicacion en un solo archivo, y normalmente empezamos a abstraer todo en componentes.

Cuando creamos un componete, este consta de los sigientes archivos:

todo/
    todo.component.html --> Vista
    todo.component.scss --> Estilos
    todo.component.ts --> Logica, Une los demas archivos
    todo.component.spec.ts --> Pruebas

Vamos a usar el cli de Abngular con esta misma estructura

Para crear un nuevo componente corremos el siguiente comando en la consola:

ng generate component [nombre-componente]

Para efectos de la clase, vamos crear el componente img dentro del directorio components

ng g c components/img

NOTA: Cada componente debe pertenecer a un modulo, es decir que solo se puede usar en un solo modulo y no envarios.

Un componente esta compuesto por varias partes, lo primero que podriamos reconocer es el uso de un decorador

@Component({
  selector: 'app-img',
  templateUrl: './img.component.html',
  styleUrls: ['./img.component.scss']
})

Los decodores le dicen al compilador, como debe comportarse el componente

📎 Los decoradores Angular nos permiten indicar al framework cómo interpretar un elemento.
Sin el decorador @Component angular hubiera interpretado el archivo img.component.ts como una clase de Typescript simple sin enlace con ningún componente.

https://www.javatpoint.com/angular-decorators

El comando ng g es bastante amplio, permite crear servicios, módulos y mucho más. Además de recibir ciertos argumentos y opciones. Acá pueden ver la info completa: Angular ng generate.

waoo me parece muy interesante , no he visto es pero es muy importante aprender cosas nuevas

Si a alguien le aparece el siguiente error:
"AppData\Roaming\npm\ng.ps1 no está firmado digitalmente. No se puede ejecutar este script
en el sistema actual. Para obtener más información acerca de la ejecución de scripts y la configuración de
la directiva de ejecución, consulta about_Execution_Policies en"
Esta solucion me funciono:
https://techstrology.com/appdataroamingnpmng-ps1-cannot-be-loaded-because-running-scripts-is-disabled-on-this-system/

flag para no crear file .spec.ts
ng g c name-component --spec =false

Mis apuntes

// Comando para crear un componente completo
ng generate component name-component

// Comando abreviado para crear un componente completo
ng g c name-component

// Crear componente sin estilos
ng g c componentes/name-component -is

// Crear componente sin archivos de testing
ng g c componentes/img --skip-tests

Creamos el nuevo proyecto:
ng new my-store
Agregamos nuevo componente en su propia carpeta
ng g c components/img
Luego lo mostramos en la pagina
ng serve