How to Overlap Components in Angular 5


I’m just starting out with Angular, and I’m working on creating a sample site.

So basically I’ve got a cover page component called <app-coverpage> and I’ve got all the other components I want to add that I want to be overlapping the coverpage as its supposed to be like a background.

I’ve added the components into my app.component.html file and when I have them in the following order:


what I see is something like this


what I want is for the black app-coverpage component to be the ‘background’ for everything else.

Can anyone help me with this please?

On a side note. I noticed that I can’t add this component to the index.html file. Meaning it doesn’t render on my browser when I add it in the following way:


Can anyone please explain this to me too?

Thanks in advance for your help on both queries!


Do this –


Answered By – Nakul Sharma

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.