Can someone clarify this syntax (specifically *mycomponent) from an external template (not declared inline within the component decorator):
<my-component *mycomponent><my-component>
Is it just a shorthand way of injecting a component into an external html view/template? Basically, I am asking if it is the equivalent of injecting the 'SubComponent' directive in the inline template below:
@Component({
selector: 'my-component',
directives: [SubComponent],
template: `
...
`
})
In fact the * character is the way to apply a structural directive and is a shortcut for the following:
<template mycomponent>
<my-component></my-component>
</template>
To apply this directive, you need define it with the directives attribute of the component where you want to use it...
Such directive would be implemented this way. See the sample of the NgIf one:
What is specific is that you can inject corresponding TemplateRef and ViewContainerRef to manage the content of the associated template. In the context of the NgIf directive, it's just render or not this content in the DOM.
See this Soc for more details about structural directives:
