Dynamicznie wypełniaj css Pseudoelement "before" content with Angular2

Question

Ciężko próbuję dynamicznie wypełnić wartość "content" na pseudoelementie :before. Dowiedziałem się, że było możliwe w starszych wersjach AngularJS w innym pytaniu niż here, tworząc dodatkowy atrybut danych na elemencie, który ma na sobie pseudo element before, a następnie odczytać tę wartość za pomocą attr() w CSS.

Wydaje się działać dobrze przy użyciu zwykłego ciąg jako wartość:

// CSS 
.test:before { 
    content: attr(data-before); 
} 

// Template 
<div class="test" data-before="before text goes here"> 
    <h2>Hello {{name}}</h2> 
</div> 

ale gdy próbuję wypełnić dane, zanim z interpolacją jak ta, pojawia się błąd:

// CSS 
.test:before { 
    content: attr(data-before); 
} 

// Template 
<div class="test" data-before="{{name}}"> 
    <h2>Hello {{name}}</h2> 
</div> 

Czego mi tu brakuje? Błąd generowany jest:

Error: Template parse errors: 
Can't bind to 'before' since it isn't a known property of 'div'. 

Oto wersja nieprodukcyjnym w plunker: http://plnkr.co/edit/HwVp9jlsx6uKfoRduxWu

Answer 1

Zastosowanie: <div class="test" [attr.data-before]="[name]">

UPDATE

Można też po prostu upuścić kwadratowe nawiasy wokół name tak:

<div ... [attr.data-before]="name">.

Wydaje się, że jest to konwencja w wielu przykładach, które widzę. To działa, jak sądzę, ponieważ już mówisz Angularowi, żeby wykonał wiązanie, podając [attr.data-before] i zakłada, że ​​dane z prawej strony pochodzą z odpowiedniego komponentu.