Angular UI Development with PrimeNG

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

Angular UI Development with PrimeNG

This ebook is included in a Mapt subscription
Sudheer Jonna, Oleg Varaksin

Unleash the power of PrimeNG components to design compelling user interface for your Angular applications
$0.00
$18.00
$44.99
$29.99p/m after trial
RRP $35.99
RRP $44.99
Subscription
eBook
Print + eBook
Start 30 Day Trial
Subscribe and access every Packt eBook & Video.
 
  • 4,000+ eBooks & Videos
  • 40+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
Preview in Mapt

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

Read More Reviews