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)

Interfaces, classes, and enums

An interface is a way to take a particular structure/shape and give it a name so that we can reference it later as a type. It defines a contract within our code. Interfaces begin with the keyword interface. Let's take an example:

interface Person {
name: string
children?: number
isMarried(): boolean
(): void
}

The specified interface Person has the following:

  • The name property of type string.
  • The optional property children of type number. Optional properties are denoted by a question mark and can be omitted.
  • The isMarried method that returns a boolean value.
  • Anonymous (unnamed) method that returns nothing.

Typescript allows you to use the syntax [index: type] to specify a string or number type based collection of key/value pairs. Interfaces perfectly fit such data structures. For example, consider the following syntax:

interface Dictionary {
[index: number]: string
}
An interface is only used by TypeScript compiler at compile time, and is then removed. Interfaces don't end up in the final JavaScript output. General, no types appear in the output. You can see that in the TypeScript playground mentioned earlier.

Beside interfaces, there are classes that describe objects. A class acts as a template for instantiating specific objects. The syntax for TypeScript's classes is almost identical to that of native classes in ECMAScript 2015 with some handy additions. In TypeScript, you can use public, private, protected, and readonly access modifiers:

class Dog {
private name: string; // can only be accessed within this class
readonly owner: string = "Max"; // can not be modified
constructor(name: string) {this.name = name;}
protected sayBark() { }
}

let dog = new Dog("Sam");
dog.sayBark(); // compiler error because method 'sayBark' is protected and
// only accessible within class 'Dog' and its subclasses.

Members with omitted modifiers are public by default. If a property or method is declared with the static keyword, there is no need to create an instance to access them.

A class can be abstract, that means, it may not be instantiated directly. Abstract classes begin with the keyword abstract. A class can implement an interface as well as extend another class. We can achieve that using the implements and extends keywords, respectively. If a class implements some interface, it must adopt all properties from this interface; otherwise, you will get an error about missing properties:

interface Animal {
name: string;
}

class Dog implements Animal {
name: string;
// do specific things
}

class Sheepdog extends Dog {
// do specific things
}
Derived classes that contain constructor functions must call super(). The super() call executes the constructor function on the base class.

It is possible to declare a constructor parameter with a modifier. As result, a member will be created and initialized in one place:

class Dog {
constructor(private name: string) { }

// you can now access the property name by this.name
}
This shortened syntax is often used in Angular when we inject services into components. Angular's services are normally declared in the component's constructor with the private modifier.

The last basic type to be mentioned here is enum. Enums allow us to define a set of named constants. Enum members have numeric values associated with them (started with 0):

enum Color {
Red,
Green,
Blue
}

var color = Color.Red; // color has value 0