Angular UI Development with PrimeNG: Build rich UI for Angular applications using PrimeNG

✍ Scribed by Jonna, Sudheer;Varaksin, Oleg

• Publisher: Packt Publishing
• Year: 2017
• Tongue: English
• Leaves: 375
• Category: Library

✦ Synopsis

Cover ; Copyright; Credits; Foreword; About the Authors; About the Reviewer; www.PacktPub.com; Customer Feedback; Table of Contents; Preface; Chapter 1: 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.;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.

✦ Table of Contents

Cover......Page 1
Copyright......Page 3
Credits......Page 4
Foreword......Page 5
About the Authors......Page 6
About the Reviewer......Page 7
www.PacktPub.com......Page 8
Customer Feedback......Page 9
Table of Contents......Page 10
Preface......Page 17
Chapter 1: Getting Started with Angular and PrimeNG......Page 24
TypeScript fundamentals......Page 25
Basic types......Page 26
Interfaces, classes, and enums......Page 28
Functions......Page 31
Generics......Page 32
Modules......Page 33
Union types and type aliases......Page 34
Type inference......Page 35
Decorators......Page 36
Type definition files......Page 38
Compiler options......Page 39
Angular cheat sheet - overview of key concepts......Page 41
Components, services, and dependency injection......Page 42
Templates and bindings......Page 43
Built-in directives......Page 45
Communication between components......Page 47
Forms......Page 50
Routing......Page 51
Modules and bootstrapping......Page 54
Lifecycle hooks......Page 57
Running PrimeNG with SystemJS......Page 59
The SystemJS configuration for Angular......Page 60
Adding PrimeNG dependencies......Page 62
Entry point and output......Page 66
Loaders and plugins......Page 67
Adding PrimeNG, CSS, and SASS......Page 69
Setting up PrimeNG project with Angular CLI......Page 71
Generating scaffolding......Page 72
Adding PrimeNG dependencies......Page 73
Summary......Page 74
Chapter 2: Theming Concepts and Layouts......Page 76
Understanding structural and skinning CSS......Page 77
Organizing your project structure with Sass......Page 80
Simple ways to create a new theme......Page 86
ThemeRoller approach......Page 87
The Sass approach......Page 88
The responsive grid system in PrimeNG......Page 91
Basic principles......Page 92
Nested columns......Page 93
Responsive and fluid layout......Page 94
Bootstrap flexbox layout meets PrimeNG......Page 97
Summary......Page 102
Chapter 3: Enhanced Inputs and Selects......Page 104
Formatted input with InputMask......Page 105
Mask format options......Page 106
Making a part of the mask optional......Page 107
Autosuggestion with AutoComplete......Page 108
Working with objects......Page 109
Advanced features - the customized content displays......Page 110
Entering multiple values with Chips......Page 111
Display complex information using template......Page 112
Boolean checkbox - single selection......Page 113
Checkbox multiple selection......Page 114
Multistate representation - TriStateCheckbox......Page 115
Choosing items with single and MultiSelect components......Page 116
Customized Dropdown......Page 117
The MultiSelect dropdown......Page 118
Basic and advanced Calendar scenarios......Page 119
Localization......Page 121
Time picker options......Page 122
Spinner and Slider – different ways to provide input......Page 123
Advanced features - going beyond basic usage......Page 124
Advanced features - going beyond basic usage......Page 125
Text editing with rich editors......Page 127
The customized editor......Page 128
Rating input......Page 129
Validation with the input and select components......Page 131
Summary......Page 133
Enhanced Button, RadioButton, and SplitButton......Page 134
Icons and severity......Page 135
RadioButton......Page 137
SplitButton......Page 138
Icons and theming......Page 139
Selecting a value with ToggleButton and SelectButton......Page 140
SelectButton......Page 141
Grouping buttons with Toolbar......Page 142
Panel......Page 143
FieldSet......Page 144
Vertical stacked panels with Accordion......Page 145
Grouping content with tabs in TabView......Page 148
Summary......Page 150
Chapter 5: Data Iteration Components......Page 152
Multi feature DataTable......Page 153
Dynamic columns......Page 155
Single selection......Page 156
Multiple selection......Page 157
RadioButton selection......Page 159
Checkbox selection......Page 160
Sorting......Page 161
Filtering......Page 162
Pagination......Page 164
Customizing the cell content with templating......Page 166
Resizing, reordering, and toggling columns in DataTable......Page 167
Resizing......Page 168
Reordering......Page 169
In-cell editing with DataTable......Page 170
Making DataTable responsive......Page 171
Column grouping......Page 173
Row grouping......Page 174
Expandable row groups......Page 175
Sub-headers......Page 177
RowSpan groups......Page 178
Handling tons of data with lazy DataTable......Page 180
Row expansion by providing a row template......Page 182
Exporting data in CSV format......Page 184
DataTable events and methods......Page 185
Listing data with DataList......Page 188
Facets and pagination......Page 190
Lazy loading......Page 192
Listing data with PickList......Page 193
Listing data with OrderList......Page 196
Grid-organized data with DataGrid......Page 199
Beyond basic usage - advanced features......Page 201
On-demand data loading with DataScroller......Page 203
Lazy loading......Page 205
Visualizing data with Tree......Page 206
Selection features - single, multiple, and checkbox......Page 209
Beyond basic usage - advanced features......Page 211
Visualizing data with TreeTable......Page 214
Selection features - single, multiple, and checkbox......Page 216
Beyond basic usage - advanced features......Page 217
Managing events with Schedule......Page 220
Header customization......Page 222
Beyond basic usage - advanced features......Page 223
Events and methods......Page 224
Summary......Page 226
Displaying content in the popup mode......Page 227
Usability features......Page 228
Customized header and footer......Page 229
ConfirmDialog......Page 230
Customization......Page 231
Multipurpose scenarios with OverlayPanel......Page 232
Closable properties......Page 234
Displaying content in Lightbox......Page 235
Custom content mode......Page 236
Notifying users with Messages and Growl......Page 237
Growl - another way of notifying information......Page 238
Tooltips for form components......Page 239
Summary......Page 241
Chapter 7: Endless Menu Variations......Page 242
Creating programmatic menus using the MenuModel API......Page 243
Statically and dynamically positioned menus......Page 244
Accessing commands via MenuBar......Page 246
ContextMenu with nested items......Page 247
DataTable integration......Page 249
SlideMenu – menu in the iPod style......Page 250
TieredMenu – sub-menus in nested overlays......Page 252
MegaMenu – the multicolumn menu......Page 254
PanelMenu – hybrid of Accordion and Tree......Page 256
TabMenu - menu items as tabs......Page 257
Breadcrumb – providing contextual information about the page hierarchy......Page 258
Summary......Page 260
Working with the chart model......Page 261
Chart types......Page 262
Customization......Page 263
Data representation with line and bar charts......Page 265
Data representation with pie and doughnut charts......Page 268
Data representation with radar and polar area charts......Page 271
Hierarchical data with zero configuration......Page 274
Advanced customization......Page 275
Selection and events......Page 277
Basic integration with the Google Maps API......Page 280
Overlays......Page 281
Events......Page 283
Summary......Page 287
Chapter 9: Miscellaneous Use Cases and Best Practices......Page 288
Basic, multiple, and automatic file uploading......Page 289
Restrictions by file types and size......Page 291
Customizations......Page 292
Learning draggable and droppable directives......Page 296
Draggable......Page 297
Droppable......Page 299
Get it up and running......Page 301
Auto play mode and effects......Page 302
Events......Page 303
CRUD sample implementation with DataTable......Page 304
Deferring mechanism to optimize page loading......Page 311
Blocking page pieces during long-running AJAX calls......Page 312
Process status indicator in action......Page 315
Selecting colors with ColorPicker......Page 316
Displaying confirmation dialog with guarded routes......Page 317
Implementing a custom wizard component with Steps......Page 321
Introduction to state management with @ngrx/store......Page 327
Redux principles......Page 328
CRUD application with @ngrx/store......Page 329
Summary......Page 334
Chapter 10: Creating Robust Applications......Page 335
Brief introduction to Jasmine......Page 336
Testing setup with Webpack and Karma......Page 338
Unit testing of components and services......Page 341
Angular testing utilities......Page 342
Testing a component......Page 343
Testing a service......Page 346
Tips on how to speed up unit testing......Page 348
Installing and configuring Protractor......Page 350
Browser object, element, and locators......Page 354
Clean architecture with Page Objects......Page 356
Writing complete the e2e test......Page 358
Exploring a PrimeNG application with Augury and ng.probe......Page 361
Augury in action......Page 362
Debugging with ng.probe......Page 365
Summary......Page 368
Index......Page 369