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.

Preface

What this book covers

What you need for this book

Who this book is for

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Free Chapter

Getting Started with Angular and PrimeNG

Getting Started with Angular and PrimeNG

TypeScript fundamentals

Interfaces, classes, and enums

Advanced types, decorators, and compiler options

Union types and type aliases

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

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

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

Responsive and fluid layout

Bootstrap flexbox layout meets PrimeNG

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

Time picker options

Advanced features

Spinner and Slider – different ways to provide input

Advanced features - going beyond basic usage

Advanced features - going beyond basic usage

Text editing with rich editors

The customized editor

Password and star-based rating inputs

Validation with the input and select components

Button and Panel Components

Button and Panel Components

Enhanced Button, RadioButton, and SplitButton

Icons and severity

Icons and theming

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

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

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

Column grouping

Expandable row 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

Listing data with PickList

Listing data with OrderList

Grid-organized data with DataGrid

Beyond basic usage - advanced features

On-demand data loading with DataScroller

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

Amazing Overlays and Messages

Amazing Overlays and Messages

Displaying content in the popup mode

Usability features

Customized header and footer

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

Endless Menu Variations

Endless Menu Variations

Creating programmatic menus using the MenuModel API

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

Creating Charts and Maps

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

Hierarchical data with zero configuration

Advanced customization

Selection and events

Basic integration with the Google Maps API

Various use cases with the GMap component

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

Learning draggable and droppable directives

Displaying a collection of images with Galleria

Get it up and running

Auto play mode and effects

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

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

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Tooltips for form components

Tooltip provides an advisory information for a component. This gives a brief insight of target component before going to use. The Tooltip is applied through the pTooltip directive with the value to define text to display. Along with that, HTML tags also displayed instead of regular text information with the help of the escape attribute. A basic example of Tooltip is to provide an advisory information for input as follows:

<input type="text" pInputText pTooltip="Enter your favourite component   
  name" >

The Tooltip display on right side of input as shown in the following screenshot:

The Tooltip position is displayed on the right side of target component by default. This behavior can be changed using the tooltipPosition property with other values such as top, right, and bottom, for example, tooltipPosition with the top value will result as in the following screenshot:

By default, the Tooltip is displayed on hover of a target element...