Jul
17
Written by:
Michael Washington
7/17/2017 10:13 PM
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.
In this example, the application shell has the following features:
- Fixed header and footer
- Nested menu
- Collapsible popup menu (for mobile and small screens)
When the web browser window is reduced in size, the toolbar menu collapses into a single Menu button.
Clicking on this button opens the popup menu.
The Application
We start with the application created in the article:
Upgrading JavaScriptServices and PrimeNG From Angular 2 to Angular 4+
This application sets up JavaScriptServices and PrimeNG. The JavaScriptServices template creates an application shell that uses BootStrap (that also requires JQuery).
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
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:
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.
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:
Create The Menu
We now need a navigation menu to handle navigation in the application.
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)
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']
},
]
}
];
}
}
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;
}
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.