Angular UI Development with PrimeNG

Sudheer Jonna, Oleg Varaksin

• Publisher: Packt Publishing
• Year: 2017
• eBook ISBN: 9781788297868
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Unleash the power of PrimeNG components to design compelling user interface for your Angular applicationsAbout This Book• 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.Who This Book Is ForThis 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.In DetailPrimeNG 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.Style and approachStep-by-step practical approach

Data Iteration Components

In this chapter, we will cover the basic and advanced features to visualize data with data iteration components provided by PrimeNG, which include DataTable, DataList, PickList, OrderList, DataGrid, DataScroller, Tree, and TreeTable. We will start with the DataTable component that offers extensive features, such as filtering, sorting, pagination, selection, reordering, column resizing, toggling, and many more. We will then focus on various other components, such as DataList, that render data in a listed format and provide data selection through the listed sets such as PickList and OrderList.

After that, we will also see two more data variation components such as DataGrid that arranges large datasets in the grid-oriented layout and DataScroller that lazily loads data according to the page scroll done by the user. The Tree and TreeTable components list data in a tree format, and they are mostly based on the same data model. At the end of this chapter, we will discuss a sophisticated component called Schedule to visualize calendar data, and we will demonstrate its usage with its lazy loading feature.

In this chapter, we will cover the following topics:

• Multi feature DataTable
• Selecting rows in DataTable
• Sorting, filtering, and paginating data in DataTable
• Customizing 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 row template
• Exporting data in the 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

Multi feature DataTable

DataTable displays data in a tabular format. The table is an arrangement of data in rows and columns, or possibly in a more complex structure. It requires a value as an array of objects bound through the value property and columns defined with the p-column component. A basic example of the component with browser details to display in the list format would be written as follows:

<p-dataTable [value]="browsers">
 <p-column field="engine" header="Engine"></p-column>
 <p-column field="browser" header="Browser"></p-column>
 <p-column field="platform" header="Platform"></p-column>
 <p-column field="grade" header="Grade"></p-column>
</p-dataTable>

The browsers array consists of objects with engine, browser, platform, and grade properties. The field property will map the model object property, whereas the header property is used to display a column's heading. In real-time applications, we use services to fetch the data from remote data sources. In this case, service is created as an injectable service and it uses the HTTP module to fetch data. The browser service would be defined with observables as shown here:

@Injectable()
export class BrowserService {

constructor(private http: Http) { }

getBrowsers(): Observable<Browser[]> {
 return this.http.get('/assets/data/browsers.json')
 .map(response => response.json().data as Browser[]);
 }
}

The component class has to define an array of browser objects (or items) for the value property. The items are retrieved from the remote service call as shown here:

browsers: Browser[];

con...

Table of contents

• Title Page
• Copyright
• Credits
• Foreword
• About the Authors
• About the Reviewer
• www.PacktPub.com
• Customer Feedback
• Preface
• Getting Started with Angular and PrimeNG
• Theming Concepts and Layouts
• Enhanced Inputs and Selects
• Button and Panel Components
• Data Iteration Components
• Amazing Overlays and Messages
• Endless Menu Variations
• Creating Charts and Maps
• Miscellaneous Use Cases and Best Practices
• Creating Robust Applications