how to render different components beside each other in angular?

Question

I have defined 3 different components. dummy1,dummy2 and table. dummy 1 and dummy 2 have only a single span tag as shown below and table component has a table being rendered. My requirement is that these 3 should be in a horizontal position rather than falling beneath eachother.For the 2 dummy components i used span and they are beside eachother but the table component is falling beneath.

MY app.component.html

<app-headtoolbar></app-headtoolbar>
<app-dummy1 class="comp1"></app-dummy1>
<app-dummy2 class="comp2"></app-dummy2>
<span><app-table class="blk3"></app-table></span>

Can you post your CSS as well?

Sumit Vekariya
– Sumit Vekariya

2020-03-16 09:24:13 +00:00
Commented Mar 16, 2020 at 9:24 — Sumit Vekariya
– Sumit Vekariya, Commented Mar 16, 2020 at 9:24

Jasdeep Singh · Accepted Answer · 2020-03-16 10:29:07Z

YOu can simply align the elements in a single row using Flex layout. Just add all the three elements in a container and use the following CSS for alignment.

.container {
  display: flex;
  justify-content: space-between;
}

I have added the working snippit below:

.container {
  display: flex;
  justify-content: space-between;
}

.comp1, .comp2, .comp3 {
  border: 1px solid black;
  flex-grow: 1;
}

<div class="container">
  <div class="comp1">dummy1</div>
  <div class="comp2">dummy 2</div>
  <div class="comp3">table</div>
</div>

I have just shown you how you can place components next to each other. You can change the widths of components as per your need. You can also create a stackblitz instance and share with me here if need more assistance

You can learn basics of flex here: https://www.w3schools.com/css/css3_flexbox.asp

is there any way that i can add borders for individual components when they are being rendered?

Collectives™ on Stack Overflow

how to render different components beside each other in angular?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related