Unleash the power of PrimeNG components to design compelling user interface for your Angular applications
About 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 For
This 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.
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.
Style and approach
Step-by-step practical approach
Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.
Table of contents
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
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
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
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
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
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
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
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
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
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
- Title: Angular UI Development with PrimeNG
- Release date: July 2017
- Publisher(s): Packt Publishing
- ISBN: 9781788299572
You might also like
Angular 6 for Enterprise-Ready Web Applications
A hands-on guide with a minimalist and flexible approach that enables quick learning and rapid delivery …
Angular in Action
Angular in Action teaches you everything you need to build production-ready Angular applications. You'll start coding …
Mastering Angular Components
Develop modern user interfaces using Angular 6 and its component-based architecture. Key Features Build better web …
Building Large-Scale Web Applications with Angular
A definitive guide on frontend development with Angular from design to deployment Key Features Develop web …