Return to site

ANGULAR INTERVIEW QUESTION: Can you explain how works the @NgModule decorator?

ยท ngInterview,fullstack

First, let's define what is an Angular Module:

๐€๐ง ๐€๐ง๐ ๐ฎ๐ฅ๐š๐ซ ๐ฆ๐จ๐๐ฎ๐ฅ๐ž ๐ ๐ซ๐จ๐ฎ๐ฉ๐ฌ ๐๐ข๐Ÿ๐Ÿ๐ž๐ซ๐ž๐ง๐ญ ๐ฉ๐ซ๐จ๐ฃ๐ž๐œ๐ญ๐ฌ ๐ข๐ญ๐ž๐ฆ๐ฌ ๐ฅ๐ข๐ค๐ž ๐œ๐จ๐ฆ๐ฉ๐จ๐ง๐ž๐ง๐ญ๐ฌ, ๐๐ข๐ซ๐ž๐œ๐ญ๐ข๐ฏ๐ž๐ฌ, ๐ฌ๐ž๐ซ๐ฏ๐ข๐œ๐ž๐ฌ, ๐ฉ๐ข๐ฉ๐ž๐ฌ ๐ญ๐จ ๐Ÿ๐ฎ๐ฅ๐ฅ๐Ÿ๐ข๐ฅ๐ฅ ๐š ๐ฌ๐ฉ๐ž๐œ๐ข๐Ÿ๐ข๐œ ๐ฉ๐ซ๐จ๐ฃ๐ž๐œ๐ญ ๐Ÿ๐ž๐š๐ญ๐ฎ๐ซ๐ž.

Technically, a module is a class bound to a decorator @NgModule, allowing to describe how the app items box ๐Ÿ“ฆ between themselves.

Below the code of a module class:

In "๐‘–๐‘š๐‘๐‘œ๐‘Ÿ๐‘ก๐‘ ": we put all the modules required by this module.

In "๐‘’๐‘ฅ๐‘๐‘œ๐‘Ÿ๐‘ก๐‘ ", we expose the items of this module so that other modules can import them.

In "๐‘‘๐‘’๐‘๐‘™๐‘Ž๐‘Ÿ๐‘Ž๐‘ก๐‘–๐‘œ๐‘›๐‘ ", we list all the elements of the module, you need to declare your items so that Angular recognizes it.

In "๐‘๐‘Ÿ๐‘œ๐‘ฃ๐‘–๐‘‘๐‘’๐‘Ÿ๐‘ ", we put the service to inject for that module.

In "๐‘๐‘œ๐‘œ๐‘ก๐‘ ๐‘ก๐‘Ÿ๐‘Ž๐‘", we put the component that is first loaded by the app; this property is only used for the "๐‘Ÿ๐‘œ๐‘œ๐‘ก" module "๐ด๐‘๐‘๐‘€๐‘œ๐‘‘๐‘ข๐‘™๐‘’.๐‘ก๐‘ "