CODEWITHSUNDEEP
angularangular5
jerome
jerome

Reputation: 411

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:

<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!

Upvotes: 0

Views: 2518

Answers (2)

Nakul Sharma
Nakul Sharma

Reputation: 534

Do this - 

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

Upvotes: 2

Pardeep Jain
Pardeep Jain

Reputation: 86740

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

No this will not work in index.html, because Index.html file will only encounter one component which is bootstraped (Entry component only).

To overlap you can add your <app-header></app-header> within the <app-coverpage></app-coverpage> component's template, and adjust using css as per your requirements.

Upvotes: 3

Related Questions