angular2 自定义标题组件

效果：

import {Component, Input, OnInit} from "@angular/core";


const css = require('./horizontal.component.css');
@Component({
    selector: 'custom-div-title',
    templateUrl: './horizontal.component.html',
    styles: [
        css
    ]

})

export class CustomDivTitleComponent {

    @Input()
    title: string = '默认标题';
    @Input('title') set changeTitle(val: any) {
        this.title = val;
    }


}

<div class="row custom-div-title">
    <div class="col-xs-3">
        <span>{{ title }}</span>
    </div>
</div>

.custom-div-title {
    border-top: 5px solid #36a9e1;
    margin: 10px auto;
}

.custom-div-title > div {
    background-color: #36a9e1;
    color: whitesmoke;
    font-size: 20px;
    font-family: "Microsoft YaHei UI";
    text-align: left;
}