To begin with, implement the header component by following these steps:
- Generate the component using Angular CLI by executing the following command:
ng generate component modules/shared/header
What happens behind the scenes of the generate command?
Generating a component via Angular CLI performs multiple changes. It creates the Component class, style, and template files by default, and registers the component with the relative module by adding the component to the modules' declarations, which in this instance is SharedModule.
In Angular, the common naming convention is kebab (dash) case, followed by a dot and the unit type (for example, component, directive, service, and so on).
- Replace the HTML file /src/app/modules/shared/header/header.component.html contents with the following:
<header class="app-header app-bg">
<div class="maxHeight flex flex-align-items--center">
<img src="../../../../assets/logo.png" class="app-logo" />
<span class="app-slogan">Shop 'till you Drop</span>
</div>
</header>
- Replace the CSS file /src/app/modules/shared/header/header.component.css contents with the following:
.app-header {
height: 200px;
border-bottom: 1px solid black;
}
.app-header::after {
content: "";
height: 200px;
opacity: 0.5;
background: url('../../../../assets/herobg.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
}
.app-logo {
height: 80px;
margin-left: 50px;
}
.app-slogan {
font-family: 'Comic Sans MS', 'Comic Sans', cursive;
font-weight: bold;
margin-left: 5px;
}
Usually, the shared module includes declarable that can be used elsewhere as needed. To do this, you need to specify such declarable as part of the exports module.
- Add HeaderComponent to the module's exports declarable as follows:
- Open the shared.module.ts file.
- Add exports to the @NgModule decorator, with an array as the value.
- Add HeaderComponent to the exports array, as shown here:
@NgModule({
imports: [
CommonModule,
],
declarations: [
HeaderComponent,
],
exports: [
HeaderComponent
],
})
export class SharedModule { }
- Use the header component in the AppComponent template (app.component.html). Replace the entire HTML file contents with the following:
<app-header></app-header>
Angular uses a prefix in the generated component selectors to prevent conflicts. The default prefix is configurable in the angular.json file, but you can specify the prefix as part of the ng generate command by using the -p flag.
As you can see, the app component template uses the header component (that is, the app-header selector). HeaderComponent is exported as part of SharedModule, but you still need to import SharedModule to use it in an app component that is part of the AppModule.
As you can see, the app component template uses the header component (that is, the app-header selector). HeaderComponent is exported as part of SharedModule, but you still need to import SharedModule to use it in an app component that is part of the AppModule.
- Import SharedModule in AppModule (app.module.ts) as follows:
import { SharedModule } from './modules/shared/shared.module';
@NgModule({
declarations: [
AppComponent,
HeaderComponent
],
imports: [
BrowserModule,
SharedModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }