En el artículo anterior, discutimos cómo configurar el entorno para el proyecto Angular. Y también, configuramos un nuevo proyecto Angular. Si se lo perdió, consulte el primer artículo utilizando el enlace a continuación.

Continuemos.

Este es el proyecto Angular que creamos en el artículo anterior.

Componentes en Angular

• En una aplicación Angular, los componentes son el bloque de construcción principal.
• "App.component" es el componente predeterminado que se obtiene al instalar angular. Cada componente consta de cuatro archivos.

1. Reutilización
2. Prueba unitaria fácil
3. Fácil de leer.
4. Facil de mantener.

• Para crear un nuevo componente, use un símbolo del sistema o una terminal en Visual Studio Code.

Haga clic en 'Terminal' en la barra superior del Código VS y seleccione 'Nueva Terminal'.

• Para generar un nuevo componente, escriba en la terminal como “ ng generate component <component-name> ”. (Por ejemplo : " ng generate component newComp ". 'NewComp' es el nombre del componente).
• Crea cuatro archivos y actualiza un archivo.

• Después de abrir el archivo de componente creado, puede ver los archivos creados mencionados anteriormente.

• Después de abrir el archivo 'app.module.ts', puede ver que ha importado el nuevo componente. La razón es que Angular lo actualiza automáticamente al crear un componente. La declaración del componente creado también se declara dentro del '@NgModule' automáticamente.

• Abra el archivo 'new-comp.component.ts'.
• Seleccione el valor de 'selector' y cópielo en el portapapeles.

• Abra el archivo 'app.component.html' y abra una nueva etiqueta usando el valor del selector como se muestra a continuación en el archivo 'app.component.html'.

• Abra su navegador. Te da un resultado como el siguiente.

• Teniendo en cuenta la salida del navegador, el mensaje "¡Hola, mundo!" el mensaje proviene de 'app.component.ts'. Al abrir el archivo 'app.component.html' en VS Code, podemos ver el mensaje "¡Hola mundo!" texto dentro de la etiqueta '<h1>'.

h1{
color : blue;
}

      

• "¡La nueva composición funciona!" El mensaje proviene de 'new-comp.component.ts'. al abrir el 'new-comp.component.html' en VS Code, podemos ver el "new-comp works!" texto dentro de la etiqueta '<p>'.

p{
color : grey;
font-style : italic;
}

      

• Agreguemos un nuevo párrafo al 'app.component.html'. Abra el código VS y escriba como se muestra a continuación en 'app.component.html'.

<p>Welcome to the first Angular project </p>

       

• Para cambiar los estilos de párrafo en 'app.component.html', abra el archivo 'app.component.css' en VS Code y escriba lo siguiente.

p{
color: red;
font-size: 20px;
}

       

Tenemos las mismas etiquetas '<p>' en ambos componentes. Podemos escribir estilos personalizados para todos y cada uno. Entonces, no necesitamos identificaciones o clases específicas para eso.

Si te ha gustado este artículo o lo has encontrado útil, pulsa el botón 👏 y sígueme para ver más artículos como este.

Más contenido en plainenglish.io