Every Angular module has a declarations array in which you can register Angular components, directives, and pipes. In this guide, you will learn how to register a component, directive, or pipe with a declarations array and what it means to register these artifacts.

The @Component decorator needs information from the @NgModule decorator, which declares the components to generate component definition. The selector of a component is determined through the module that declares the component and used during the compilation of the component’s template. For these reasons, global information about components is needed so that the same selector for components does not hamper the compilation of other modules’ components.

The Declarations Array

The declarations array is used to declare components, directives, and pipes into the module in which they belong. Every component, directive, and pipe gets to know about others through this declaration. Without this declaration, a component would not be able to use directives and pipes.

For example, say you have a component that renders a technical event on a website like pluralsight.com, and you want to render technical event names in upper case using a pipe called toUpper. This component will be able to use the pipe toUpper only if the pipe is declared in the declarations array. Similarly, a component will be able to use another component as its child component only if both the components are declared in the declarations array, and a component will be able to use a directive only when the directive is declared in the declarations array.

#angular