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 — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 29, 2016 at 13:58

Community · Accepted Answer · 2017-05-23 12:17:36Z

8

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.

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Jan 10, 2016 at 15:19

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user47376 Over a year ago

I would prefer a better solution if one exists

user47376 · Accepted Answer · 2016-01-11 13:08:36Z

1

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.

answered Jan 11, 2016 at 13:08

user47376

2,2833 gold badges24 silver badges29 bronze badges

Collectives™ on Stack Overflow

Angular 2 + Semantic UI , component encapsulation breaks style

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related