Component: Timeline

Ng-template: ng-template directive represents an angular template that is used when we want to define any template and inject it into the DOM.

Ng-container: The Angular is a grouping element that doesn't interfere with styles or layout because Angular does not put it in the DOM.

NgTemplateOutlet: NgTemplateOutlet is a directive that takes a TemplateRef, context and stamps out an EmbeddedViewRef with the provided context.

We can make a recursive list using these three directives.

• Define template structure with template reference (#recursiveList) and define input variable called list with prefix let-.
• Define container with ngTemplateOutlet for recursive calling for child element.
• Define main container with ngTemplateOutlet for showing main template and pass the data which we will get from out type script component.

We are passing data using implicit context.

Implicit context: When angular creates template by calling createEmbeddedView it can also pass context that will be used inside ng-template. Using the key $implicit in the context object will set its value as default.

The data model for the list is a recursive list with the properties:

• Title - title of the item
• Checkmark - only the to-do items (last children) get checkmarks
• Children - the to-do items do not have children
• itemExpand - only main headers can be expanded