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.

Interface used to define parent, child, and child of child. Reduces chance for errors when client adds/updates timeline material:

interface IGrandChild { title: string, checkmark: boolean, completed: boolean, children?: any[] }

interface IChild { title: string, checkmark: boolean, children: IGrandChild[] }

interface IParent { title: string, checkmark: boolean, itemExpand: boolean, dot: boolean, topLevel: boolean, areAllStepsCompleted: boolean, children: IChild[] }

Verifying and saving data (GET, POST, PUT)

• Upon initialization of the timeline page, hasTimeline() is called. Within this function, a boolean is pre-defined as false, and calls getTimeline() from the provider - this is where the GET happens. It verifies if any timeline data has been previously saved - if data exists, the boolean is then set to "true" by the function.
• Saving timeline data happens on a click event of the "Save Progress" button. saveTimeline() lives both on the component AND the provider. saveTimeline() on the provider side handles the decision to either POST (create) or PUT (update) based on the boolean value mentioned previously (hasTimeline()/getTimeline()). If the boolean is false, POST is used...true results in the use of PUT.

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

• Title - title of the item
• topLevel - indicates main section header, necessary for targeted styling
• areAllStepsCompleted - assigned only to topLevel (IParent) headers for returning completion values of to-do items (see IGrandChild.complete)
• Checkmark - only the to-do items (last children (IGrandChild) get checkmarks
• Children - the to-do items do not have children
• itemExpand - only main headers (IParent) and subtitles (IChild) can be expanded --See "DATA MODEL: TIMELINE" WIKI for more details--