Menu
In angular 1, I can define any element a root element and that does not replace any inline HTML already written. eg in angular 1.
<body>
<div ng-app="">
<h1><?php echo $heading_this_page;?></h1>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
But in angular 2, if I write above like this.
<body>
<ng-app>
<h1><?php echo $heading_this_page;?></h1>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>
</ng-app>
</body>
and I use ng-app as a main/root component selector, the innerHTML of ng-app element, gets replaced by the component's HTML.
@Component({
selector: 'ng-app',
template:'<h1>App works</h1>";
directives: [UsersComponent]
})
ie the innerHtml of ng-app now becomes <h1>App works</h1> . I want the previous content of ng-app preserved.
And if this is not possible can I do something like below.
<body>
<ng-app>
<h1><?php echo $heading_this_page;?></h1>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>
<render-component-here></render-component-here>
</ng-app>
</body>
Where ng-app is my main component (bootstrapped on load) and it should render its data in <render-component-here></render-component-here> element (and not in itself by replacing previous content)
657
Represents a component created by a ComponentFactory . Provides access to the component instance and related objects, and provides the means of destroying the instance.
A component is composed of two Files Ts and HTML mainly. Html is the view. but you can not have multiple templates, as binding will be issue and rendering can not be done. Instead, you can have multiple components inside one component, with each having different templates you need.
Angular allows us to have a different child, or nested component, which is the same component we normally use in an Angular application. The difference between them is that this child component contains the logic which can be used into the parent component as a single unit.
A template is an HTML snippet that tells Angular how to render the component in angular application. The template is immediately associated with a component defines that component's view.
Add <ng-content></ng-content> in your component template
@Component({
selector: 'ng-app',
template:'<div><h1>App works</h1><ng-content></ng-content></div>';
directives: [UsersComponent]
})
Check toddmotto explanation
Remember that having text in root component(component that is being bootstrapped) will not work with ng-content.
<body>
<ng-app>loading...</ng-app>
</body>
NgApp component
@Component({
selector: 'ng-app',
template: `
<h1>App component</h1>
<my-apps>This is the text by ng-content</my-apps>
<ng-content></ng-content>
`,
})
Having content in all other components will work.
Check working plunker
loading... in index.html will always replaced by the ng-app component
So, you are in the same case, even you mention the <ng-content></ng-content> it won't work. If you want to include that also you must have another parent component and in that you must have <ng-app> and now, inside <ng-app> you need to have <ng-content>
125
<ng-content> is the answer to your query
Change your code
From :
@Component({
selector: 'ng-app',
template:'<h1>App works</h1>";
directives: [UsersComponent]
})
To :
@Component({
selector: 'ng-app',
template:'<h1>App works</h1> <ng-content></ng-content>";
directives: [UsersComponent]
})
If you want to learn more about ng-content : https://scotch.io/tutorials/angular-2-transclusion-using-ng-content
25
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
