Angular

header

Vamos a crear el header pero primero vamos a tener que instalar librería de componentes en la cual nos vamos apoyar que se llama Angular Material https://material.angular.io/ en nuestro terminal sobre el directorio de nuestro proyecto lo llamamos con el siguiente comando:

 
               
            
           ng add @angular/material

Le decimos que proceda a instalar Y
Elegimos el tema en mi caso es Pink/Blue Grey
java project

Le decimos que acepte el tipo de tipografia Y java project

Le decimos que nos acepte las animaciones Y
java project

Para importar nuestro menú nos vamos al archivo app.module.ts

 
               
         import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './shared/header/header.component';
import { FooterComponent } from './shared/footer/footer.component';
import { LoginComponent } from './pages/login/login.component';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatMenuModule} from '@angular/material/menu';
import {MatButtonModule} from '@angular/material/button';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    LoginComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatMenuModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

En el directorio assets creamos una carpeta llamada image y ahí colocamos esta imagen para el header sino puedes colocar la que mas te guste. En el archivo header.component.css escribimos lo siguiente

 
              
  header {
    background: url('/assets/image/space.png')
}

En el archivo header.component.html escribimos lo siguiente:

 
              
    <header>
    <div style="text-align: center;color:white;">
        <h1>ReservaAloja Admin</h1>
        <p>Bienvenido</p>
    </div>
</header>

nos vamos al archivo app.component.html y borramos todo y escribimos lo siguiente:

 
              
   
   <app-header></app-header>

footer

Vamos a crear el footer nos posicionamos en el archivo footer.component.css y escribimos lo siguiente:

 
  
  footer {
    background-color: black;
}

En el archivo footer.component.html escribimos lo siguiente:

 
  
  <footer>
    <div style="color: white;">

        <div style="text-align: center;">
            ISC.José Martín Lara López <a href="https://tutosoftware.com/" style="color: yellow;" target="_blank">Tutosoftware</a>
            <br> email:kapo1978@hotmail.com movil:(52)5540583258
        </div>
    </div>





</footer>

El archivo app.component.html queda de la siguiente forma

 
  
  
  <app-header></app-header>

<app-footer></app-footer>

Nos vamos al terminal ejecutamos el siguiente comando:

 
              
  ng serve