How to Overlap Components in Angular 5

Issue

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:

<app-header></app-header>
<app-coverpage></app-coverpage>

what I see is something like this

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:

<app-root></app-root>
<app-coverpage></app-coverpage>

Can anyone please explain this to me too?

Thanks in advance for your help on both queries!

Solution

Do this –

<app-coverpage>
    <app-header></app-header>
</app-coverpage>

Answered By – Nakul Sharma

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.