A Comparative Study between Angular Material and PrimeNG, for Angular 7

International Journal of Science and Research (IJSR)

ISSN: 2319-7064

ResearchGate Impact Factor (2018): 0.28 | SJIF (2018): 7.426

Volume 8 Issue 6, June 2019

www.ijsr.net

Licensed Under Creative Commons Attribution CC BY

A Comparative Study between Angular Material

and PrimeNG, for Angular 7

Dr. Shivkumar Goel

, Gauri Surve

Deputy Head of Department, Department of Master of Computer Application

Vivekanand Educational Society's Institute of Technology Chembur, Mumbai, Maharashtra, India

Department of Master of Computer Application Vivekanand Educational Society's Institute of Technology Chembur, Mumbai,

Maharashtra, India

Abstract: The aim of this study is to compare two of the most popular UI (User Interface) component libraries available for Angular 7,

which is a very popular framework for web application development. Choosing a UI component library is necessary and can be difficult

given the surplus of choices for Angular 7, as it is not recommended to use more than one UI component library at a time in order to

avoid conflict in design patterns. The selection of a good UI component library will provide effortless performance of components in the

website with very little programming, predefined CSS (Cascading Style Sheets), and attractive themes for a better user experience. In

this paper, we will see the various aspects of these two UI component libraries. The comparison between the two will be done based on

various parameters that can help developers decide which UI component library will be better suited for different projects.

Keywords: UI (User Interface), Angular Material, PrimeNG, styling, PrimeTek Informatics, Google, npm (Node Package Man- ager), API

(Application Program Interface)

1. Introduction

We live in a world where everything has moved online,

including most businesses, transactions, and services. People

from any part of the world access these businesses through

their websites. These applications can help grow businesses

tremendously. The website of a business is used to make the

customer realize the authenticity, mission, goals, and vision

of the business.

Such web applications have become the strategic fronts for

businesses; hence, they need to be planned well. Web

applications have become an indispensable part of

businesses. Hence, their development requires a vast

understanding of evolving technologies and frameworks.

Angular 7 is one such web development framework that is

very popular. Angular 7 has many more features compared

to it’s predecessor, Angular 6. CLI (Command-line

interface) prompts, better performance, Ivy progress,

Angular elements, Angular compiler, better and updated

documentation, and most importantly Angular’s own UI

component library, Angular Material.

1.1 Introduction to Angular Material

Angular Material is a UI component library that is created

by the developers of Angular 7, that is, Google. It’s ultimate

goal and function is to create attractive, functional, and easy

to use UI components. It is used to create beautiful and

modern web designs that are responsive and degrade

gracefully. Angular Material takes inspiration from Google

Material Design. Angular Material promotes a very

minimal, simplistic, and flat design [5].

1.2 Introduction to PrimeNG

PrimeNG is a UI component library that is created by

PrimeTek Informatics. PrimeTek Informatics is a vendor

with a lot of expertise and experience in developing open

source UI solutions. It is like a sibling to the PrimeFaces UI

component library. The Widgets contained within the library

are open-source, therefore are free to use under the MIT

licence. This library not only provides multiple free themes,

but also a plethora of premium themes available with a lot

more UI variations available for a price on their official

website.

Figure 1: Number of downloads for both library packages

from 24

February, 2019 to 12

May, 2019 [6]

2. Usage and Popularity

As we know, Angular Material and PrimeNG are both

available on the official website of npm (Node Package

Manager) and can be installed by running a simple install

command. The number of times an application is

downloaded via npm is tracked. We can view the

statistical data pertaining these two libraries on the official

Paper ID: ART20199024

10.21275/ART20199024

1910

International Journal of Science and Research (IJSR)

ISSN: 2319-7064

ResearchGate Impact Factor (2018): 0.28 | SJIF (2018): 7.426

Volume 8 Issue 6, June 2019

www.ijsr.net

Licensed Under Creative Commons Attribution CC BY

website of npm trends.

Fig. 1 displays a graphical representation of the number of

downloads of both packages from npm, using the website for

npm trends. The data for this website comes from npm’s api

(application program interface) called download counts. The

details of packages are obtained from the npms.io API.

Table 1: Statistics for Angular Material and Primeng

Libraries Version Licence Open issues Pull requests

Angular Material 7.3.7 MIT 1510 275

PrimeNG 7.1.3 MIT 810 22

These statistics were recorded in May, 2019[7][8].

2.1 Usage and popularity of Angular Material

As we can clearly see in Fig. 1, according to npm trends,

Angular Material is preferred by more people, compared to

PrimeNG. This may be a result of the fact that Angular

Material is developed by the same team that developed

Angular 7. It may also be due to the simplistic and minimal

design of the library[5]. Angular Material is very easy to

use, and required minimal coding, which may attract

programmers that are beginners. On the other hand, Angular

Material has a high number of open issues, as shown in

Table 1, which is problematic if the developer wants to use

components for implementing complex functionality. In

contrast to PrimeNG, the numbers of pull requests are

several times higher. This could be interpreted as a plus, if

interpreted as: Angular Material has a larger community and

a major portion of the community is willing to make

contributions to the library’s development, it can also be

interpreted as a minus, if interpreted as: the library needing

multiple contributions on account of not having enough

functionality being provided to begin with.

2.2 Usage and popularity of PrimeNG

As we can interpret from Fig. 1, according to npm trends,

PrimeNG is less popular, compared to Angular Material.

This may be a result of the fact that PrimeNG can be a little

inefficient when it comes to the actual performance of the

components. This library majorly focuses on designing and a

beautiful appearance in the web application, as opposed to

simplicity and performance. A lot of variation in the

components allows users to build complex functionality

easily. This reflects in Table I, as there are lesser open issues

with this library. The numbers of pull requests are very low,

compared to those for Angular Material. One interesting

detail would be that PrimeNG only encourages pull requests

that help fix bugs or expose the community to newer

properties available in components, and discourages pull

requests for newer features in components.

2.3 Components

From Table II, we can determine the number of components

available without the varied grid component features, and

the variations in grid components in each library. The

numbers of components available in a library determine how

much functionality the developer can add to the web

application just by using the preexisting components in the

library, rather than having to program for them separately.

Of course, not just the number of components but, the

combination of effective functionality, and usability is

important in the components of the library in order to make

the library suitable for the appropriate project.

Table 2: Number of Components

Libraries

Components excluding

grid variations

Grid

variations

Total

components

Angular Material 32 3 35

PrimeNG 81 22 103

These statistics were recorded in May, 2019[3][4].

a) Components in Angular Material

As we can see in Table II, the number of components

available in Angular Material without grid variations are a

little above thirty. Although that number is not very low, in

contrast to that of PrimeNG, the number of components in

Angular Material seems insufficient. This may be an

inconvenience to developers that

are looking to add

components to implement complex features in the web

application. In these scenarios, the inadequacy of

components may hinder the development of functionality,

and the developer may have to explicitly add code for it,

ultimately increasing the resources required for the project.

In addition, adding extra features or modifications to a

preexisting component is very difficult, especially if the

developer is a beginner. However, modifying components is

easier in Angular Material than it is in any other library[10].

A developer needs to be at an expert level in order to add to

or customize these components. However, some would argue

that the components have a simpler implementation as a

result of Angular Material’s design that is very simplistic

and hence, be easier for a basic implementation.

b) Components in PrimeNG

Table II indicates that PrimeNG has components that are far

greater in number than those available in Angular Material.

This is due to PrimeTek Informatics, the creators of

PrimeNG, being very experienced at creating UI component

libraries such as siblings to PrimeNG, PrimeFaces that is

built for JSF, and PrimeReact that is built for React. Most

complex functionalities can be displayed well by using the

preexisting components in this library. This reduces the

resources required to develop complex functionalities. With

many components, the need for the proper documentation

arises. PrimeNG does not have adequate documentation for

all of it’s components and their variations. The developers

may have to figure a few features on their own.

2.4 Grid Component and It’s Variations

The grid can prove to be a critical component for web

applications that are created for the sole purpose of

displaying data and making it easier to access data in it’s raw

form as well as data as filtered by the user. Simply put, grids

improve the structure of data. There are various filters that

can be applied to data, like sorting in a specific order or

selecting records

a) The Grid Component in Angular Material

As we can see in Table II, Angular Material has only three

categories in grid variations, they are: table, pagination, and

sorting. These components are drastically lower compared to

Paper ID: ART20199024

10.21275/ART20199024

1911

International Journal of Science and Research (IJSR)

ISSN: 2319-7064

ResearchGate Impact Factor (2018): 0.28 | SJIF (2018): 7.426

Volume 8 Issue 6, June 2019

www.ijsr.net

Licensed Under Creative Commons Attribution CC BY

PrimeNG. These features are very limiting to what a data

table can display and how much the user can manipulate and

choose from the data being displayed. Another important

feature in a data table is its ability to export the given table

as an excel sheet, which is not available in Angular Material.

Other packages are available on npm that provide this

functionality, but that will also increase the dependencies in

the project, if the developer has to keep installing newer

packages instead of having it all available in the library.

Angular Material may be a poor choice if a web

application’s ultimate aim is to provide data to it’s users.

b) The Grid Component in PrimeNG

PrimeNG has a wide variety of options available when it

comes to variations in data table features. One interesting

feature is the data filter that allows the user to filter the data

in each column. These filters can be in form of input boxes,

dropdown lists, multiselects, calendars, etc. PrimeNG also

allows user to manipulate data in the table directly from the

web application, in the table. It allows row selections, where

the developer can set listeners to the selection event. These

selections can be for a single row or for multiple rows.

PrimeNG also allows the user to export the filtered and

unfiltered data. However, there is no way to add any styling

to to the data being exported including the font style, size,

and the width of created rows. Hence, may also need a

separate package to export data, depending upon the user’s

requirements.

c) Themes and Templates

A theme is an important aspect of a web application from a

user experience and design perspective. A theme makes sure

that the components and layouts in a web application do not

look or seem mundane. Templating data helps in

customizing content hence, is an important feature in

displaying data or components in a certain style. The way a

web application is styled can be a critical point in the users

acceptance. Pages that feel good, have a subtle style and

theme, encourage the users to interact more with the web

application, as opposed to mundane, flashy, or overcrowded

pages drive users away or irritate them. We can see the

statistics for themes available in each library in Table III.

Table 3: Number of Themes

Libraries Free Paid/Featured Total themes

Angular Material 4 0 4

PrimeNG 8 19 27

These statistics were recorded in May, 2019[3][4].

d) Themes and Templates in Angular Material

All the themes available in Angular Material are free.

However, they are still far less in number compared to the

themes PrimeNG offers in total. Even if we just compare the

themes available for free in both libraries, PrimeNG offers

double the number of themes compared to what Angular

Material offers.

e) Themes and Templates in PrimeNG

Most themes available in PrimeNG are available for featured

users only. However, it still offers quite a few free themes.

There is a considerable difference between the total number

of themes PrimeNG and Angular Material, which makes

PrimeNG more desirable from a user experience perspective.

In addition, PrimeNG also allows templating of data.

3. Conclusion

Using more than one UI component library in a web

application may create design pattern issues, which is why it

is avoided. This is what makes choosing the perfect UI

component library critical. There are many popular UI

component libraries, two of which are Angular Material and

PrimeNG. Different libraries suit different types of web

applications hence, the selection of one can be done based

on various parameters.

Angular Material was developed by the creators of Angular

7. It has a very simplistic design. The components work with

fluidity to them. This library is a little lacking when it comes

to variations in components and themes. The primary focus

of the library is performance and not themes or styles. It is

still the most widely downloaded library from npm. The

documentation provided is very effective and clarifying.

PrimeNG was developed by a more experienced UI

component development company. This library is full of

components and has a lot of variations in most of it’s

components. There are ample themes to choose from, free

and featured. This library can prove to be sufficient without

having to install any other libraries or packages. However,

the documentation is inadequate making it unfriendly to

users, especially beginners.

Both of these libraries have their own perks of selected for

the right we application. Angular Material can be selected

where performance is prioritized more than the overall look

and feel of the components, whereas PrimeNG can be

selected where themes,

styling, and varying functionality

implementation is preferred. Angular Material is user

friendly and can be used by beginners; it is also preferred by

a lot of experienced developers as it is highly customizable.

PrimeNG can be used by experienced developers that would

want to apply complex functionality with style, without

having to customize or code for most of it.

4. Acknowledgment

We would like to extend our gratitude to Vivekanand

Education Society’s Institute of Technology, for providing us

with all the necessary resources and support needed to

complete this study.

References

[1] https://www.synapseindia.com/web-application-

development-why-are-they- important/211

[2] https://www.angularminds.com/blog/article/top-10-

features-of-angular- 7.html

[3] https://angular.io/docs

[4]https://www.primefaces.org/primeng//

[4] https://www.tutorialspoint.com/angular material/angular

material overview.html

[5] https://www.npmtrends.com/@angular/material-vs-

primeng

[6] https://www.npmjs.com/package/primeng

Paper ID: ART20199024

10.21275/ART20199024

1912

International Journal of Science and Research (IJSR)

ISSN: 2319-7064

ResearchGate Impact Factor (2018): 0.28 | SJIF (2018): 7.426

Volume 8 Issue 6, June 2019

www.ijsr.net

Licensed Under Creative Commons Attribution CC BY

[8]https://www.npmjs.com/package/@angular/material

[7] https://medium.com/@preethi.s/why-should-you-choose-

primeng-for- angular-ui-components-ea5e918e582e

[8] https://medium.com/@centizennationwide/angular-

material-vs-prime-ng- f54a7255ec95

Paper ID: ART20199024

10.21275/ART20199024

1913