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)

Lifecycle hooks

Angular components come with lifecycle hooks, which get executed at specific times in the component's life. For this purpose, Angular offers different interfaces. Each interface has a method of the same name as the interface name with the prefix ng. Each method is executed when the corresponding lifecycle event occurs. They are also called lifecycle hook methods. Angular calls the lifecycle hook methods in the following sequence after the constructor has been called:

The lifecycle hook method Purpose and timing
ngOnChanges This is called whenever one or more data-bound input properties change. This method is called on initial changes (before ngOnInit) and any other subsequent changes. This method has one parameter--an object with keys of type string and values of type SimpleChange. The keys are the component's property names. The SimpleChange object contains current and previous values. A usage example is shown next.
ngOnInit This is called once, after the first ngOnChanges. Note that the constructor of a component should only be used for dependency injection because data-bound input values are not yet set in the constructor. Everything else should be moved to the ngOnInit hook. A usage example is shown next.
ngDoCheck This is called during every change detection run. It is a good place for custom logic, which allows us to do a fine-grained check of which property on our object changed.
ngAfterContentInit This is called once, after Angular puts external content into the component's view. A placeholder for any external content is marked with the ngContent directive (the ng-content tag). A usage example of the ngContent directive is demonstrated afterwards.
ngAfterContentChecked This is called after Angular checks the content put into the component's view.
ngAfterViewInit This is called once, after Angular initializes the component's and child's views.
ngAfterViewChecked This is called after Angular checks the component's views and child views.
ngOnDestroy This is called just before Angular destroys the component's instance. This happens when you remove the component with built-in structural directives such as ngIf, ngFor, ngSwitch, or when you navigate to another view. This is a good place for cleanup operations such as unsubscribing observables, detaching event handlers, canceling interval timers, and so on.

 

Let's see an example of how to use ngOnInit and ngOnChanges:

import {Component, OnInit, OnChanges, SimpleChange} from '@angular/core';

@Component({
selector: 'greeting-component',
template: `<h1>Hello {{text}}</h1>`
})
export class GreetingComponent implements OnInit, OnChanges {
@Input text: string;

constructor() { }

ngOnInit() {
text = "Angular";
}

ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
console.log(changes.text);
// changes = {'text': {currentValue: 'World', previousValue: {}}}
// changes = {'text': {currentValue: 'Angular',
previousValue: 'World'}}
}
}

Usage in HTML:

<greeting-component [text]="World"></greeting-component>

Let's now see how to use the ngContent directive:

export @Component({
selector: 'greeting-component',
template: `<div><ng-content></ng-content> {{text}}</div>`
})
class GreetingComponent {
@Input text: string;
}

Usage in HTML:

<greeting-component [text]="World"><b>Hello</b></greeting-component>

After the component's initialization, the following hook methods get always executed on every change detection run: ngDoCheck -> ngAfterContentChecked -> ngAfterViewChecked -> ngOnChanges.