While working with Angular 5 and Bootstrap, I have encountered an issue with using inline styles for margin. The template I am using is as follows:
@Component({
selector: "dynamic-container-component",
template: `
<div
style="border: 1px solid; min-height: 10px; min-width: 10px; margin: 10px;" class="col">
</div>
`
})
export default class DynamicContainerComponent {
}
There are multiple instances of dynamic-container-component within a container.
@Component({
selector: "container",
template: `
<div class="container">
<div class="row">
<dynamic-container-component></dynamic-container-component>
<dynamic-container-component></dynamic-container-component>
</div>
</div>
`
})
export default class Container{
}
When rendered, the HTML structure would be similar to the following:
<div>
<dynamic-container-component>
<div style="border: 1px solid; min-height: 10px; min-width: 10px; margin: 10px;">
</div>
</dynamic-container-component>
<dynamic-container-component>
<div style="border: 1px solid; min-height: 10px; min-width: 10px; margin: 10px;">
</div>
</dynamic-container-component>
</div>
However, the margin style does not render correctly in the browser.