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](http://semantic-ui.com/views/card.html)

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 ?**

Answer: 
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?](https://stackoverflow.com/questions/24194972/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.
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.