The blog intends to illustrate the way how the components can be loaded dynamically in Angular. In this internet world, data is generated in huge volumes every minute, static development is no more sufficient to satisfy today needs.

In terms of front end perspective, one cannot develop applications that can adapt to all the data sources. There are a variety of data, and each needs its own style of presentation. If this is the case, think of developing separately and placing the components in the container page might not be the best solution.

Handling this use case in Angular is straightforward since Angular provides API for dynamic component loading.

Two important classes:

• ComponentFactoryResolver
• ComponentFactory

ComponentFactoryResolver provides the factory for the given component, and with the factory’s create method, the component can be created dynamically.

Let’s walk through an example that shows creating dynamic components with different data. We will use sample news articles and create dynamic components for each section.

In this example, we look into two components – NewsContainerComponent and NewsDetailsComponent. NewsContainerComponent is the container that holds the links for all the news articles, and also the dynamic NewsDetailsComponent is placed here.

#angular development #angular #newscontainercomponent #newsdetailscomponent