Search icon Close icon
Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Checkout

Change country

Modal Close icon
Country selected Country selected
country flag Germany
Country selected
country flag Slovakia
Country selected
country flag Canada
Country selected
country flag Brazil
Country selected
country flag Singapore
Country selected
country flag Hungary
Country selected
country flag Philippines
Country selected
country flag Mexico
Country selected
country flag Thailand
Country selected
country flag Ukraine
Country selected
country flag Luxembourg
Country selected
country flag Estonia
Country selected
country flag Lithuania
Country selected
country flag Norway
Country selected
country flag Chile
Country selected
country flag United States
Country selected
country flag Great Britain
Country selected
country flag India
Country selected
country flag Spain
Country selected
country flag South Korea
Country selected
country flag Ecuador
Country selected
country flag Colombia
Country selected
country flag Taiwan
Country selected
country flag Switzerland
Country selected
country flag Indonesia
Country selected
country flag Cyprus
Country selected
country flag Denmark
Country selected
country flag Finland
Country selected
country flag Poland
Country selected
country flag Malta
Country selected
country flag Czechia
Country selected
country flag New Zealand
Country selected
country flag Austria
Country selected
country flag Turkey
Country selected
country flag France
Country selected
country flag Sweden
Country selected
country flag Italy
Country selected
country flag Egypt
Country selected
country flag Belgium
Country selected
country flag Portugal
Country selected
country flag Slovenia
Country selected
country flag Ireland
Country selected
country flag Romania
Country selected
country flag Greece
Country selected
country flag Argentina
Country selected
country flag Malaysia
Country selected
country flag South Africa
Country selected
country flag Netherlands
Country selected
country flag Bulgaria
Country selected
country flag Latvia
Country selected
country flag Australia
Country selected
country flag Japan
Country selected
country flag Russia
Country selected
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Home > Web Development > Front End Web Development > Angular UI Development with PrimeNG
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 Sudheer Jonna Profile Icon Varaksin
Arrow right icon
$48.99
Full star icon Full star icon Half star icon Empty star icon Empty star icon 2.3 (3 Ratings)
Paperback Jul 2017 384 pages 1st Edition
eBook
$27.98 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Sudheer Jonna Profile Icon Varaksin
Arrow right icon
$48.99
Full star icon Full star icon Half star icon Empty star icon Empty star icon 2.3 (3 Ratings)
Paperback Jul 2017 384 pages 1st Edition
eBook
$27.98 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$27.98 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.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
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
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.

The free themes are hosted on GitHub at https://github.com/primefaces/primeng/tree/master/resources/themes.

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

Page 1 of 12

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 Chile

Standard delivery 10 - 13 business days

$19.95

Premium delivery 3 - 6 business days

$40.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
Category :
Web Development
Languages :
Typescript
Concepts :
Front End Web Development
Tools :
Angular

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
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Estimated delivery fee Deliver to Chile

Standard delivery 10 - 13 business days

$19.95

Premium delivery 3 - 6 business days

$40.95
(Includes tracking information)

Product Details

Publication date : Jul 27, 2017
Length: 384 pages
Edition : 1st
Language : English
ISBN-13 : 9781788299572
Vendor :
Google
Category :
Web Development
Languages :
Typescript
Concepts :
Front End Web Development
Tools :
Angular

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.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
START FREE TRIAL
BUY NOW
$199.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
START FREE TRIAL
BUY NOW
$279.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
START FREE TRIAL
BUY NOW

Frequently bought together

Bootstrap 4 ??? Responsive Web Design
Bootstrap 4 ??? Responsive Web Design
Read more
Jul 2017 810 pages
Course
Course
$89.99
Expert Angular
Expert Angular
Read more
Jul 2017 454 pages
Full star icon 4.4 (5)
eBook
eBook
  • eBook eBook $29.99
  • Paperback Paperback $54.99
$29.99 $43.99
$54.99
Angular UI Development with PrimeNG
Angular UI Development with PrimeNG
Read more
Jul 2017 384 pages
Full star icon 2.3 (3)
eBook
eBook
  • eBook eBook $27.98
  • Paperback Paperback $48.99
$27.98 $39.99
$48.99
Stars icon
Total $ 193.97
Bootstrap 4 ??? Responsive Web Design
$89.99
Expert Angular
$54.99
Angular UI Development with PrimeNG
$48.99
Total $ 193.97 Stars icon

Table of Contents

10 Chapters
Getting Started with Angular and PrimeNG Chevron down icon Chevron up icon
Getting Started with Angular and PrimeNG
TypeScript fundamentals
Basic types
Interfaces, classes, and enums
Functions
Generics
Modules
Advanced types, decorators, and compiler options
Union types and type aliases
Type inference
Decorators
Type definition files
Compiler options
Angular cheat sheet - overview of key concepts
Components, services, and dependency injection
Templates and bindings
Built-in directives
Communication between components
Forms
Routing
Angular modularity and lifecycle hooks
Modules and bootstrapping
Lifecycle hooks
Running PrimeNG with SystemJS
The SystemJS configuration for Angular
Adding PrimeNG dependencies
Setting up PrimeNG project with Webpack
Entry point and output
Loaders and plugins
Adding PrimeNG, CSS, and SASS
Setting up PrimeNG project with Angular CLI
Generating scaffolding
Adding PrimeNG dependencies
Summary
Theming Concepts and Layouts Chevron down icon Chevron up icon
Theming Concepts and Layouts
Understanding structural and skinning CSS
Organizing your project structure with Sass
Simple ways to create a new theme
ThemeRoller approach
The Sass approach
The responsive grid system in PrimeNG
Basic principles
Nested columns
Responsive and fluid layout
Bootstrap flexbox layout meets PrimeNG
Summary
Enhanced Inputs and Selects Chevron down icon Chevron up icon
Enhanced Inputs and Selects
Formatted input with InputMask
Mask format options
Using the slot character
Making a part of the mask optional
Autosuggestion with AutoComplete
Multiple selection
Working with objects
Advanced features - the customized content displays
Entering multiple values with Chips
Display complex information using template
Discovering checkbox - boolean, many, and TriState
Boolean checkbox - single selection
Checkbox multiple selection
Multistate representation - TriStateCheckbox
Choosing items with single and MultiSelect components
Customized Dropdown
The MultiSelect dropdown
Basic and advanced Calendar scenarios
Localization
Time picker options
Advanced features
Spinner and Slider – different ways to provide input
Advanced features - going beyond basic usage
Slider
Advanced features - going beyond basic usage
Text editing with rich editors
The customized editor
Password and star-based rating inputs
Rating input
Validation with the input and select components
Summary
Button and Panel Components Chevron down icon Chevron up icon
Button and Panel Components
Enhanced Button, RadioButton, and SplitButton
Button
Icons and severity
RadioButton
SplitButton
Icons and theming
Selecting a value with ToggleButton and SelectButton
SelectButton
Grouping buttons with Toolbar
Arranging your view with Panels and FieldSets
Panel
FieldSet
Vertical stacked panels with Accordion
Grouping content with tabs in TabView
Summary
Data Iteration Components Chevron down icon Chevron up icon
Data Iteration Components
Multi feature DataTable
Change detection
Dynamic columns
Selecting rows in DataTable
Single selection
Multiple selection
RadioButton selection
Checkbox selection
Sorting, filtering, and paginating data in DataTable
Sorting
Filtering
Pagination
Customizing the cell content with templating
Resizing, reordering, and toggling columns in DataTable
Resizing
Reordering
Toggling
In-cell editing with DataTable
Making DataTable responsive
Using column and row grouping
Column grouping
Row grouping
Expandable row groups
Sub-headers
RowSpan groups
Handling tons of data with lazy DataTable
Row expansion by providing a row template
Exporting data in CSV format
DataTable events and methods
Listing data with DataList
Facets and pagination
Lazy loading
Events
Listing data with PickList
Listing data with OrderList
Grid-organized data with DataGrid
Beyond basic usage - advanced features
On-demand data loading with DataScroller
Lazy loading
Visualizing data with Tree
Selection features - single, multiple, and checkbox
Beyond basic usage - advanced features
Visualizing data with TreeTable
Selection features - single, multiple, and checkbox
Beyond basic usage - advanced features
Managing events with Schedule
Header customization
Beyond basic usage - advanced features
Events and methods
Summary
Amazing Overlays and Messages Chevron down icon Chevron up icon
Amazing Overlays and Messages
Displaying content in the popup mode
Dialog
Usability features
Customized header and footer
ConfirmDialog
Customization
Multipurpose scenarios with OverlayPanel
Integration with other components
Closable properties
Displaying content in Lightbox
Custom content mode
Transition effects
Notifying users with Messages and Growl
Growl - another way of notifying information
Sticky behavior
Tooltips for form components
Summary
Endless Menu Variations Chevron down icon Chevron up icon
Endless Menu Variations
Creating programmatic menus using the MenuModel API
Menu actions
Statically and dynamically positioned menus
Accessing commands via MenuBar
ContextMenu with nested items
Customized target for ContextMenu
DataTable integration
SlideMenu – menu in the iPod style
TieredMenu – sub-menus in nested overlays
MegaMenu – the multicolumn menu
PanelMenu – hybrid of Accordion and Tree
TabMenu - menu items as tabs
Breadcrumb – providing contextual information about the page hierarchy
Summary
Creating Charts and Maps Chevron down icon Chevron up icon
Creating Charts and Maps
Working with the chart model
Chart types
Customization
Events
Data representation with line and bar charts
Data representation with pie and doughnut charts
Data representation with radar and polar area charts
Drawing an organization chart for the relationship hierarchy
Hierarchical data with zero configuration
Advanced customization
Selection and events
Basic integration with the Google Maps API
Various use cases with the GMap component
Overlays
Events
Summary
Miscellaneous Use Cases and Best Practices Chevron down icon Chevron up icon
Miscellaneous Use Cases and Best Practices
File uploading in all its glory
Basic, multiple, and automatic file uploading
Restrictions by file types and size
Customizations
Learning draggable and droppable directives
Draggable
Droppable
Displaying a collection of images with Galleria
Get it up and running
Auto play mode and effects
Events
CRUD sample implementation with DataTable
Deferring mechanism to optimize page loading
Blocking page pieces during long-running AJAX calls
Process status indicator in action
Selecting colors with ColorPicker
Displaying confirmation dialog with guarded routes
Implementing a custom wizard component with Steps
Introduction to state management with @ngrx/store
Redux principles
CRUD application with @ngrx/store
Summary
Creating Robust Applications Chevron down icon Chevron up icon
Creating Robust Applications
Setting up unit testing with Jasmine and Karma
Brief introduction to Jasmine
Testing setup with Webpack and Karma
Unit testing of components and services
Angular testing utilities
Testing a component
Testing a service
Tips on how to speed up unit testing
Setting up the e2e test environment with Protractor
Installing and configuring Protractor
Writing automated UI tests at a glance
Browser object, element, and locators
Clean architecture with Page Objects
Writing complete the e2e test
Exploring a PrimeNG application with Augury and ng.probe
Augury in action
Debugging with ng.probe
Summary

Recommendations for you

Left arrow icon
Web Development with Blazor
Web Development with Blazor
Read more
Apr 2024 366 pages
Full star icon 4 (17)
eBook
eBook
  • eBook eBook $27.98
  • Paperback Paperback $49.99
$27.98 $39.99
$49.99
React and React Native
React and React Native
Read more
Apr 2024 508 pages
Full star icon 4.3 (9)
eBook
eBook
  • eBook eBook $24.99
  • Paperback Paperback $43.99
$24.99 $35.99
$43.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 498 pages
Full star icon 4.5 (57)
eBook
eBook
  • eBook eBook $24.99
  • Paperback Paperback $44.99
$24.99 $35.99
$44.99
Building Production-Grade Web Applications with Supabase
Building Production-Grade Web Applications with Supabase
Read more
Aug 2024 534 pages
Full star icon 4.3 (8)
eBook
eBook
  • eBook eBook $21.99
  • Paperback Paperback $39.99
$21.99 $31.99
$39.99
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.4 (73)
eBook
eBook
  • eBook eBook $32.99
  • Paperback Paperback $59.99
$32.99 $47.99
$59.99
C# 13 and .NET 9 – Modern Cross-Platform Development Fundamentals
C# 13 and .NET 9 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2024 828 pages
eBook
eBook
  • eBook eBook $27.98
  • Paperback Paperback $31.99
$27.98 $39.99
$31.99 $49.99
Django 5 By Example
Django 5 By Example
Read more
Apr 2024 820 pages
Full star icon 4.5 (36)
eBook
eBook
  • eBook eBook $27.98
  • Paperback Paperback $49.99
$27.98 $39.99
$49.99
.NET 8 Microservices - DDD, CQRS, Vertical/Clean Architecture
.NET 8 Microservices - DDD, CQRS, Vertical/Clean Architecture
Read more
Nov 2024 28hrs 30mins
Video
Video
  • Video Video $79.99
$79.99
Implementing Event-Driven Microservices Architecture in .NET 7
Implementing Event-Driven Microservices Architecture in .NET 7
Read more
Mar 2023 326 pages
Full star icon 4.5 (16)
eBook
eBook
  • eBook eBook $24.99
  • Paperback Paperback $44.99
$24.99 $35.99
$44.99
Building Python Microservices with FastAPI
Building Python Microservices with FastAPI
Read more
Aug 2022 420 pages
Full star icon 3.9 (9)
eBook
eBook
  • eBook eBook $25.99
  • Paperback Paperback $46.99
$25.99 $37.99
$46.99
Right arrow icon

Customer reviews

Rating distribution
Full star icon Full star icon Half star icon Empty star icon Empty star icon 2.3
(3 Ratings)
5 star 33.3%
4 star 0%
3 star 0%
2 star 0%
1 star 66.7%
David Lastovicka Jan 27, 2018
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I am a professional software developer with a lot of experience in web applications development. Only recently I started to learn Angular, Typescript and I chose PrimeNG as a component library to implement GUI.The book Angular UI development with PrimeNG turned out to be just perfect for someone with my profile: for a person with previous experience in web development but new to Angular and PrimeNG.Before reading the book I went through Angular, Typescript and PrimeNG tutorials and I thought that I got a fair knowledge so that I could create a skeleton of my first application.Yet, thanks to the book I got could fill many gaps on the level of Typescript (e.g. type assertions, decorators), Angular (e.g. communication between components, built-in directives overview, ng templates, forms) and I learned about CSS theming and layouts, automated tests and got understanding of the application setup. The section related to PrimeNG components disappointed me because it overlaps a lot with the web documentation, although there were cases where the additional comments helped me to put PrimeNG components into use more quickly.The book is neither meant for a complete beginner in the web application development, nor does it offer a very deep insight into the libraries background and I can imagine that some readers may be disappointed: complete web development beginners or professionals with a solid Angular and Typescript knowledge. For me the book met the expectations and directly contributed to improving my project.
Amazon Verified review Amazon
J. L. Hallock Nov 17, 2017
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
The documentation on the PrimeNG website is far better than this book. While all the elements are listed in the book, only a couple pages are devoted to each one. Honestly a VERY big waste of money.
Amazon Verified review Amazon
Rob Schripsema Jun 11, 2018
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
The book tries to do too much, and does none of it well. Way too many pages devoted to fundamentals of Angular that could have better been given to the PrimeNg components. The information available on the PrimeNg website is FAR more comprehensive and usable.Also needs a good editor, as there are numerous grammatical gaffes that make it difficult to take seriously.
Amazon Verified review Amazon

People who bought this also bought

Left arrow icon
Building Python Microservices with FastAPI
Building Python Microservices with FastAPI
Read more
Aug 2022 420 pages
Full star icon 3.9 (9)
eBook
eBook
  • eBook eBook $25.99
  • Paperback Paperback $46.99
$25.99 $37.99
$46.99
React and React Native
React and React Native
Read more
May 2022 606 pages
Full star icon 4.6 (17)
eBook
eBook
  • eBook eBook $27.98
  • Paperback Paperback $49.99
$27.98 $39.99
$49.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 498 pages
Full star icon 4.5 (57)
eBook
eBook
  • eBook eBook $24.99
  • Paperback Paperback $44.99
$24.99 $35.99
$44.99
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.4 (73)
eBook
eBook
  • eBook eBook $32.99
  • Paperback Paperback $59.99
$32.99 $47.99
$59.99
C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals
C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2022 818 pages
Full star icon 4.1 (54)
eBook
eBook
  • eBook eBook $27.98
  • Paperback Paperback $49.99
$27.98 $39.99
$49.99
Right arrow icon

About the authors

Left arrow icon
Profile icon Sudheer Jonna
Sudheer Jonna
LinkedIn icon
Sudheer Jonna, hailing from Nellore, India, is a seasoned lead software developer currently based in Singapore. With expertise in Java and JavaScript, he specializes in architecting and developing large-scale applications, prioritizing robust architectures and high performance. Sudheer's comprehensive knowledge spans Single Page Applications (ReactJS/VueJS/Angular), backend API development, SQL, and containerization, enabling him to assist developers in advancing their careers. Besides his professional role, Sudheer is a published author, speaker, trainer, blogger, and an active member of public forums.
Read more
See other products by Sudheer Jonna
Profile icon Varaksin
Varaksin
Oleg Varaksin is a senior software engineer living in the Black Forest, Germany. He is a graduate computer scientist who studied informatics at Russian and German universities. His main occupation and "daily bread" in the last few years has consisted of building various Java-and JavaScript-based web applications based on JSF, PrimeFaces, Spring, REST, JavaScript, jQuery, Angular, and HTML5. Currently, he is working at Swiss Federal Railways on a new ticket webshop. Oleg is an experienced and passionate web developer and has been working with the Prime UI libraries from the beginning. He is also a well-known member of the PrimeFaces community, creator of the PrimeFaces Extensions project, and the author of the PrimeFaces Cookbook. Oleg loves JavaScript, new ECMAScript standards, TypeScript, Angular, PrimeNG, RxJS, and Redux architecture. He has a deep understanding of web usability and accessibility. Oleg normally shares the knowledge he has acquired on his blog. His Twitter handle is @OlegVaraksin.
Read more
See other products by Varaksin
Right arrow icon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela