如何在 Web 应用程序中并排放置 Angular 组件

Question

I'm trying to create a Web-app using Angular where a user can play a card game. A list of possible players should be depicted on the left, and the playing table should be to the right of the players list.

Example of desired layout

However, since I'm using Angular and the players list and the playing table are different components, first the players list is shown and below that the playing table is located. What it looks like now

My app.components.html looks like this:

<h1>{{title}}</h1>
<app-pippelaars></app-pippelaars> <!--component displaying available players-->
<app-playing-table></app-playing-table> <!--component displaying playing table-->

How do I get these components to be next to each other in the web app instead of one above the other?

Answer 1

Since 2017 all major browsers support CSS Grid layout , you can use that to position your components correctly. To change the size of the colums you can use the ' grid-template-columns ' property and pass a fixed px value or use fractional units for a responsive layout .

HTML

<div class="grid-container">
  <app-pippelaars></app-pippelaars>
  <app-playing-table></app-playing-table>
</div>

CSS

.grid-container {
   display: grid;
   grid-template-areas: "players-list  playing-table";
   grid-template-columns: 1fr 3fr;
}

 app-pippelaars { grid-area: players-list}
 app-playing-table { grid-area: playing-table}

Answer 2

you can try with flex layout, something like that:

in your scss file:

:host {
 display: flex;
 width: 100%;
 
 app-pippelaars {
  width: 300px
 } 

 app-playing-table {
  flex: 1;
 }
}

more information and example of flex layout can you read here