Using NgModules for declaring reusable components

With NgModules, we can achieve a good degree of encapsulation. By explicitly exporting the public components, directives, pipes, and services, we can hide some of the implementation details of our modules. This way, we can implement reusable modules and expose only their public interface, and we do not reveal any low-level components to the user of the module.

In order to get a better idea, let's take a look at the following example:

@Component(...)
class ZippyHeader {
  @Input() header: string;
}

@Component(...)
class Zippy {
  @Input() header: string;
  visible = true;
}

@Component(...)
class App {}

In the preceding snippet, we declare the Zippy, ZippyHeader, and App components. Zippy is a component that has a header and a content; we can toggle the visibility of the content by clicking on the header. In the ZippyHeader...