Screenshot to show input/output
How do you feel about adding a screenshot similar to the one below to show how input/output map to the code?

Image updated.
@gvwilson @rpdasilva @jamesbs @mdegani
I like it!
Works for me - Good way to show the relationship between template syntax and component classes
Let me know if you want any changes to this. I have updated the image.
It would be nice if there were some way to draw the arrows in live. There's a bit of information overload with arrows going in different directions
I know what you mean. Maybe we can display multiple images going from one 1 arrow into 4, while explaining what each of them do. What do you think about that?
I like the diagram. It's not something you can just glance at though, takes a while to follow all of the arrows. Maybe the red is a bit stark and makes it look busier than it actually is.
What if the arrows pointed from the thingsToDo assignment thingsToDo = [... to the template to illustrate that data is flowing from there to the input in the ToDoListComponent. Also, maybe the @Output... could point to the template? There are 5 arrows, but there are only two things happening: data flowing down and data being emitted upwards.
Actually, you could even number each arrow starting with the output and show each step that is triggered by the newItem event and leading to the addition of the emitted item to the list.
Yes. I was thinking about numbering them as well. I am going to try to create 4 different image, starting with 1 arrow and adding another one with each image. The end image should look like the original one. Maybe that will be easier to explain and could appear less complicated.