Clickable elements in text

Ionic Framework ionic-v3
4

Works like a charm :blush:
For completeness, here an example of how I implemented it, in case others need it too:

I replaced the normal text binding with

<ng-container *ngFor="let component of item.description | richTextComponents">
	<tag *ngIf="component.type === 'tag'" [tag]="component.content"></tag>
	<ng-container *ngIf="component.type === 'text'">{{component.content}}</ng-container>
</ng-container>

And added this pipe as a test (in this case extracting something like hashtag syntax):

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
	name: 'richTextComponents'
})
export class RichTextComponents implements PipeTransform {
	transform(value: string, ...args: any[]): any {
		return value
			.split(/([#][A-Za-z0-9-_]{3,})/)
			.map((val: string) => {
				return {
					type: (val.startsWith('#') && val.length > 3) ? 'tag' : 'text',
					content: val
				}
			});
	}
}

The tag component is now able to handle the click event and open an ActionSheet.

1 Like