1. Desde Visual Studio Code crear en la carpeta App una subcarpeta (por ej: empleados)
2. Y dentro de esta subcarpeta crear el ficheros de:
empleados.component.ts
Y dentro de este fichero especificar su selector, su fichero HTML y su CSS:
import { Component } from "@angular/core";
@Component({
selector: "app-empleados",
templateUrl: "./empleados.component.html",
styleUrls: ['./empleados.component.css']
})
export class EmpleadosComponent{
}
Crear el fichero HTML: empleados.component.html
<h1>Hola mundo está en el html de empleados</h1>
Crear el fichero CSS: empleados.component.css
Una vez creado todo hay que registrar esta nueva App por lo que en app.module.ts y en declarations añadir EmpleadosComponent
Y ya simplemente añadir este nuevo componente al HTMl principal de app.component.html por ejemplo:
<br><br>
<app-empleados></app-empleados>
Para crear un componente de forma automática (mucho más rápido y sencillo):
ng g c empleado
INCISO: Si desde la consola de Visual Studio Code te sale el error de "porque la ejecución de scripts está deshabilitada en este sistema" entonces seguir los pasos que indica en:
https://www.cdmon.com/es/blog/la-ejecucion-de-scripts-esta-deshabilitada-en-este-sistema-te-contamos-como-actuar
Y ya para utilizar este componente creado dentro del otro componente es irse al HTML del primero empleados.component.html:
...
<app-empleado></app-empleado>
<app-empleado></app-empleado>
<app-empleado></app-empleado>
Si quisieramos crear un componente cuyos css y html quieres que vayan inline (y no en un fichero externo como es habitual):
ng g c loquesea -s -t
Pero no es nada aconsejable que sea inline (lo correcto es siempre todo en su correspondiente fichero CSS y HTML).

No hay comentarios:
Publicar un comentario