Cursos Empresas Blog Live Conf Eventos Precios

0:0011:00

Recursos

Resumen

Ya que sabemos cómo pasarle parámetros a los pipes y que basado en esos parámetros tengamos definidas nuestras salidas, en éste vídeo aprenderemos como crear pipes propios que se ajusten a nuestras necesidades mas especificas.

Creando nuestro propio pipe

Curso de Angular 4

Clase 49 de 80

Clase 49 / 80

Pedro Ramón Sánchez Chacón

Hace 9 años

Para los que le de error copien esto y peguenlo en su clase de linkifystr.pipe.ts

export class LinkifystrPipe implements PipeTransform {

    urls: any = /(\b(https?|http|ftp|ftps|Https|rtsp|Rtsp):\/\/[A-Z0-9+&@#\/%?=~_|!:,.;-]*[-A-Z0-9+&@#\/%=~_|])/gim; // Find/Replace URL's in text
    hashtags: any = /(^|\s)(#[a-z\d][\w-]*)/ig; // Find/Replace #hashtags in text
    mentions: any = /(^|\s)(@[a-z\d][\w-]*)/ig; // Find/Replace @Handle/Mentions in text
    emails: any = /(\S+@\S+\.\S+)/gim; // Find/Replace email addresses in text

    transform(text: string) {
        return this.parseUrl(text);
    }

    private parseUrl(text: string) {
        // Find/Replace URL's in text
        if (text.match(this.urls)) {
                text = text.replace(this.urls, function replacer($1, $2, $3) {
                        let url: any = $1;
                        let urlClean: any = url.replace("" + $3 + "://", "");

                        return "<a href=\"" + url + "\" target=\"_blank\">" + urlClean + "</a>";
                });
        }

        // Find/Replace @Handle/Mentions in text
        if (text.match(this.hashtags)) {
            text = text.replace(this.hashtags, "<a href=\"/search/hashtag/$2\" class=\"hashtag-link\">$1$2</a>");
        }

        // Find/Replace #hashtags in text
        if (text.match(this.mentions)) {
            text = text.replace(this.mentions, "<a href=\"/search/handle/$2\" class=\"handle-link\">$1$2</a>");
        }

        // Find/Replace email addresses in text
        if (text.match(this.emails)) {
                text = text.replace(this.emails, "<a href=\"mailto:$1\">$1</a>");
        }

        return text;
    }
}

Andres Alvarez

Hace 9 años

porque no funcionaba con linkifyStr?

Joshua Michael Rodriguez

Hace 9 años

Muchas gracias, con esto se resolvió el problema.

¿Alguien sabe el motivo por el que no funcionó como lo exlica Eduardo en el vídeo?

Comentarios (22)22 comentarios

Miguel López Ariza

recuerden que desde Angular CLI pueden crear el pipe

ng generate pipe [name]

Juan Roa

Hace 8 años

para el ejemplo:

ng generate pipe pipes/linkifystr

Esto debe ya actualizarles el app.module

Maximiliano Torre

Muy poco didactico el ejemplo, muy mal explicado, no me gusto para nada

veronica oviedo

Hace 7 años

estaria muy bien que este pipe se lo agregaran a las historias instagram, es una lata tener q andar copiando los links , jeje

Julio Yacot

Like para el profesor por hacer un ejemplo con las Arepas!!

Usuario anónimo

User

Me hubiera gustado otro ejemplo para crear nuestros propios pipes.

Omar Gaston

Ami me da este error! 😕

TypeError: Object(…) is not a function
at LinkifyPipe.transform (linkify.pipe.ts:10)

Daniel Hernández

a mi tambien, ya tienes solucion’

OLIVER CASAS URUETA

Tal vez estás poniendo
import { linkifyStr } from ‘linkifyjs/string’ en vez de
import linkifyStr from ‘linkifyjs/string’

Jose Adan Ardila Sanchez

Super chevere el tema, pero siento que deberían profundizar más el como incluir librerias de npm y usarlas den angular, usualmente la documentación de esas librerias dicen que para hacer uso de ellas se necesita un “require” pero al parecer esa no es la forma correcta de cargar esas librerías y esta clase es un ejemplo de ello, seria excelente si pudieran incluir una guia o un link donde explicaran el tema desde cero.

Rodolfo Sáenz

Jose Pech

Segui los pasos que ustedes pusieron y también hay que tener en cuenta que para llamar la función hay que poner en default. Les compartó mi declaración.

transform(str: string): string {
    return str ? linkifyStr.default(str, {target: '_system'}) : str;
  }```

Jose Alejandro Gonzalez Rondon

LugaresComponent.html:15 ERROR TypeError: string_1.default is not a function
at LinkifystrPipe.transform (linkifystr.pipe.ts:7)

Diego Forero

Team Platzi

Ya un compañero dejo la solución, pueden ordenar los comentarios por nuevos y encontraran la solución

Jhon Castrillon

que actualicen esta parte que a toda hora buscando soluciones por fuera !

Yuri Marcela Quejada Santos

Me sale este error 😦
ERROR TypeError: string_1.default is not a function
at LinkifystrPipe.transform (linkifystr.pipe.ts:8)

Alguno me podría ayudar. Muchas gracias.

Nyxent Corp

Hola no encontre la solucion a este erro

Carlos Uriel de Jesus Sánchez González

@Pipe({name:'LinkifystrPipe'})
export class LinkifystrPipe implements PipeTransform {}

Cristian Palta

buenas clases

Cristian De Blasis

¿Usar [innerHtml] puede generar alguna vulnerabilidad a la seguridad de la app?

Nelson Oswaldo Gonzalez Santiago

me sale un mensaje de error desde el node.js.

ERROR in C:/xampp/htdocs/angular_4/platzisquare/src/app/pipes/linkifystr.pipe.ts
(2,26): Cannot find module ‘@linkifyjs/string’.

webpack: Failed to compile.

Carlos Sampol

Intenta instalarlo con el manejador de paquetes que uses.
yarn add linkifyjs

Miguel Márquez Serrano

Buenas,
¿Cómo se pondría la fecha con el pipe en español?
Gracias.

Eduardo Alejandro Yrady Brazon

No se me ocurre nada mas que construir tu propio Pipe donde pases esa fecha formateada con el pipe date, captures con las funciones nativas de javascript la palabra correspondiente al mes, evaluarla con un array y asignarle el mismo valor pero en español.

Mario

Saludos ¿Comó se en que momento una librería de terceros solo tengo que llamarla con un import dentro de angular o por el contrario tengo que agregar la ruta de la libreria en el angular-cli en scripts?

Jonathan Jiménez

Buenas mariomalagon,
Si no me equivoco, en el archivo angular-cli solo tienes que añadir librerías que utilices para hacer los bundle, cualquier otra librería que necesites utilizar sus funcionalidades en tu app deberas importarla normalmente en tu código.
saludos,

Mauro Gomez

A día de hoy siguiendo el ejemplo justo como lo dice Ibarra me salió el siguiente error

error TypeError: string_1.default is not a function
    at LinkifystrPipe.transform (linkifystr.pipe.ts:11)
    at checkAndUpdatePureExpressionInline (core.js:13181)
    at checkAndUpdateNodeInline (core.js:13897)
    at checkAndUpdateNode (core.js:13836)
    at debugCheckAndUpdateNode (core.js:14729)
    at debugCheckRenderNodeFn (core.js:14708)
    at Object.eval [as updateRenderer] (EntidadesComponent.html:21)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:14693)
    at checkAndUpdateView (core.js:13807)
    at callViewAction (core.js:14153)

para solucionarlo se modifica la línea del import a

import * as linkifyStr from 'linkifyjs/string';

no es de angular es de TypeScript y la forma en la que se importan los módulos para mas información

Miguel Angel Monje Allende

a los que tienen el erro de:
error TypeError: string_1.default is not a function
sustituyan el impor que pone Eduardo por este:

Recursos

Resumen

Creando nuestro propio pipe

Progreso del curso

Inicio del curso

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

Fin del curso

Sesiones en vivo

Contenido Bonus