Book Image

Angular UI Development with PrimeNG

By : Sudheer Jonna, Oleg Varaksin
Book Image

Angular UI Development with PrimeNG

By: Sudheer Jonna, Oleg Varaksin

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
Angular UI Development with PrimeNG
Sudheer Jonna | Oleg Varaksin
Jul, 2017 | 384 pages
Small book image
Getting Started with Angular
Minko Gechev
Feb, 2017 | 278 pages
Small book image
Building Modern Web Applications Using Angular 4
Shravan Kumar Kasagoni
May, 2017 | 226 pages
Small book image
Switching to Angular
Minko Gechev
Oct, 2017 | 280 pages
Table of Contents (11 chapters)
Preface
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Downloading the color images of this book
Errata
Piracy
Questions
Free Chapter
1
Getting Started with Angular and PrimeNG
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
2
Theming Concepts and Layouts
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
3
Enhanced Inputs and Selects
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
4
Button and Panel Components
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
5
Data Iteration Components
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
6
Amazing Overlays and Messages
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
7
Endless Menu Variations
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
8
Creating Charts and Maps
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
9
Miscellaneous Use Cases and Best Practices
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
10
Creating Robust Applications
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

Transition effects

The LightBox component is more powerful with the transition effects between images. This can be achieved through the easing property. Here, the default value is ease-out (that is, the effects are customized using the easing property). There are many other effects available, the entire list of CSS3 effects are supported. Also, by default, the effect duration is 500ms. This also can be customized through the effectDuration property.

The transition effect as an example of a LightBox with a collection of Angular conferences would be as follows:

<p-lightbox [images]="images" name="effects" easing="ease-out"  
  effectDuration="1000ms">
</p-lightbox>
The complete demo application with instructions is available on GitHub at
https://github.com/ova2/angular-development-with-primeng/tree/master/chapter6/lightbox.
Previous Section
End of Section 13
Next Section