How to overlap component?

Question

I have the following angular component lets call it child-component

<div>
       <a-component-tag></a-component-tag>
       <router-outlet></router-outlet> 
</div>

which is itself being rendered into another router-outlet like this

<div>
<top-component></top-component>
<router-outlet></router-outlet>
<div>

I would like the component that is rendered in the first router-outlet above to either render below a-component-tag or cover a-component-tag, depending on the user clicking a maximize, minimize button. It shouldn't cover anything but a-component-tag (i.e. it should not cover top-component).

This component is defined by

<div id="thiscomp" [ngclass]="max?cover:minimize">...</div>

I tried to define these two classes as

.cover{
  position: absolute;
  top: 0;
  left: 0;
  z-index:100;
}

.minimize {
   margin-top:30px;
}

but the cover class is not working: Some of the subcomponents in the thiscomp div are rendered above some stay minimized.

Hi, I removed the [tag:javascript] tag because there isn't any in this question. More precisely (for future reference), it's not _critically relevant_ to the question. Also, Angular is written in TypeScript, anyway. Someone may still propose a JavaScript _answer_, of course. — msanford, Apr 03 '18 at 19:18
Following the suggestion of @Daniel Beck below, if you want to hide the parent component and display the child component take a look at https://stackoverflow.com/questions/35738355/angular-2-changing-component-variables-on-another-component — user2175783, Apr 03 '18 at 21:18

score 2 · Accepted Answer · answered Apr 03 '18 at 19:31

2

You're trying to change the order in which two DOM elements appear -- there are better techniques than absolute positioning available for that.

The javascript in this example is just for demo; the work is being done in the CSS:

document.getElementById("example").onclick = function() {
  document.getElementById("container").classList.toggle('flip');
}

#container {display: flex; flex-direction:column}

#container.flip {flex-direction: column-reverse}

<div id="container">
  <div class="componentA">Component A</div>
  <div class="componentB">Component B</div>
</div>

<button id="example">Toggle</button>

answered Apr 03 '18 at 19:31

Daniel Beck

20,653
5
38
53

I want component B to cover component A not flip them. Or maybe I am misunderstanding your answer. – user35202 Apr 03 '18 at 19:36
1

Perhaps I misunderstood -- I took "below" as meaning "on the page" not "in stacking order". I'm not quite following your description of what you do want -- if you're trying to hide one component behind another might it be better to just v-if the background one out of existence? – Daniel Beck Apr 03 '18 at 19:43
1

...er, ng-if. Forgot which framework we were talking about :) – Daniel Beck Apr 03 '18 at 20:29
1

I actually like this solution. I tried both this solution and the ngIf on the top component and for now prefer flipping them as described above. – user35202 Apr 04 '18 at 14:33

How to overlap component?

1 Answers1