I am trying to nest two components by writing their Element selector into each other like this <outerElementSelector><innerElementSelector></innerElementSelector></outerElementSelector>
in the HTML file of another third component. I found that my <innerElementSelector>
was not rendering on the page.
Note: Above mentioned selector names are imaginary and are not part of the code, I just took them for explaining my problem.
Also, there is no error on the Console of the Browser.
And yes I have mentioned by components in the app.module.ts
for Angular to know about our components
I am having 3 Components servers, server, successalert
.
The servers.component.html
file contains the other two selectors named app-server
and app-successalert
in the nested form where <app-successalert>
tag is nested in <app-server>
tag.
servers.component.html
<app-server>
<app-successalert></app-successalert>
</app-server>
servers.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-servers',
templateUrl: './servers.component.html',
styleUrls: ['./servers.component.css']
})
export class ServersComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
// IGNORE OnInit AND CONSTRUCTOR();
server.component.html
<h3>Server Component</h3>
server.component.ts
import { Component } from "@angular/core";
@Component({
selector: 'app-server',
templateUrl: './server.component.html',
styles: [`
h3 {
color: orange;
}
`]
})
export class ServerComponent {}
successalert.component.ts
import { Component } from "@angular/core";
@Component({
selector: 'app-successalert',
template: `<p>You are so successfull, Congratzs</p>`,
styles: [`p{
color: green;
padding: 10px;
background-color: lightgreen;
border: 1px solid green;
font-weight: bold;
}`]
})
export class SuccessAlert {}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';
import { ServersComponent } from './servers/servers.component';
import { SuccessAlert } from './successalert/successalert.component';
import { WarningalertComponent } from './warningalert/warningalert.component';
@NgModule({
declarations: [
AppComponent,
ServerComponent,
ServersComponent,
SuccessAlert,
WarningalertComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<h3>Hello, I am Core</h3>
<hr>
<app-servers></app-servers>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
Just a Quick Note: Other Componets like my <app-root>, <app-servers>, <app-server>
are Rendering just the Nested components are not rendering(app-successalert).
I tried the above-mentioned code and expected the (When it is nested in ) will result in showing the You are so successful, Congratzs
on the screen but the is itself not rendered on the screen.
When i put outside of the component like the below code, basically when I am not nesting them renders on the screen.
servers.component.html
<app-server></app-server>
<app-successalert></app-successalert>
Why is it happening?
CodePudding user response:
Add <ng-content></ng-content>
to you ServersComponent template. So it becomes:
server.component.html
<h3>Server Component</h3>
<ng-content></ng-content>
So if you want to project some content inside another component then content projection should be used.
Read more here Angular Docs
CodePudding user response:
You need a ng-content
to do content projection.
So your server template server.component.html
should be:
<h3>Server Component</h3>
<ng-content></ng-content>
CodePudding user response:
If you want a component to render child content you need to define where to place the content with the ng-content tag. More info can be found at https://angular.io/guide/content-projection .
So in your case you should make server.component.html look like
<h3>Server Component</h3>
<ng-content></ng-content>