Para crear un nuevo componente, se tienen que seguir los siguientes pasos:
  • Primero se tiene crear una carpeta con el nombre del elemento dentro de la ruta: Proyecto/src/app/
  • Crear archivo typescript dentro de la carpeta recién creada con el nombre NombreComponente.component.ts
            Debe de tener la siguiente estructura el código:


        Donde:
    • export class "calcuComponent" estamos definiendo nuestra clase, clase asociada a nuestrocomponente y al utilizar el export indicamos que podremos usar esta clase en otros archivos
    • import nos importar de las clase de un decorador, libreria, etc.
    • @Component (es un decorador) nos ayuda a definir nuestro componente con sus atributos por ejemplo: 
      • Selector: indicar el nombre de la etiqueta para este componente creado.
      • standalone: nos permite usar el componente de manera independiente. En caso de que no se pueda configurar el componente  desde "AppModule". Si no aparece es porque por defecho Angular desde la version 17 crea un proyecto que usa la API standalone.
      • import: aquí importamos la clase RouterOutlet necesaria para que funciones el componente con el proyecto.
      • templateUrl: aqui va la ruta donde se encuentra el html del componente 
      • styleUrl: Por ultimo, en esta parte va la ruta de la hoja de estilos del componente.
  • Ahora creamos el archivo html que va ha utilizar el componente, con el siguiente nombre: NombreComponente.component.html y ahí estará la estructura html con las etiquetas necesarias.
  • Y si se requiere también deberíamos crear la hoja de estilo CSS con el nombre de: NombreComponente.component.css
  • Ahora solo falta registrar el componente para poder usarlo:
    • Standalone:
                  Para registrar el componente lo tenemos que importar en el componente donde se vaya a                          ocupar y agregar la etiqueta en el html de se componente. y quedaría de la siguiente manera.
                    


    • Solo Angular:
                    Tenemos que ingresar al archivo app.modules.ts:
      • Y agregar el nombre de la clase del componente en "declaractions". Verificar que se haya insertado el import de ese componente.