You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Dec 4, 2017. It is now read-only.
`AdDirective` injects `ViewContainerRef` to gain access to the view container of the element that will become the host of the dynamically added component.
47
-
58
+
`AdDirective` injects `ViewContainerRef` to gain access to the view
59
+
container of the element that will host the dynamically added component.
60
+
61
+
In the `@Directive` decorator, notice the selector name, `ad-host`;
62
+
that's what you use to apply the directive to the element.
63
+
The next section shows you how.
64
+
48
65
.l-main-section
49
66
<aid="loading-components"></a>
50
67
:marked
51
68
## Loading components
52
69
53
-
The next step is to implement the ad banner. Most of the implementation is in `AdBannerComponent`.
70
+
Most of the ad banner implementation is in `ad-banner.component.ts`.
71
+
To keep things simple in this example, the HTML is in the `@Component`
72
+
decorator's `template` property as a template string.
54
73
55
-
We start by adding a `template` element with the `AdDirective` directive applied.
74
+
The `<ng-template>` element is where you apply the directive you just made.
75
+
To apply the `AdDirective`, recall the selector from `ad.directive.ts`,
76
+
`ad-host`. Apply that to `<ng-template>` without the square brackets. Now Angular knows
The `loadComponent()` method is doing a lot of the heavy lifting here.
106
+
Take it step by step. First, it picks an ad.
107
+
108
+
.l-sub-section
109
+
:marked
110
+
**How _loadComponent()_ chooses an ad**
111
+
112
+
The `loadComponent()` method chooses an ad using some math.
113
+
114
+
First, it sets the `currentAddIndex` by taking whatever it
115
+
currently is plus one, dividing that by the length of the `AdItem` array, and
116
+
using the _remainder_ as the new `currentAddIndex` value. Then, it uses that
117
+
value to select an `adItem` from the array.
77
118
78
119
:marked
79
-
### Resolving Components
120
+
After `loadComponent()` selects an ad, it uses `ComponentFactoryResolver`
121
+
to resolve a `ComponentFactory` for each specific component.
122
+
The `ComponentFactory` then creates an instance of each component.
123
+
124
+
Next, you're targeting the `viewContainerRef` that
125
+
exists on this specific instance of the component. How do you know it's
126
+
this specific instance? Because it's referring to `adHost` and `adHost` is the
127
+
directive you set up earlier to tell Angular where to insert dynamic components.
80
128
81
-
`AdBanner` takes an array of `AdItem` objects as input. `AdItem` objects specify the type of component to load and any data to bind to the component.
129
+
As you may recall, `AdDirective` injects `ViewContainerRef` into its constructor.
130
+
This is how the directive accesses the element that you want to use to host the dynamic component.
82
131
83
-
The ad components making up the ad campaign are returned from `AdService`.
84
-
85
-
Passing an array of components to `AdBannerComponent` allows for a dynamic list of ads without static elements in the template.
132
+
To add the component to the template, you call `createComponent()` on `ViewContainerRef`.
86
133
87
-
`AdBannerComponent` cycles through the array of `AdItems` and loads the corresponding components on an interval. Every 3 seconds a new component is loaded.
134
+
The `createComponent()` method returns a reference to the loaded component.
135
+
Use that reference to interact with the component by assigning to its properties or calling its methods.
88
136
89
-
`ComponentFactoryResolver` is used to resolve a `ComponentFactory` for each specific component. The component factory is need to create an instance of the component.
137
+
a#selector-references
138
+
:marked
139
+
#### Selector references
90
140
91
-
`ComponentFactories` are generated by the Angular compiler.
92
-
93
-
Generally the compiler will generate a component factory for any component referenced in a template.
94
-
95
-
With dynamically loaded components there are no selector references in the templates since components are loaded at runtime. In order to ensure that the compiler will still generate a factory, dynamically loaded components have to be added to their `NgModule`'s `entryComponents` array.
141
+
Generally, the Angular compiler generates a `ComponentFactory`
142
+
for any component referenced in a template. However, there are
143
+
no selector references in the templates for
144
+
dynamically loaded components since they load at runtime.
96
145
146
+
To ensure that the compiler still generates a factory,
147
+
add dynamically loaded components to the `NgModule`'s `entryComponents` array:
Components are added to the template by calling `createComponent` on the `ViewContainerRef` reference.
101
-
102
-
`createComponent` returns a reference to the loaded component. The component reference can be used to pass input data or call methods to interact with the component.
152
+
### A common _AdComponent_ interface
103
153
104
-
In the Ad banner, all components implement a common `AdComponent` interface to standardize the api for passing data to the components.
154
+
In the ad banner, all components implement a common `AdComponent` interface to
155
+
standardize the API for passing data to the components.
105
156
106
-
Two sample components and the `AdComponent` interface are shown below:
157
+
Here are two sample components and the `AdComponent` interface for reference:
0 commit comments