Angular4 add custom pipe to async value

Question

Short explanation of my problem:

Till now i had this line of code in my html:

<pre class="preFormattedText" [innerHtml]="(project | async)?.Remarks"></pre>

Then i found the useful plugin Linkify and this post on SO. So i added a new pipeComponent:

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

@Pipe({ name: 'linkify' })
export class LinkifyPipe implements PipeTransform {
    transform(link: string): string {
        return this.linkify(link);
    }
private linkify(plainText): string {
    let replacedText;
    let replacePattern1;
    let replacePattern2;
    let replacePattern3;

    //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    replacedText = plainText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

    //Change email addresses to mailto:: links.
    replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
    replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');

    return replacedText;
  }
}

So i updated my original line of code to

<pre class="preFormattedText" [innerHtml]="(project | async)?.Remarks | linkify"></pre>

But now i get this error:

ERROR TypeError: Cannot read property 'replace' of null

and this section of my code gets highlighted

<h3 class="subtitleH3">{{ this.localizationService.localized['globalComment'] }}</h3>
<div>
    <pre class="preFormattedText" [innerHtml]="(project | async)?.Remarks | linkify"></pre>
</div>

Your first or second replace returns null. Can you find out which one? — Robin Dijkhof, Sep 20 '17 at 13:03
looks like your pipe is not getting value of plainText args, if you want to transform your async data why not doing (project | async | linkify) — JayDeeEss, Sep 20 '17 at 13:04
@RobinDijkhof if i set a breakpoint inside the pipe the breakpoint gets called twice.. once the given obj is null and once its the content which i want to linkify... i guess the reason is getting the content async? — Yannik Zimmermann, Sep 20 '17 at 13:16

score 0 · Answer 1 · answered Sep 20 '17 at 13:31

0

found it, had to implement a simple null check

answered Sep 20 '17 at 13:31

Yannik Zimmermann

103
7

Angular4 add custom pipe to async value

1 Answers1