ViewChildren and ContentChildren in Angular – Minko Gechev’s blog
- We can use the component in the following way:
Well, this is basically an XML, so between the opening and closing tags of the element we can put some content:
Now lets switch back to the component’s definition for a second.
- On the other hand, **elements which are used between the opening and closing tags of the host element of a given component are called *content children **.
- This means that and could be considered view children of , and (if it is defined as Angular component or directive) could be considered as a content child.
- It’s value can be either , if Angular haven’t found such child, or a reference to the instance of the component’s controller (in this case, reference to an instance of the class).
- If such private dependencies are registered with and the user passes content children to any of the components exported by the public API of your library, she will get access to them.
In this article I’m going to explain the difference between the concepts of view children and content children in Angular. We will take a look at how we can pass access these two different kinds of children from their parent component. Along the content we are also going to mention what the difference between the properties providers and viewProviders of the @Component decorator is.
@mgechev: ViewChildren and ContentChildren in Angular
You can find the source code of the current article at my GitHub account. So lets our journey begin!
First of all, lets clarify the relation between the component and directive concepts in Angular. A typical design pattern for developing user interface is the composite pattern. It allows us to compose different primitives and treat them the same way as a single instance. In the world of functional programming we can compose functions. For instance:
In user interface we can apply composition in a similar way. We can think of the individual component as functions. These functions can be composed together in order and as result we get more complex functions.
We can illustrate this graphically by the following structural diagram:
In the figure above we have two elements:
This means that using the preceding abstractions we can build structures of the following form:
On the figure above we can see a hierarchical structure of components and directives. The leaf elements on the diagram are either directives or components that don’t hold references to other directives.
Now, in order to be more specific, lets switch to the context of Angular.
In order to better illustrate the concepts we are going to explore, lets build a simple application:
which has an inline template, and defines a set of directives that it or any of its child components is going to use.
We can use the component in the following way:
element we can put some content:
will be projected at the bottom of the rendered todo component.
There are two more components which are not interesting for our discussion so we are going to omit their implementation. Once completeld our application will look as follows:
And yes, it was that easy! Now we are ready to define what the concepts of view children and content children are. *The children element which are located inside of its template of a component are called *view children *. On the other hand, **elements which are used between the opening and closing tags of the host element of a given component are called *content children **.
(if it is defined as Angular component or directive) could be considered as a content child.
Now comes the interesting part! Lets see how we can access and manipulate these two types of children!
. We can use them the following way:
property. For further information click here.
. We can access it in the following way:
is (if you’re not familiar with the dependency injection mechanism of Angular, you can take a look at my book).
class holds all the todo items, which are entered in the current session.
is accessible from:
’s constructor we are going to get the following runtime error:
are accessible by the component itself and all of its view children.
, the providers will not be accessible from the outside.
In this article we took a brief look at how we can compose components and directives. We also explained what the difference between content children and view children is, as well as, how we can access these two different kinds of children.
decorator. If you have further interest in the topic I recommend you the book I’m working on “Getting Started with Angular”.