Angular 2 Cookbook

Configuring mutual parent-child awareness with ContentChild and forwardRef

The companion to Angular's ViewChild is ContentChild. It performs a similar duty; it retrieves a reference to the target child component and makes it available as a member of the parent component instance. The difference is that ContentChild retrieves the markup that exists inside the parent component's selector tags, whereas ViewChild retrieves the markup that exists inside the parent component's view.

The difference is best demonstrated by a comparison of behavior, so this recipe will convert the example from Configuring Mutual Parent-Child Awareness with ViewChild and forwardRef to use ContentChild instead.

Note

The code, links, and a live example of this are available ...