I am using a third party plugin "angular-mention", Which is taken a template the following ways.
<ng-template #mentionListTemplate let-item="item">
<div class="media">
<img class="mr-3" src="{{item.avatar}}" alt="" width="30" height="30">
<div class="media-body text-right">
<h6 class="mt-0 mb-0">{{item.name}}</h6>
<small>@{{item.username}}</small>
</div>
</div>
</ng-template>
The template is bind this way.
<textarea [mentionListTemplate]="mentionListTemplate"</textarea>
My problem is, I have lots of angular mention setting with textarea, every place needs mentionListTemplate so it is very much difficult to manage template setting for all places. Now I want to provide this mentionListTemplate from one place by using service or directive.
How could I pass mentionListTemplate from the component ? Thanks.
You can create a reusable component with input parameter for item:
@Component({
selector: 'app-textarea',
template: `
<textarea [mentionListTemplate]="mentionListTemplate"></textarea>
<ng-template #mentionListTemplate let-item="item">
<div class="media">
...
</div>
</ng-template>
`
})
export class TextareaComponent {
@Input() item: IItem = { /* some default value */ };
}
So you can easily use it in other components: <app-textarea [item]="someItem"></app-textarea>
p.s. also you can extend this component and create custom form control by implementing ControlValueAccessor. In this case your textarea will behave like a usual form control element. For more details, checkout this article.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments