angular - Binding custom header element -
my problem is, have component 'action-bar' supposed have header. have freedom of being able insert h1,h2,h3 etc. binding, component can called , title set.
component:
import { component } '@angular/core'; @component({ selector: 'action-bar', templateurl: 'action-bar.component.html', styleurls: ['action-bar.component.styl'] }) export class actionbarcomponent { }
template:
<div class="action-bar"> <ng-content select="[action-bar-title]"> </ng-content> </div>
thus in component using it. do
<action-bar> <div action-bar-title> <h1>hi</h1> </div> </action-bar>
but how make h1 bindable action-bar component? can use h2 or h3.
or mindset angular 2 wrong, should there 'a' header, maybe size attribute or class switch header size.
im still learning
with thanks.
i have component 'action-bar' supposed have header. have freedom of being able insert h1,h2,h3 etc. binding, component can called , title set
you use innerhtml
template syntax, can insert html tags. beware of security risk involved, should not use user input.
<div [innerhtml]="actionbartitle"></div>
actionbartitle
class instances property, , value can change programmatically.
example plunker
Comments
Post a Comment