Jul 17

Written by: Michael Washington
7/17/2017 10:13 PM  RssIcon

image

You can easily create an Angular 4 application shell using PrimeNG.

PrimeNG is a collection of rich UI components for Angular. All widgets are open source and free to use under MIT License.

image

In this example, the application shell has the following features:

  • Fixed header and footer
  • Nested menu
  • Collapsible popup menu (for mobile and small screens)

image

When the web browser window is reduced in size, the toolbar menu collapses into a single Menu button.

image

Clicking on this button opens the popup menu.

The Application

image

We start with the application created in the article:

Upgrading JavaScriptServices and PrimeNG From Angular 2 to Angular 4+

image

This application sets up JavaScriptServices and PrimeNG. The JavaScriptServices template creates an application shell that uses BootStrap (that also requires JQuery).

image

To illustrate why we would desire a different application shell than the one in that application, we will notice that when that application is reduced in size, and the button to display the mobile menu appears, clicking it doesn’t actually work.

This is caused by a bug in the JQuery code, that is required for the Bootstrap code, that displays the mobile menu.

The application shell presented in this article is a pure Angular 4 solution.

Create The New Shell

image

The application starts with the app.component.html file.

To demonstrate how it controls the application, we will change its contents to the following:

 

<div class="layout-main">
    <div class="app-bar"><h4>Page Header</h4></div> 
    <br />
    <br /><br />
    <div class="app-bar"><h4>Page Footer</h4></div>
</div>

 

When we run the application, we see the following:

image

Angular is a SPA (Single Page Application) so any content we put in the header and footer (such as a logo of copyright notice) will stay on the page at all times.

image

We are reminded that the routes for the application are defined in the app.module.shared.ts, file and that the default route is to display the home page that displays the HomeComponent.

If we now change the app.component.html file to the following (to add the <router-outlet> tag):

 

<div class="layout-main">
    <div class="app-bar"><h4>Page Header</h4></div> 
    <br />
    <router-outlet></router-outlet>
    <br /><br />
    <div class="app-bar"><h4>Page Footer</h4></div>
</div>

 

We get the following:

image

Create The Menu

image

We now need a navigation menu to handle navigation in the application.

image

We will need to add some PrimeNG components to the app.module.shared.ts, file, noted in the image above.

This adds the following PrimeNG components:

 

(note: It also adds the TopMenuComponent and the SideMenuComponent do not exist yet and will be added in the later steps)

 

image

To define the content of the menu, we open the app.component.ts file and change the code to the following:

 

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/primeng';
@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
   MenuItems: MenuItem[];
    constructor() { }
    ngOnInit() {
        this.MenuItems = [
            {
                label: 'Home',
                icon: 'fa fa-fw fa-home', routerLink: ['/']
            },
            {
                label: 'Weather',
                icon: 'fa fa-fw fa-sun-o', routerLink: ['/fetch-data']
            },
            {
                label: 'File Manager',
                icon: 'fa fa-fw fa-files-o', routerLink: ['/files']
            },
            {
                label: 'Counters', icon: 'fa fa-fw fa-sitemap',
                items: [
                    {
                        label: 'Counter',
                        icon: 'fa fa-fw fa-list-ol', routerLink: ['/counter']
                    },
                    {
                        label: 'PrimeNG Counter',
                        icon: 'fa fa-fw fa-list-ol', routerLink: ['/prime']
                    },
                ]
            }
        ];
    }
}

 

image

Next, we add the top-menu.component.ts and side-menu.component.ts, (that we referenced in the app.module.shared.ts, file earlier) and use the following code:

 

top-menu.component.ts:

import { Component, Input } from '@angular/core';
import { Router } from '@angular/router';
import { MenubarModule, MenuItem } from 'primeng/primeng';
@Component({
    selector: 'top-menu',
    template: `
        <p-menubar [model]="MenuData">
    `
})
export class TopMenuComponent {
    @Input() MenuData: MenuItem[];
    constructor() { }
}

 

side-menu.component.ts:

 

import { Component, Input} from '@angular/core';
import { Router } from '@angular/router';
import { ToolbarModule, TieredMenuModule, MenuItem } from 'primeng/primeng';
@Component({
    selector: 'side-menu',
    template: `
        <p-toolbar>
        <button #btn type="button" pButton label="Menu" icon="fa fa-bars" 
         class="ui-button-secondary" (click)="menu.toggle($event)"></button>
        <p-tieredMenu #menu [model]="MenuData" [popup]="true"></p-tieredMenu>  
        </p-toolbar>
    `
})
export class SideMenuComponent {
    @Input() MenuData: MenuItem[];
    constructor() { }
}

 

We now change the app.component.html file to the following (to add the top and side menu components):

 

<div class="layout-main">
    <div class="app-bar"><h4>Page Header</h4></div> 
    <br />
    <div>
        <top-menu [MenuData]="MenuItems" class="layout-topmenu"></top-menu>
        <side-menu [MenuData]="MenuItems" class="layout-sidemenu"></side-menu>
    </div>
    <router-outlet></router-outlet>
    <br /><br />
    <div class="app-bar"><h4>Page Footer</h4></div>
</div>

 

Finally we alter the app.component.css file to the following (to show and hide the top and side menus when the screen is resized):

 

@media (max-width: 500px) {
    /* Mobile */
    .layout-topmenu {
        display: none;
    }
    .layout-sidemenu {
        visibility: visible;
    }
}
@media (min-width: 500px) {
    /* Desktop */
    .layout-topmenu {
        visibility: visible;
    }
    .layout-sidemenu {
        display: none;
    }
}
.layout-main {
    padding-left: 20px;
    padding-right: 20px;
}
.layout-topmenu {
    padding-top: 190px;
}
.app-bar {
    background-color:gainsboro;
}

 

image

We can run the application, and it is now complete.

 

Links

Angular 2-4

Upgrading JavaScriptServices and PrimeNG From Angular 2 to Angular 4+

PrimeNG

JavaScriptServices

Download

The project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

You must have Visual Studio 2017 (or higher) installed to run the code.

Note: You will need to alter the appsettings.json file to point to the exact location of the .mdf file on your computer (depending on where you unzip the project to), and build the project before trying to run it.


Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation