Angular UI Development with PrimeNG

Unleash the power of PrimeNG components to design compelling user interface for your Angular applications
Preview in Mapt

Angular UI Development with PrimeNG

Sudheer Jonna, Oleg Varaksin

2 customer reviews
Unleash the power of PrimeNG components to design compelling user interface for your Angular applications
Mapt Subscription
FREE
$29.99/m after trial
eBook
$25.20
RRP $35.99
Save 29%
Print + eBook
$44.99
RRP $44.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$25.20
$44.99
$29.99p/m after trial
RRP $35.99
RRP $44.99
Subscription
eBook
Print + eBook
Start 30 Day Trial

Frequently bought together


Angular UI Development with PrimeNG Book Cover
Angular UI Development with PrimeNG
$ 35.99
$ 25.20
Mastering AngularJS UI Development [Video] Book Cover
Mastering AngularJS UI Development [Video]
$ 94.99
$ 80.75
Buy 2 for $35.00
Save $95.98
Add to Cart
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 

Book Details

ISBN 139781788299572
Paperback384 pages

Book 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.

Table of Contents

Chapter 1: Getting Started with Angular and PrimeNG
TypeScript fundamentals
Advanced types, decorators, and compiler options
Angular cheat sheet - overview of key concepts
Angular modularity and lifecycle hooks
Running PrimeNG with SystemJS
Setting up PrimeNG project with Webpack
Setting up PrimeNG project with Angular CLI
Summary
Chapter 2: Theming Concepts and Layouts
Understanding structural and skinning CSS
Organizing your project structure with Sass
Simple ways to create a new theme
The responsive grid system in PrimeNG
Bootstrap flexbox layout meets PrimeNG
Summary
Chapter 3: Enhanced Inputs and Selects
Formatted input with InputMask
Autosuggestion with AutoComplete
Entering multiple values with Chips
Discovering checkbox - boolean, many, and TriState
Choosing items with single and MultiSelect components
Basic and advanced Calendar scenarios
Spinner and Slider – different ways to provide input
Text editing with rich editors
Password and star-based rating inputs
Validation with the input and select components
Summary
Chapter 4: Button and Panel Components
Enhanced Button, RadioButton, and SplitButton
Selecting a value with ToggleButton and SelectButton
Grouping buttons with Toolbar
Arranging your view with Panels and FieldSets
Vertical stacked panels with Accordion
Grouping content with tabs in TabView
Summary
Chapter 5: Data Iteration Components
Multi feature DataTable
Selecting rows in DataTable
Sorting, filtering, and paginating data in DataTable
Customizing the cell content with templating
Resizing, reordering, and toggling columns in DataTable
In-cell editing with DataTable
Making DataTable responsive
Using column and row grouping
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
Listing data with PickList
Listing data with OrderList
Grid-organized data with DataGrid
On-demand data loading with DataScroller
Visualizing data with Tree
Visualizing data with TreeTable
Managing events with Schedule
Summary
Chapter 6: Amazing Overlays and Messages
Displaying content in the popup mode
Multipurpose scenarios with OverlayPanel
Displaying content in Lightbox
Notifying users with Messages and Growl
Tooltips for form components
Summary
Chapter 7: Endless Menu Variations
Creating programmatic menus using the MenuModel API
Statically and dynamically positioned menus
Accessing commands via MenuBar
ContextMenu with nested items
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
Chapter 8: Creating Charts and Maps
Working with the chart model
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
Basic integration with the Google Maps API
Various use cases with the GMap component
Summary
Chapter 9: Miscellaneous Use Cases and Best Practices
File uploading in all its glory
Learning draggable and droppable directives
Displaying a collection of images with Galleria
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
Summary
Chapter 10: Creating Robust Applications
Setting up unit testing with Jasmine and Karma
Unit testing of components and services
Tips on how to speed up unit testing
Setting up the e2e test environment with Protractor
Writing automated UI tests at a glance
Exploring a PrimeNG application with Augury and ng.probe
Summary

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.

Authors

Table of Contents

Chapter 1: Getting Started with Angular and PrimeNG
TypeScript fundamentals
Advanced types, decorators, and compiler options
Angular cheat sheet - overview of key concepts
Angular modularity and lifecycle hooks
Running PrimeNG with SystemJS
Setting up PrimeNG project with Webpack
Setting up PrimeNG project with Angular CLI
Summary
Chapter 2: Theming Concepts and Layouts
Understanding structural and skinning CSS
Organizing your project structure with Sass
Simple ways to create a new theme
The responsive grid system in PrimeNG
Bootstrap flexbox layout meets PrimeNG
Summary
Chapter 3: Enhanced Inputs and Selects
Formatted input with InputMask
Autosuggestion with AutoComplete
Entering multiple values with Chips
Discovering checkbox - boolean, many, and TriState
Choosing items with single and MultiSelect components
Basic and advanced Calendar scenarios
Spinner and Slider – different ways to provide input
Text editing with rich editors
Password and star-based rating inputs
Validation with the input and select components
Summary
Chapter 4: Button and Panel Components
Enhanced Button, RadioButton, and SplitButton
Selecting a value with ToggleButton and SelectButton
Grouping buttons with Toolbar
Arranging your view with Panels and FieldSets
Vertical stacked panels with Accordion
Grouping content with tabs in TabView
Summary
Chapter 5: Data Iteration Components
Multi feature DataTable
Selecting rows in DataTable
Sorting, filtering, and paginating data in DataTable
Customizing the cell content with templating
Resizing, reordering, and toggling columns in DataTable
In-cell editing with DataTable
Making DataTable responsive
Using column and row grouping
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
Listing data with PickList
Listing data with OrderList
Grid-organized data with DataGrid
On-demand data loading with DataScroller
Visualizing data with Tree
Visualizing data with TreeTable
Managing events with Schedule
Summary
Chapter 6: Amazing Overlays and Messages
Displaying content in the popup mode
Multipurpose scenarios with OverlayPanel
Displaying content in Lightbox
Notifying users with Messages and Growl
Tooltips for form components
Summary
Chapter 7: Endless Menu Variations
Creating programmatic menus using the MenuModel API
Statically and dynamically positioned menus
Accessing commands via MenuBar
ContextMenu with nested items
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
Chapter 8: Creating Charts and Maps
Working with the chart model
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
Basic integration with the Google Maps API
Various use cases with the GMap component
Summary
Chapter 9: Miscellaneous Use Cases and Best Practices
File uploading in all its glory
Learning draggable and droppable directives
Displaying a collection of images with Galleria
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
Summary
Chapter 10: Creating Robust Applications
Setting up unit testing with Jasmine and Karma
Unit testing of components and services
Tips on how to speed up unit testing
Setting up the e2e test environment with Protractor
Writing automated UI tests at a glance
Exploring a PrimeNG application with Augury and ng.probe
Summary

Book Details

ISBN 139781788299572
Paperback384 pages
Read More
From 2 reviews

Read More Reviews

Recommended for You

Mastering AngularJS UI Development [Video] Book Cover
Mastering AngularJS UI Development [Video]
$ 94.99
$ 80.75
AngularJS UI Development Book Cover
AngularJS UI Development
$ 26.99
$ 18.90
Learning Web Development with Bootstrap and AngularJS Book Cover
Learning Web Development with Bootstrap and AngularJS
$ 39.99
$ 28.00
Data-oriented Development with AngularJS Book Cover
Data-oriented Development with AngularJS
$ 19.99
$ 14.00
Web Development with AngularJS and Bootstrap [Video] Book Cover
Web Development with AngularJS and Bootstrap [Video]
$ 74.99
$ 63.75
Mastering Web Application Development with AngularJS Book Cover
Mastering Web Application Development with AngularJS
$ 26.99
$ 5.40