28 Working with component libraries

 

This chapter covers

  • Installing and using the Angular Material component library
  • Selecting component library features to use
  • Integrating component library features with existing functionality

Component libraries are packages that contain Angular components and directives, such as buttons, tables, and layouts. Throughout this book, I have been creating custom components and directives to demonstrate Angular features, but component libraries use these same features to provide building blocks that you can use to simplify the development process.

One of the recurring themes in this book is that nothing in Angular is magic, and this extends to component libraries, which are written using the same features that you used in earlier chapters. Component libraries are useful because they mean you don’t have to write code and templates for basic tasks, such as creating a button, for example, and can focus on dealing with what happens when the user clicks the button.

In this chapter, I use the Angular Material component library to add components to the project and explain how to use CSS to give a custom component an appearance that is consistent with the library components. Table 28.1 puts the use of component libraries in context.

Note

This chapter is not a detailed description of Angular Material or any other component library. There are several good component libraries available for Angular and each has its own set of features and API.

28.1 Preparing for this chapter

28.1.1 Removing buttons

28.1.2 Adjusting the HTML file

28.1.3 Running the project

28.2 Using the library components

28.2.1 Using the Angular Material button directive

28.2.2 Using the Angular Material table

28.3 Matching the component library theme

28.3.1 Creating the custom component

28.3.2 Using the Angular Material theme

28.3.3 Applying the ripple effect

28.4 Summary