Para añadir la plantilla y el estilo externos, necesitamos hacer dos archivos más en la carpeta de la demo: un archivo HTML y un archivo CSS. Voy a nombrarlos demo.component.html y demo.component.css. Estoy siguiendo las mejores prácticas de Angular y las convenciones de nomenclatura; puedes elegir el nombre que quieras.
Luego movemos el código de la propiedad de la plantilla en demo.component.html.
1<strong=Hola Mundo</strong=;
html
A continuación, mueve el código de propiedades de los estilos en demo.component.css
123 fuerte{color: rojo;}css
Finalmente, cambia el código del componente demo.
12345678import{Componente}de"@angular/núcleo";@Componente({ selector: "app-demo-componente", templateUrl:"./demo.component.html", styleUrls:["./demo.component.css"]})exportclassDemoComponente{}tipografía
Puedes ver algunas diferencias entre el código anterior y el actual. En lugar de template, hemos usado templateUrl, y hemos reemplazado los estilos con styleUrls.
Estos cambios son esenciales porque tanto la plantilla de propiedades como la plantillaUrl significan un tipo diferente de metadatos. Angular identifica qué hacer según los metadatos dados en el decorador @Componente. Lo mismo ocurre con el estilo, los estilos y las StyleUrls.
Ahora puedes ver la salida sin ninguna diferencia.