Componentes en Angular

En el apartado anterior de la instalación vimos un primer acercamiento al nuestro componente principal app.component.

Pero ahora crearemos nuestros propios componentes de acuerdo para lo que se requiera.

Para ello vamos a crear nuestro SPA (Single Page Aplication), es decir, que presenta toda mi aplicación en una sola pagina.

Para nuestro primer proyecto vamos a crear dentro de la carpeta layouts los siguientes componentes

header

content

footer

Para configurar mi plantilla del SPA

ng g c components/layout/header

Me muestra los archivos asociados al componente que acabo de crear, dentro de la carpeta src/app/components/layouts/header

Si nos dirigimos al archivo que contiene la lógica del componente creado src/app/components/layout/header/header.component.ts , nos indica de que manera debemos representar nuestro nuevo componente en el codigo HTML.

Para ello primero debe ir a src/app/app.component.ts e importar el componente que queremos llamar (header.components)

Y luego lo tendríamos que pintar de la siguiente forma en el componente principal src/app/app.component.html

<app-header></app-header>
<router-outlet></router-outlet>

y vamos al navegador http://localhost:4200

Nos muestra el contenido del archivo src/app/components/layout/header/header.component.html

Si cambio el contenido de este archivo por

<h1>Pagina principal SITE ALMACEN</h1>

Automáticamente cambiaría la presentación de nuestro proyecto

Si queremos aplicar el mismo estilo que teníamos inicialmente, entonces demos cortar el estilo en donde estaba que es src/app/app.component.css y lo pegamos en src/app/components/layout/header.component.css

y ya muestra en el navegador como estaba inicialmente

Ahora que ya sabemos el comportamiento de cada componente, creamos los que hacen falta de acuerdo a lo planeado inicialmente.

ng g c components/layout/aside
ng g c components/layout/content
ng g c components/layout/footer

Y la estructura de carpetas y archivos queda así:

Si deseo configurar mi SPA de la siguiente manera:

Primero importamos los componentes en Entonces me dirijo a src/app/app.component.ts

Entonces me dirijo a src/app/app.component.html

<main>
    <header>
        <app-header></app-header>
    </header>

    <aside>
        <app-aside></app-aside>
    </aside>

    <section>
        <router-outlet></router-outlet>
    </section>


    <footer>
        <app-footer></app-footer>
    </footer>

</main>

y configuro mis estilos en src/app/app.component.css utilizando CSS Grid

main {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr  1fr;
    grid-template-areas:
    "header header  header  header  header"
    "aside  section section section section"
    "footer footer  footer  footer  footer";
    row-gap: 0;
    column-gap: 0;
    grid-template-rows: 20% 70% 10%;
    height: 98vh;
}

header {
    grid-area: header;
    border: 1px solid royalblue;
}

aside {
    grid-area: aside;
    border: 1px solid royalblue;
}

section {
    grid-area: section;
    border: 1px solid royalblue;
}

.recuadros {
    display: flex;
    flex-flow: row wrap;
    row-gap: 20px;
    margin: 2px 20px 2px 5px;
}

.elemento {
    width: 25%;
}

footer {
    grid-area: footer;
    border: 1px solid royalblue;
}

Quedando mi SPA de la siguiente manera: