File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-truncate-text-popover |
| templateUrl |
./truncate-text-popover.component.html |
Index
Properties
|
|
|
Inputs
|
|
|
Accessors
|
|
|
|
charactersLimit
|
Type : number
|
Default value : 100
|
|
|
The maximum length of the characters after which the text will be truncated
|
|
content
|
Type : string
|
|
|
String to be rendered inside popover wrapper component.
|
|
charactersLimit
|
Type : number
|
Default value : 100
|
Decorators :
@Input()
|
|
|
The maximum length of the characters after which the text will be truncated
|
|
content
|
Type : string
|
Decorators :
@Input()
|
|
|
String to be rendered inside popover wrapper component.
|
Accessors
|
isTruncated
|
getisTruncated()
|
|
|
import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
@Component({
selector: 'cx-truncate-text-popover',
templateUrl: './truncate-text-popover.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TruncateTextPopoverComponent {
/**
* String to be rendered inside popover wrapper component.
*/
@Input() content: string;
/**
* The maximum length of the characters after which the text will be truncated
*/
@Input() charactersLimit: number = 100;
get isTruncated(): boolean {
return this.content.length > +this.charactersLimit;
}
}
<ng-container>
<ng-container>
<span class="truncated-text">
{{ content | cxTruncate: [charactersLimit] }}
</span>
</ng-container>
<ng-template #fullText>
{{ content }}
</ng-template>
<button
*ngIf="isTruncated"
[cxPopover]="fullText"
[cxPopoverOptions]="{
placement: 'auto',
appendToBody: true,
displayCloseButton: true
}"
class="ml-1 link cx-action-link"
>
{{ 'common.more' | cxTranslate }}
</button>
</ng-container>
Legend
Html element with directive