3e0e6ed60f
With #51148, the `ngComponentOutlet` directive now supports inputs. This allows a less verbose and simpler API to instantiate components dynamicaly. Fixes #49875 PR Close #49915
2.7 KiB
Dynamic component loader
Component templates are not always fixed. An application might need to load new components at runtime. This cookbook shows you how to add components dynamically.
See the of the code in this cookbook.
Rendering components dynamically
The following example shows how to build a dynamic ad banner.
The hero agency is planning an ad campaign with several different ads cycling through the banner. New ad components are added frequently by several different teams. This makes it impractical to use a template with a static component structure.
Instead, you need a way to load a new component without a fixed reference to the component in the ad banner's template.
The NgComponentOutlet directive can be used to instantiate components and insert them into the current view. This directive allows you to provide a component class that should be rendered, as well as component inputs to be used during initialization.
The AdBannerComponent class injects the AdService service and requests a list of ads.
The "current ad" index is set to 0 initially to indicate that the first ad should be displayed.
When a user clicks the "Next" button, the index is increased by one.
Once the index reaches the length of the ads array, the index is reset back to 0.
In the template, the currentAd getter is used to retrieve a current ad.
If the value changes, Angular picks it up and reflects the changes in the UI.
Different components from the service
Components returned from the AdService service and used in NgComponentOutlet in the AdBannerComponent template can be different.
Angular detects if a component class has changed and updates the UI accordingly.
Here are two sample components and the service providing them with their inputs:
Final ad banner
The final ad banner looks like this:
See the .
@reviewed 2023-04-18