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.
Table of Contents (11 chapters)

Compiler options

Typically, the first step in a new TypeScript project is to add in a tsconfig.json file. This file defines the project and compiler settings, for instance, files and libraries to be included in the compilation, output structure, module code generation, and so on. A typical configuration in tsconfig.json for Angular 2+ projects looks like the following:

{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"noImplicitAny": true,
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"outDir": "dist",
"lib": ["es2015", "dom"]
},
"types": ["node"],
"exclude": ["node_modules", "dist"]
}

The listed compiler settings are described as follows. A full list of all options is available at the TypeScript documentation page (https://www.typescriptlang.org/docs/handbook/compiler-options.html).

Option Type Default Description
target string ES3 This specifies ECMAScript target version: ES3, ES5, ES2015, ES2016, and ES2017.
module string ES6 if target is "ES6" and CommonJS otherwise This specifies the format of module code generation: None, CommonJS, AMD, System, UMD, ES6, or ES2015.
moduleResolution string Classic if module is "AMD," System, ES6, and Node otherwise This determines how modules get resolved. Either Node for Node.js style resolution or Classic.
noImplicitAny boolean false This raises errors on expressions and declarations with an implied any type.
sourceMap boolean false This generates the corresponding .map file. This is useful if you want to debug original files.
emitDecoratorMetadata boolean false This emits design type metadata for decorated declarations in source. You have to set this value to true if you want to develop web applications with Angular.
experimentalDecorators boolean false This enables experimental support for ECMAScript decorators. You have to set this value to true if you want to develop web applications with Angular.
outDir string - This is the output directory for compiled files.
lib string[] Refer to the documentation for more information. This is the list of library files to be included in the compilation. Refer to the documentation for more information.
types string[] - This is the list of names of type definitions to include.
exclude string[] - This is the list of (sub) directories excluded from the compilation.
You can stop the compiler from emitting JavaScript on errors by setting the --noEmitOnError option to true.