I can't find a good solution for my problem. So I have to create a view that is wrapped by clickable div. My content will be just plain text mixed with URLs that are clickable - the problem is that click on link also triggers method of wrapping div - this is unwanted behaviour so I have to add event.stopPropagation() on <a> element.
This solution doesn't work (there is no way to handle click in the component, it just doesn't work - it takes everything I pass for (click)=.... as string even when I use ${ }):
@Pipe({
name: 'urlify'
})
export class UrlifyPipe implements PipeTransform {
transform(text: any): any {
const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z\d+&@#/%?=~_|!:,.;]*[-A-Z\d+&@#/%=~_|])/ig;
return text.replace(urlRegex, (url) => {
return '<a href="' + url + '">' + url + '</a>';
});
}
}
So my idea is to create component with text input. On init I want to split text like this:
Example text: Lorem Ipsum is simply dummy text www.wykop.pl of the printing and typesetting industry https://sadistic.pl.
Wanted array:
[
"Lorem Ipsum is simply dummy text ",
"www.wykop.pl ",
"of the printing and typesetting industry "
"https://sadistic.pl"
"."
]
And then in the html I want to use ngFor and ngCase to create proper element and then I could easily add stopPropagation for <a> element. Can someone help me how to split text in this way? Or maybe you have other ideas for my problem?
I think you might use split method with regexp and keep delimiter:
const text = 'Lorem Ipsum is simply dummy text www.wykop.pl of the printing and typesetting industry https://sadistic.pl.';
const urlRegex =
/([https?|ftp|file|]+[:\/\/]+[-A-Z\d+&@#/%?=~_|!:,.;]*[-A-Z\d+&@#/%=~_|]|[www][-A-Z\d+&@#/%?=~_|!:,.;]*[-A-Z\d+&@#/%=~_|])/gi;
const result = text.split(urlRegex);
console.log(result);P.S. a little bit modified you regexp
You can use onclick directly on element <a> to prevent propagation:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div (click)="wrap()" [innerHtml]="text | urlify"></div>`,
styleUrls: ['./app.component.css'],
})
export class AppComponent {
text = 'Lorem Ipsum is simply dummy text www.wykop.pl of the printing and typesetting industry https://google.com';
wrap() {
console.log('wrap click');
}
}
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Pipe({
name: 'urlify',
})
export class UrlifyPipe implements PipeTransform {
constructor(private _sanitizer: DomSanitizer) {}
transform(value: any, args?: any): SafeHtml {
const urlRegex =
/(\b(https?|ftp|file):\/\/[-A-Z\d+&@#/%?=~_|!:,.;]*[-A-Z\d+&@#/%=~_|])/gi;
const html = value.replace(
urlRegex,
(url) => `<a href="#${url}" onclick="event.stopPropagation();">${url}</a>`
);
return this._sanitizer.bypassSecurityTrustHtml(html);
}
}
example: StackBlitz
or you can implement witch structural directives something like this:
<app-text [text]="text">
<ng-template *appHref="let href">
<a [href]="href" (click)="$event.stopPropagation()">{{ href }}</a>
</ng-template>
<ng-template *appText="let text">
<span>{{ text }}</span>
</ng-template>
</app-text>
(@Yan Koshelev, like this?)