How to set multiple columns with angular 4 and bootstrap 4? - css

Question

Context:
I'm trying to do a basic thing:
<container>
<div class="row">
<div class="col-3">
...
</div>
<div class="col-4">
...
</div>
<div class="col-5">
...
</div>
</div>
Each column is dedicated to its own module. Let's say that first column is a vertical menu, middle column is a list of things and the last column is the detail of a thing selected in the second column. I'm using Angular4 and Bootstrap4 (with the help of ng-bootstrap). I'm new to both of them.
Issue:
First column is ok, it displays the menu with the expected size. An issue arise when trying to set the second column. This is the resulting code:
<div class="container-fluid">
<div class="row">
<div id="sidebar" class="col-md-3">
...
</div>
<router-outlet></router-outlet>
<list-of-things ng-version="4.0.3">
<div class="col-md-3">
...
</div>
</list-of-things>
...
</div>
</div>
The problem is that the component selector <list-of-things ng-version="4.0.3"> has a determined width and I don't know where this width comes from. Consequently, when I set the width col-md-3, 3 is relative to the size of <list-of-things ng-version="4.0.3"> and not the page width. So I end up with a very norrow list... Setting the value of the inner div to col-md-12 fills the <list-of-things> box.
Additional information:
Below is the CSS stack for the <list-of-things> straight from the web developer tool.
element {}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
*,
*::after,
*::before {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
font-family: "Segoe UI", "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
font-size: 0.9375rem;
font-weight: normal;
line-height: 1.5;
color: #373a3c;
}
body {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #292b2c;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}

Answer 1

I found the answer by my self by trial and error.
The best thing to do is to add the class "col-md-3" to the <list-of-things> tag. The hard part is that this tag is injected by angular via the component selector definition. The documentation about that selector is rather poor for the time being.
Basically, all example shows you to set the selector like this:
#Component({
selector: 'my-posts',
templateUrl: './../templates/posts.component.html',
providers: [PostService]
})
Apparently, if you put the selector value into brackets [ and ], the tag will be a <div> tag with whatever is in between the brackets.
The following example:
#Component({
selector: '[id=my-posts]',
templateUrl: './../templates/posts.component.html',
providers: [PostService]
})
generates the following tag:
<div id="my-posts" ng-version...>InnerHTML Here </div>
I want to set a css class on this div to specify the bootstrap col-md-3. But my selector can't be set on css class (that lead to an error related to recursion). It has to be set at least on an css id. With a bit of luck, I found that the following gives me what I want:
#Component({
selector: '[id=all-posts][class=col-md-6]',
templateUrl: './../templates/posts.component.html',
providers: [PostService]
})
Output:
<div class="col-md-6" id="all-posts" ng-version="4.0.3">
...
</div>
See also Can an angular 2 component be used with an attribute selector?