Reason for Angular not Rendering My Nested Component?

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?

Solution

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.