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

Popular posts from this blog

php - How to display all orders for a single product showing the most recent first? Woocommerce -

asp.net - How to correctly use QUERY_STRING in ISAPI rewrite? -

angularjs - How restrict admin panel using in backend laravel and admin panel on angular? -