import { Component, Input } from '@angular/core';
@Component({
selector: 'app-common-header',
templateUrl: './common-header.component.html',
styleUrls: ['./common-header.component.scss'],
})
export class CommonHeaderComponent {
@Input() title: any;
@Input() subTitle: any;
constructor() { }
}
<ion-list>
<ion-item lines="none">
<ion-label class="mt-15 word-break-class">
<div class="title">{{ title | titlecase }}</div>
<div class="desc">{{ subTitle }}</div>
</ion-label>
</ion-item>
</ion-list>
.desc {
color: #555;
white-space: normal;
padding: 5px 0px 30px 0px;
margin-bottom: 10px;
font-size: 0.75rem;
}
.title{
font-size: 1rem;
font-weight: bold;
color: black;
}
.word-break-class{
word-break: break-all;
white-space: normal;
}
Legend
Html element with directive