Angular component wrapper messing up Bulma styles

Question

I'm a little confused how to address this issue with styling my Angular app using Bulma. I think the crux of the issue is this piece of Sass:

%block
  &:not(:last-child)
    margin-bottom: 1.5rem

=block
  @extend %block

When I have (say) two tabs alongside each other, they get the 1.5rem margin of separation. But, if I make a component of the same tab content and put two of the components next to each other, the padding is gone, presumably because whatever this does fails to hold once the content is isolated in an Angular component wrapper.

Stackblitz demo

app.component.html

<div class="tabs is-medium">
  <ul>
    <li><a href="javascript:void(0);">Foo</a></li>
    <li><a href="javascript:void(0);">Foo</a></li>
  </ul>
</div>

<div class="tabs is-medium">
  <ul>
    <li><a href="javascript:void(0);">Foo</a></li>
    <li><a href="javascript:void(0);">Foo</a></li>
  </ul>
</div>

<tabs-component></tabs-component>
<tabs-component></tabs-component>

tabs.component.html

<div class="tabs is-medium">
  <ul>
    <li><a href="javascript:void(0);">Foo</a></li>
    <li><a href="javascript:void(0);">Foo</a></li>
  </ul>
</div>

Rendered result:

Answer 1

Your margins are being collapsed. You can add the classes to its host, and remove the div wrapping around it. This can be accomplished using @HostBinding();

Component:

import { Component, HostBinding } from '@angular/core';

@Component({
  selector: 'tabs-component',
  templateUrl: './tabs.component.html'
})
export class TabsComponent  {
 @HostBinding('class') classess = 'tabs is-medium'; 
}

HTML:

<ul>
  <li><a href="javascript:void(0);">Foo</a></li>
  <li><a href="javascript:void(0);">Foo</a></li>
</ul>