How do I keep the previous content of my main component in Angular 2?
In angular 1, I can define any root element and not replace the already written HTML. for example 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 am using ng-app
as a main / root component selector, the innerHTML element ng-app
is replaced by the HTML component.
@Component({
selector: 'ng-app',
template:'<h1>App works</h1>";
directives: [UsersComponent]
})
those. innerHTML of ng-app
now becomes <h1>App works</h1>
. I want to keep the previous content ng-app
.
And if this is not possible, I can 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 (loaded on load) and it should render its data in the element <render-component-here></render-component-here>
(not by itself, replacing the previous content)
source to share
Add <ng-content></ng-content>
to your template component
@Component({
selector: 'ng-app',
template:'<div><h1>App works</h1><ng-content></ng-content></div>';
directives: [UsersComponent]
})
Check toddmotto description
Remember that having text in the root component (the component that is being loaded) 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 the plunker work
Loading ... in index.html will always be replaced by a componentng-app
So you are in the same case, even if you mention <ng-content></ng-content>
it will not work. If you want to include this, you must also have one more parent component in which case you must have <ng-app>
and now inside <ng-app>
you must have<ng-content>
source to share
<ng-content>
- answer to your request
Change your code
From:
@Component({
selector: 'ng-app',
template:'<h1>App works</h1>";
directives: [UsersComponent]
})
To whom:
@Component({
selector: 'ng-app',
template:'<h1>App works</h1> <ng-content></ng-content>";
directives: [UsersComponent]
})
If you want to know more about ng-content: https://scotch.io/tutorials/angular-2-transclusion-using-ng-content
source to share