I am trying to follow the Angular's introductory "Tour Of Heroes" tutorial. In "Show The Hero Object" section, you are supposed to change the contents of the heroes.component.html template from
{{hero}}to
<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>The above works for me, but originally I made a small deviation and had the template contents surrounded by a paragraph HTML element
like this:
<p>{{hero}}</p>The problem is that while the above used to work, when hero was a simple String object, changing the template to the following generates no output. I.e. inspecting the source I just see empty app-root element.
<p>
<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>
</p>What could be wrong? UM, finally I found out the error, but am open to comments. Thank you.
UM, OK, I am just posting this and keeping this for future reference. Nothing to do with Angular. Never realised that I was not allowed to do so..
There was an error in the javascript console that I was ignoring. It went like this:
Uncaught Error: Template parse errors: Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags
Searching for THAT I found out that Angular, and in fact the whole HTML specification doesn't like P tag with child elements that are not textual - as I understand it, it's a tag that should be used for immediate formatting, like B, and not for building a structure or a layout. There's an extensive discussion about this issue here.