TOPICS

• Generate the Core Module
• Generate the NavBar component
• Project structure
• Use the Navigation Bar
• Navigation Bar Layout

Generate the Core Module

The Core module is often used to group components, directive, pipes (and services) that needs to be available in AppModule and loaded when the application starts, such as the Navigation Bar.

This is not required by Angular, since you may also directly add them in AppModule, but I like to organize things in this way:

• "Core" modules: everything that need to be loaded when the application starts
• "Features" modules: each view and its own components can be organized in a module (which is usually associated with a specific route and lazy loaded)
• "Shared" modules: these are necessary when you need to use custom components, pipe or directives in multiple "features" modules, since they cannot be declared by more than one module.

So, let's create the "Core" module and add it to AppModule:

ng g m core --module app

What means this concise syntax?

ng g m represents the alias for the command ng generate module

What are the parameter for?

• core: the name of the module. It creates core/core.module.ts
• --module app: import the core module to app.module, the "root" module

Infact, AppModule now imports CoreModule:

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 { CoreModule } from './core/core.module';

@NgModule({
  declarations: [ AppComponent  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CoreModule          // <== ADDED
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Generate the NavBar component

ng g c core/components/navbar --flat --module core --export

What means this concise syntax?

ng g c represents the alias for the command ng generate component

What are the parameter for?

• core/components/navbar: generate the component in a specific path
• --flat: avoid the creation of a folder that contains the component itself (otherwise the component would be created in /navbar/navbar.components)
• --module core: register the component to the CoreModule instead of AppModule
• --exports: the component is also exported, otherwise it cannot be used in other modules

As you can see, the NavBar component is created and the core.module.ts file is updated:

core.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavbarComponent } from './components/navbar.component';

@NgModule({
  declarations: [ NavbarComponent ], // <== NEW
  imports: [ CommonModule ],
  exports: [ NavbarComponent ] , // <== NEW
})
export class CoreModule { }

The CommonModule contains the Angular built-in directives (*ngIf, *ngFor, ..) and pipes (date, json, ...) and it's necessary in order to use these features in all components of the module

Project structure

So far, your project structure should look like the following:

Use the Navigation Bar

Open app.component.ts and add the NavBar component you have just created.

We also wrap the router-outlet component into a div element, applying a couple of Bootstrap CSS classes in order to distance the Navigation Bar from the route content and make it responsive.

Anyway we use router-outlet later. At the moment it does not display anything yet.

app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
  <app-navbar></app-navbar>

  <div class="container mt-2">
    <router-outlet></router-outlet>
  </div>
`
})
export class AppComponent { }

As you may have noticed we have also removed some stuff from the "original" generated component:

• the title class property: since we don't use it anymore
• the styles decorator property: usually used to define local CSS classes

Result

If you run the project on http://localhost:4200 you should just see the following output:

Problems?

If you don't see any output, open your Browser DevTools and check if there are some runtime errors. You may also need to kill the angular-cli process from terminal by using CTRL + C and run it again by using npm start

Navigation Bar Layout

Now, create the Navigation Bar layout by using Bootstrap.

Open core/components/navbar.component.ts and replace previous content with the following (it's just a static HTML template):

navbar.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-navbar',
template: `
  <nav class="navbar navbar-expand navbar-dark bg-dark text-white">
    <a class="navbar-brand">LOGO</a>

    <div class="navbar-collapse collapse">
      <ul class="navbar-nav">

        <li class="nav-item">
          <a class="nav-link">Home</a>
        </li>

        <li class="nav-item">
          <a class="nav-link">Settings</a>
        </li>

        <li class="nav-item">
          <a class="nav-link">Users</a>
        </li>
      </ul>
    </div>
  </nav>
`
})
export class NavbarComponent { }

Result:

The navigation still does not work but the layout should be in place.

You will enable navigation in the next chapter.

ADS: MY LATEST VIDEO COURSE
(italian only)