Menu
I try to bootstrap my main angular component in a pre-executed HTML Document. This is my existing DOM :
<html>
<head></head
<body>
<!-- this is my template generated with Symfony -->
<div ...>
<ul>
<li><angularComponent></angularComponent></li>
<li><angularComponent></angularComponent></li>
</ul>
</div>
</body>
</html>
I want to bind my Main App Component (or Directive) on body, or on the main div, without replacing my pre generated content (with symfony).
It is possible ? Have you other solution ?
Thanks,
291
if you want to insert HTML elements or other components in a component, then you do that using the concept of content projection. In Angular, you achieve content projection using < ng-content >< /ng-content >. You can make reusable components and scalable applications by properly using content projection.
html file at runtime. So, from these bundles, the first code has to be executed from "main. ts" file, i.e., "main. ts" file is the main file from where the execution of an Angular application starts.
You can get a handle to the DOM element via ElementRef by injecting it into your component's constructor: constructor(private myElement: ElementRef) { ... }
Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components. Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated for a given element in a template.
Usually this is done by adding <ng-content></ng-content> to the template of your Angular AppComponents template, but AFAIK this is not supported on the application component, only on child components.
You could try to set encapsulation: ViewEncapsulation.Native on the AppComponent und use <content></content> instead of <ng-content></ng-content>.
I haven't tried this myself yet.
173
Ok, so i haven't found any good answers to this question, here's the (hacky) way I did it:
document.getExistingContentByTag = function(tagName){
var target = document.getElementsByTagName(tagName)[0];
if(!target || !target.tagName) return '';
return target.innerHTML;
}
And to render the template:
@Component({
selector: 'my-app',
template: document.getExistingContentByTag('my-app')
})
So it pulls the content of the my-app tag, does its magic and writes it back.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
