Sharing Top Content from the Angular-sphere.

ViewChildren and ContentChildren in Angular · Minko Gechev’s blog

Understanding View Children and Content Children in Angular 👶📽

  • 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.

Articles about computer science, Angular, JavaScript, and compilers.

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 and of the decorator is.

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:

The Haskell code above we compose the functions and so that to each item n in the list will be applied the following sequence of operations -> -> .

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:

ViewChildren and ContentChildren in Angular · Minko Gechev’s blog