Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required. Paperback excluded.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Angular UI Development with PrimeNG
Angular UI Development with PrimeNG

Angular UI Development with PrimeNG: Build rich UI for Angular applications using PrimeNG

Arrow left icon
Profile Icon Varaksin Profile Icon Sudheer Jonna
Arrow right icon
€36.99
Paperback Jul 2017 384 pages 1st Edition
eBook
€20.98 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at €18.99p/m
Arrow left icon
Profile Icon Varaksin Profile Icon Sudheer Jonna
Arrow right icon
€36.99
Paperback Jul 2017 384 pages 1st Edition
eBook
€20.98 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at €18.99p/m
eBook
€20.98 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Table of content icon View table of contents Preview book icon Preview Book

Angular UI Development with PrimeNG

Theming Concepts and Layouts

The main goal of this chapter is to provide an introduction to PrimeNG themes, layouts, and the concepts involved. The theming concept used in PrimeNG is similar to the jQuery ThemeRoller CSS Framework (http://jqueryui.com/themeroller). PrimeNG components are designed to allow a developer to integrate them seamlessly into the look and feel of an entire web application. At the time of writing, there are 17 free themes and 5 premium themes and layouts. Free themes include ThemeRoller themes, a Twitter Bootstrap theme, and some custom themes powered by PrimeFaces and PrimeNG. Such themes are distributed along with PrimeNG itself under Apache License.

In Chapter 1, Getting Started with Angular and PrimeNG, we showed three possible setups and theme installations. You can also play with the free themes in the PrimeNG showcase (https://www.primefaces.org...

Understanding structural and skinning CSS

Each component is styled with CSS and contains two layers of style information: structural or component-specific and skinning or component-independent styles. In this section, you will understand the difference between these two types of CSS, learn some useful selectors, and see an exemplary styling of the Paginator component in the generated HTML. Let's start. Go to the Paginator showcase (https://www.primefaces.org/primeng/#/paginator) and explore the HTML code of the Paginator component. The next screenshot shows the HTML and styles in the Google Chrome DevTools.

Shortcuts for opening DevTools: F12 (Windows), command + option + I (Mac).

The highlighted line in the preceding screenshot represents the container element of the Paginator component with the following style classes:

  • ui-paginator
  • ui-unselectable-text
  • ui-widget
  • ui-widget-header

The first two style classes ui-paginator and ui-unselectable-text are generated by PrimeNG. These...

Organizing your project structure with Sass

Every large frontend application needs a robust, scalable CSS architecture. A CSS preprocessor is indispensable--it helps to write cleaner, modular code with reusable pieces and maintain large and complex style sheets. A CSS preprocessor is basically a scripting language that extends CSS and compiles it into regular CSS. There are three primary CSS preprocessors today: Sass, LESS, and Stylus. As per Google Trends, Sass is the most used preprocessor today. Sass mimics the HTML structure and lets you nest CSS selectors that follow the same visual HTML hierarchy. With CSS, you would need to write this:

.container {
padding: 5px;
}

.container p {
margin: 5px;
}

With Sass, you can simply write this:

.container {
padding: 5px;
p {
margin: 5px;
}
}
Sass is backward compatible with CSS, so you can easily convert your existing CSS files just by renaming the .css file extension to .scss.

While nesting CSS selectors, you can use the handy & symbol...

Simple ways to create a new theme

We sometimes need to create our own themes instead of using the predefined ones. Web applications should often feature a company-specific look and feel, which is constant and preset by company-wide style guides. Creating new themes is easy with PrimeNG, because it is powered by the ThemeRoller CSS Framework (http://jqueryui.com/themeroller). ThemeRoller provides a powerful and easy-to-use online visual tool. In this section, we will systematically show all the required steps to create a new theme. There are two ways how to create a new theme, either by ThemeRoller or from scratch with Sass.

ThemeRoller approach

To gain first-hand experience of the ThemeRoller online visual tool, go to the ThemeRoller home page, explore the available theme's gallery, and play with the CSS properties to see changes for widgets embedded on the page. All CSS changes will be applied on the fly.

We have to select one of the existing themes (the Gallery tab) and edit it (the Roll Your Own tab). A click on the Download theme button accomplishes the work.

We should deselect the Toggle All checkbox under the Components option on the Download Builder page so that our new theme only includes the skinning styles.

Next, we need to migrate the downloaded theme files from ThemeRoller to the PrimeNG theme infrastructure. The migration steps are straightforward:

  1. The theme package that we have downloaded will have a CSS file jquery-ui.theme.css (as well as minified variant) and the images folder. Extract the package and rename the CSS file as theme.css.

 

  1. In your web application, create a folder...

The Sass approach

The second way is more flexible and accurate. It is preferable to create a new theme manually by Sass because the theme is better maintainable. The main CSS settings, such as font, colors, border radius, and many more can be done configurable by Sass variables. You can create a new theme by setting custom values for those variables. This is exactly the approach followed by PrimeNG. The mostly free themes were created in such manner.

Every theme has a separate folder with a Sass file where variables are set. The variables themselves are used in _theme.scss--shared file for all free themes. This file can be found under node_modules/primeng/resources/themes/, if you install PrimeNG as the dependency. Sometimes, you also need to set custom fonts or special settings for particular CSS selectors. You can overwrite default style rules with your own ones--just write them...

The responsive grid system in PrimeNG

PrimeNG has Grid CSS--a responsive and fluid layout system optimized for mobile devices, tablets, and desktops. PrimeNG components use Grid CSS internally, but this lightweight utility can be used as standalone as well. CSS Grid is based on the 12-columns layout as many other grid systems. The total width of all columns is 100%. In this section, we will explain all features of the PrimeNG grid system in details.

Basic principles

The layout container should have the ui-g style class. Children elements of the layout container become columns when they are prefixed with ui-g-* where * is any number from 1 to 12. The number expresses the taken space of 12 available units. When the number of columns exceeds 12, columns wrap to the next line:

<div class="ui-g">
<div class="ui-g-2">2</div>
<div class="ui-g-4">4</div>
<div class="ui-g-6">6</div>
<div class="ui-g-8">8</div>
<div class="ui-g-4">4</div>
</div>

The following layout has two lines (rows):

The same two-row layout is also possible with two ui-g containers:

<div class="ui-g">
<div class="ui-g-2">2</div>
<div class="ui-g-4">4</div>
<div class="ui-g-6">6</div>
</div>
<div class="ui-g">
<div class="ui...

Nested columns

Columns can be nested in more complex layouts. To achieve that, just nest elements with the ui-g-* style classes:

<div class="ui-g">
<div class="ui-g-8 ui-g-nopad">
<div class="ui-g-6">6</div>
<div class="ui-g-6">6</div>
<div class="ui-g-12">12</div>
</div>
<div class="ui-g-4">4</div>
</div>

With this structure, columns with different content will not have equal height. There is a more robust solution to force equal height for columns with different content. Just wrap the internal div elements inside another div with the ui-g style class or even simpler, assign ui-g to the column having nested columns:

<div class="ui-g">
<div class="ui-g ui-g-8 ui-g-nopad">
<div class="ui-g-6">6<br/>6<br/>6<br/>6<br/>6<br/>6<br/></div>
<div class=...

Responsive and fluid layout

Responsive layout is achieved by applying additional classes to the columns. Four screen sizes are supported with different breakpoints.

Prefix Device Size
ui-sm-* Small devices like phones max-width: 640px
ui-md-* Medium-sized devices like tablets min-width: 641px
ui-lg-* Large-sized devices like desktops min-width: 1025px
ui-xl-* Big screen monitors min-width: 1441px

 

When an element features multiple style classes listed in the table, they get applied from the bottom to the top. Let's take an example:

<div class="ui-g">
<div class="ui-g-12 ui-md-6 ui-lg-2">ui-g-12 ui-md-6 ui-lg-2</div>
<div class="ui-g-12 ui-md-6 ui-lg-2">ui-g-12 ui-md-6 ui-lg-2</div>
<div class="ui-g-12 ui-md-4 ui-lg-8">ui-g-12 ui-md-4 ui-lg-8</div>
</div>

What is happening here?

  • On large screens, three columns are displayed in proportion 2:12, 2:12, and 8:12.
  • On medium screens...

Bootstrap flexbox layout meets PrimeNG

In this section, we will reimplement the graphic editor introduced in the Organizing your project structure with Sass section with Bootstrap 4 (https://v4-alpha.getbootstrap.com) and PrimeNG components. Starting with the version v4.0.0-alpha.6, Bootstrap only has a flexbox-based layout by default, with no fallback.

Flexbox is a new layout model, which is widely supported in all modern browsers (http://caniuse.com/#search=flexbox). There are many tutorials on the Internet. You can, for example, read a comprehensive guide to the CSS flexbox layout at https://css-tricks.com/snippets/css/a-guide-to-flexbox. Flexbox tackles many layout problems. One of the main advantages of flexbox is the ability to fill extra space. All columns in the flexbox layout have the same height irrespective of their content. Let's show final screens of the graphic editor for two device resolutions.

For desktop:

For mobile:

Beside PrimeNG, we need to install the latest...

Summary

After reading this chapter, you can distinguish between structural and skinning style classes. In short words, structural style classes define the skeleton of the components and the skinning ones are for theming. We have seen how to set up any PrimeNG theme and create a new one. A new theme can be created either by ThemeRoller or by setting custom values for Sass variables and CSS properties of an existing theme with subsequent compilation to a CSS file. We encourage to use a CSS preprocessor for a modular CSS architecture. Sass preprocessor helps in writing better styles. A guideline for organizing the Sass files was provided as well.

After reading this chapter, you are also able to use one of the responsive grid systems, either PrimeNG own or Bootstrap's one. PrimeNG offers a lightweight responsive and fluid layout system. Furthermore, PrimeNG components having built-in responsive mode when using the .ui-fluid style class on the top container element. The flexbox-based...

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Detailed insights into PrimeNG concepts, components and features with examples to help you make excellent User Interfaces for Angular web apps.
  • Get familiar with themes, layouts and customization in real world applications.
  • Develop Angular applications rapidly using advance tools and standards with best practices.

Description

PrimeNG is a leading UI component library for Angular applications with 80+ rich UI components. PrimeNG was a huge success in the Angular world and very quickly. It is a rapidly evolving library that is aligned with the last Angular release. In comparison with competitors, PrimeNG was created with enterprise applications in mind. This book provides a head-start to help readers develop real–world, single-page applications using the popular development stack. This book consists of 10 chapters and starts with a short introduction to single-page applications. TypeScript and Angular fundamentals are important first steps for subsequent PrimeNG topics. Later we discuss how to set up and configure a PrimeNG application in different ways as a kick-start. Once the environment is ready then it is time to learn PrimeNG development, starting from theming concepts and responsive layouts. Readers will learn enhanced input, select, button components followed by the various panels, data iteration, overlays, messages and menu components. The validation of form elements will be covered too. An extra chapter demonstrates how to create map and chart components for real-world applications. Apart from built-in UI components and their features, the readers will learn how to customize components to meet their requirements. Miscellaneous use cases are discussed in a separate chapter, including: file uploading, drag and drop, blocking page pieces during AJAX calls, CRUD sample implementations, and more. This chapter goes beyond common topics, implements a custom component, and discusses a popular state management with @ngrx/store. The final chapter describes unit and end-to-end testing. To make sure Angular and PrimeNG development are flawless, we explain full-fledged testing frameworks with systematic examples. Tips for speeding up unit testing and debugging Angular applications end this book. The book is also focused on how to avoid some common pitfalls, and shows best practices with tips and tricks for efficient Angular and PrimeNG development. At the end of this book, the readers will know the ins and outs of how to use PrimeNG in Angular applications and will be ready to create real- world Angular applications using rich PrimeNG components.

Who is this book for?

This book is for everybody who would like to learn or create modern Angular based single page applications using PrimeNG component library. This book is a good choice for beginners to advanced users who are serious to learn modern Angular applications. The prerequisites for this book are some basic knowledge on the Angular 2+ version with TypeScript and CSS skills.

What you will learn

  • - Setup PrimeNG projects with SystemJS, Webpack, and Angular CLI.
  • - Use theming concepts and layouts with grid systems and Bootstrap.
  • - Work with enhanced input, select, button and panel components.
  • - Apply countless DataTable features: sorting, filtering, grouping, and templating.
  • - Meet data iteration components: DataList, DataGrid, Tree, and so on.
  • - Build endless menu variations: SlideMenu, TieredMenu, MegaMenu, and so on.
  • - Visualize your data representations with PrimeNG charts and GMap components.
  • - Adopt best practices such as state management with @ngrx/store.
  • - Write unit and end-to-end tests with Jasmine, Karma, and Protractor.
Estimated delivery fee Deliver to Austria

Premium delivery 7 - 10 business days

€26.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jul 27, 2017
Length: 384 pages
Edition : 1st
Language : English
ISBN-13 : 9781788299572
Vendor :
Google
Languages :
Tools :

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Estimated delivery fee Deliver to Austria

Premium delivery 7 - 10 business days

€26.95
(Includes tracking information)

Product Details

Publication date : Jul 27, 2017
Length: 384 pages
Edition : 1st
Language : English
ISBN-13 : 9781788299572
Vendor :
Google
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 146.97
Bootstrap 4 ??? Responsive Web Design
€67.99
Expert Angular
€41.99
Angular UI Development with PrimeNG
€36.99
Total 146.97 Stars icon

Table of Contents

10 Chapters
Getting Started with Angular and PrimeNG Chevron down icon Chevron up icon
Theming Concepts and Layouts Chevron down icon Chevron up icon
Enhanced Inputs and Selects Chevron down icon Chevron up icon
Button and Panel Components Chevron down icon Chevron up icon
Data Iteration Components Chevron down icon Chevron up icon
Amazing Overlays and Messages Chevron down icon Chevron up icon
Endless Menu Variations Chevron down icon Chevron up icon
Creating Charts and Maps Chevron down icon Chevron up icon
Miscellaneous Use Cases and Best Practices Chevron down icon Chevron up icon
Creating Robust Applications Chevron down icon Chevron up icon