Angular 2 + Semantic UI , component encapsulation breaks style

Question

I'm using Angular2 with Semantic UI as a css library. I have this piece of code:

<div class="ui three stakable cards">
   <a class="ui card"> ... </a>
   <a class="ui card"> ... </a>
   <a class="ui card"> ... </a>
</div>

the cards are rendered nicely with a space between and such. like this: refer to cards section in the link

since the cards represent some kind of view I thought of making a component out of it, so now the code is:

<div class="ui three stakable cards">
   <my-card-component></my-card-component>
   <my-card-component></my-card-component>
   <my-card-component></my-card-component>
</div>

but now the style is broken, there is no space between them anymore.

Is there any nice way of fixing this ?

the first thing I thought of doing is this:

my-card-component OLD template:
<a class="ui card">
    [some junk]
</a>

           |||
           VVV

my-card-component NEW template:
[some junk]

and instantiating like:
<my-card-component class="ui card"></my-card-component>
or like:
<a href="?" my-card-component></a>

but this is not satisfactory since I want to be able to pass in an object and the component would automatically set the [href]=obj.link.

in AngularJS 1.0 there was a replace: true property which does excatly what i need, is there a similar thing in Angular2 ?

Possible duplicate of [Remove the host HTML element selectors created by angular component](http://stackoverflow.com/questions/34280475/remove-the-host-html-element-selectors-created-by-angular-component) — Günter Zöchbauer, Mar 29 '16 at 13:58

score 7 · Answer 1 · edited May 23 '17 at 12:17

There is no replace=true in Angular2. It is considered a bad solution and deprecated in Angular 1.x as well.
See also Why is replace deprecated in AngularJS?

Use an attribute-selector instead of a tag-selector in your component or directive.

Just change

@Directive({ ..., selector: "my-card-component"})

to

@Directive({ ..., selector: "a[my-card-component]"})

and use it like

<a my-card-component class="ui card"> ... </a>

You might also adjust the encapsulation strategy http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html but I think the default emulated should be fine in your case.

I would prefer a better solution if one exists – user47376 Jan 10 '16 at 15:31 — user47376, Jan 10 '16 at 15:31

score 1 · Answer 2 · answered Jan 11 '16 at 13:08

Solved it using @GünterZöchbauer Answer together with @HostBinding('href') so now the code is:

template:
---------
[some junk]

component:
----------
@Component({
    selector: 'a[my-card-component].ui.card',
    templateUrl: 'urlOfSomeJunk.html',
    directives: []
})
export class ProblemCardComponent {
    @Input()
    obj: MyObject;

    @HostBinding('attr.href') get link { return this.obj.link; }
}

instantiating:
--------------
<a class="ui card" my-card-component [obj]="someBindingHere"></a>

that way the href is automatically bound to obj.link and I can rest in piece.

Angular 2 + Semantic UI , component encapsulation breaks style

2 Answers2

Linked