Angular UI Development with PrimeNG

Angular UI Development with PrimeNG

by Sudheer Jonna, Oleg Varaksin
Released July 2017
Publisher(s): Packt Publishing
ISBN: 9781788299572

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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.

    • In Detail

    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

    Table of contents

    1. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    2. Getting Started with Angular and PrimeNG
      1. TypeScript fundamentals
        1. Basic types
        2. Interfaces, classes, and enums
        3. Functions
        4. Generics
        5. Modules
      2. Advanced types, decorators, and compiler options
        1. Union types and type aliases
        2. Type inference
        3. Decorators
        4. Type definition files
        5. Compiler options
      3. Angular cheat sheet - overview of key concepts
        1. Components, services, and dependency injection
        2. Templates and bindings
        3. Built-in directives
        4. Communication between components
        5. Forms
        6. Routing
      4. Angular modularity and lifecycle hooks
        1. Modules and bootstrapping
        2. Lifecycle hooks
      5. Running PrimeNG with SystemJS
        1. The SystemJS configuration for Angular
        2. Adding PrimeNG dependencies
      6. Setting up PrimeNG project with Webpack
        1. Entry point and output
        2. Loaders and plugins
        3. Adding PrimeNG, CSS, and SASS
      7. Setting up PrimeNG project with Angular CLI
        1. Generating scaffolding
        2. Adding PrimeNG dependencies
      8. Summary
    3. Theming Concepts and Layouts
      1. Understanding structural and skinning CSS
      2. Organizing your project structure with Sass
      3. Simple ways to create a new theme
        1. ThemeRoller approach
        2. The Sass approach
      4. The responsive grid system in PrimeNG
        1. Basic principles
        2. Nested columns
        3. Responsive and fluid layout
      5. Bootstrap flexbox layout meets PrimeNG
      6. Summary
    4. Enhanced Inputs and Selects
      1. Formatted input with InputMask
        1. Mask format options
        2. Using the slot character
        3. Making a part of the mask optional
      2. Autosuggestion with AutoComplete
        1. Multiple selection
        2. Working with objects
        3. Advanced features - the customized content displays
      3. Entering multiple values with Chips
        1. Display complex information using template
      4. Discovering checkbox - boolean, many, and TriState
        1. Boolean checkbox - single selection
        2. Checkbox multiple selection
        3. Multistate representation - TriStateCheckbox
      5. Choosing items with single and MultiSelect components
        1. Customized Dropdown
        2. The MultiSelect dropdown
      6. Basic and advanced Calendar scenarios
        1. Localization
        2. Time picker options
        3. Advanced features
      7. Spinner and Slider – different ways to provide input
        1. Advanced features - going beyond basic usage
        2. Slider
        3. Advanced features - going beyond basic usage
      8. Text editing with rich editors
        1. The customized editor
      9. Password and star-based rating inputs
        1. Rating input
      10. Validation with the input and select components
      11. Summary
    5. Button and Panel Components
      1. Enhanced Button, RadioButton, and SplitButton
        1. Button
          1. Icons and severity
        2. RadioButton
        3. SplitButton
          1. Icons and theming
      2. Selecting a value with ToggleButton and SelectButton
        1. SelectButton
      3. Grouping buttons with Toolbar
      4. Arranging your view with Panels and FieldSets
        1. Panel
        2. FieldSet
      5. Vertical stacked panels with Accordion
      6. Grouping content with tabs in TabView
      7. Summary
    6. Data Iteration Components
      1. Multi feature DataTable
        1. Change detection
        2. Dynamic columns
      2. Selecting rows in DataTable
        1. Single selection
        2. Multiple selection
        3. RadioButton selection
        4. Checkbox selection
      3. Sorting, filtering, and paginating data in DataTable
        1. Sorting
        2. Filtering
        3. Pagination
      4. Customizing the cell content with templating
      5. Resizing, reordering, and toggling columns in DataTable
        1. Resizing
        2. Reordering
        3. Toggling
      6. In-cell editing with DataTable
      7. Making DataTable responsive
      8. Using column and row grouping
        1. Column grouping
        2. Row grouping
          1. Expandable row groups
          2. Sub-headers
          3. RowSpan groups
      9. Handling tons of data with lazy DataTable
      10. Row expansion by providing a row template
      11. Exporting data in CSV format
      12. DataTable events and methods
      13. Listing data with DataList
        1. Facets and pagination
        2. Lazy loading
        3. Events
      14. Listing data with PickList
      15. Listing data with OrderList
      16. Grid-organized data with DataGrid
        1. Beyond basic usage - advanced features
      17. On-demand data loading with DataScroller
        1. Lazy loading
      18. Visualizing data with Tree
        1. Selection features - single, multiple, and checkbox
        2. Beyond basic usage - advanced features
      19. Visualizing data with TreeTable
        1. Selection features - single, multiple, and checkbox
        2. Beyond basic usage - advanced features
      20. Managing events with Schedule
        1. Header customization
        2. Beyond basic usage - advanced features
        3. Events and methods
      21. Summary
    7. Amazing Overlays and Messages
      1. Displaying content in the popup mode
        1. Dialog
          1. Usability features
          2. Customized header and footer
        2. ConfirmDialog
          1. Customization
      2. Multipurpose scenarios with OverlayPanel
        1. Integration with other components
        2. Closable properties
      3. Displaying content in Lightbox
        1. Custom content mode
          1. Transition effects
      4. Notifying users with Messages and Growl
        1. Growl - another way of notifying information
          1. Sticky behavior
      5. Tooltips for form components
      6. Summary
    8. Endless Menu Variations
      1. Creating programmatic menus using the MenuModel API
        1. Menu actions
      2. Statically and dynamically positioned menus
      3. Accessing commands via MenuBar
      4. ContextMenu with nested items
        1. Customized target for ContextMenu
        2. DataTable integration
      5. SlideMenu – menu in the iPod style
      6. TieredMenu – sub-menus in nested overlays
      7. MegaMenu – the multicolumn menu
      8. PanelMenu – hybrid of Accordion and Tree
      9. TabMenu - menu items as tabs
      10. Breadcrumb – providing contextual information about the page hierarchy
      11. Summary
    9. Creating Charts and Maps
      1. Working with the chart model
        1. Chart types
        2. Customization
        3. Events
      2. Data representation with line and bar charts
      3. Data representation with pie and doughnut charts
      4. Data representation with radar and polar area charts
      5. Drawing an organization chart for the relationship hierarchy
        1. Hierarchical data with zero configuration
        2. Advanced customization
        3. Selection and events
      6. Basic integration with the Google Maps API
      7. Various use cases with the GMap component
        1. Overlays
        2. Events
      8. Summary
    10. Miscellaneous Use Cases and Best Practices
      1. File uploading in all its glory
        1. Basic, multiple, and automatic file uploading
        2. Restrictions by file types and size
        3. Customizations
      2. Learning draggable and droppable directives
        1. Draggable
        2. Droppable
      3. Displaying a collection of images with Galleria
        1. Get it up and running
        2. Auto play mode and effects
        3. Events
      4. CRUD sample implementation with DataTable
      5. Deferring mechanism to optimize page loading
      6. Blocking page pieces during long-running AJAX calls
      7. Process status indicator in action
      8. Selecting colors with ColorPicker
      9. Displaying confirmation dialog with guarded routes
      10. Implementing a custom wizard component with Steps
      11. Introduction to state management with @ngrx/store
        1. Redux principles
        2. CRUD application with @ngrx/store
      12. Summary
    11. Creating Robust Applications
      1. Setting up unit testing with Jasmine and Karma
        1. Brief introduction to Jasmine
        2. Testing setup with Webpack and Karma
      2. Unit testing of components and services
        1. Angular testing utilities
        2. Testing a component
        3. Testing a service
      3. Tips on how to speed up unit testing
      4. Setting up the e2e test environment with Protractor
        1. Installing and configuring Protractor
      5. Writing automated UI tests at a glance
        1. Browser object, element, and locators
        2. Clean architecture with Page Objects
        3. Writing complete the e2e test
      6. Exploring a PrimeNG application with Augury and ng.probe
        1. Augury in action
        2. Debugging with ng.probe
      7. Summary

    Product information

    • Title: Angular UI Development with PrimeNG
    • Author(s): Sudheer Jonna, Oleg Varaksin
    • Release date: July 2017
    • Publisher(s): Packt Publishing
    • ISBN: 9781788299572