Angular2 makes it simple to create a component like this:
@Component({
selector: 'some',
properties: ['header']
})
@View({
template: `
<div>
<h2>{{ getFormattedHeader() }}</h2>
<p><content></content></p>
</div>
`
})
class SomeComponent {
header: string;
getFormattedHeader() {
return this.header + '!';
}
}
<some header="Header Text">Content</some>
If you want to format the content as well, you may wonder about writing a getFormattedContent() function. In that case, what would be the replacement for this.header in the new function?
You might have thought of using format(header) within the template, with a format method that appends a ! to the input string. Is there a way to apply such formatting directly on the content element like format( <content></content> )? Even though handling an actual element rather than a string is a bit more complex, the type of the content (ElementCollection, NodeList) should be considered.
In some cases, putting everything as attributes and leaving the content empty might seem like a workaround, but it's not always aesthetically pleasing (especially due to limitations in defining tags without closing them properly).