Header Ads Widget

Ticker

6/recent/ticker-posts

Pipe personalizada Angular 10 Markdown

 En este tutorial, crearemos una tubería angular personalizada para analizar Markdown en HTML. Usaremos la última versión de Angular 10, pero los pasos también son válidos para las versiones anteriores del marco.

Debe tener Angular CLI v10 instalado en su máquina de desarrollo antes de poder continuar con los pasos de este tutorial.

Paso 1: creación de un nuevo proyecto de Angular 10

Si aún no tiene un proyecto, debe ejecutar el siguiente comando para crear un nuevo proyecto:

$ ng new Angular10MarkdownPipe 

La CLI le hará un par de preguntas: ¿ Si desea agregar enrutamiento angular? Escriba y para Sí y ¿Qué formato de hoja de estilo le gustaría usar? Elija CSS .

A continuación, navegue hasta la carpeta de su proyecto y ejecute el servidor usando los siguientes comandos:

$ cd Angular10MarkdownPipe
$ ng serve    

Abra su navegador web y navegue hasta la http://localhost:4200/dirección para ver su aplicación en ejecución.

Paso 2: instalación del markedanalizador de Markdown

A continuación, debe instalar el markedanalizador Markdown que se utilizará para analizar realmente el contenido de Markdown:

$ cd Angular10MarkdownPipe
$ npm install marked

Paso 3: creación de una nueva tubería personalizada

A continuación, debe crear una nueva tubería angular personalizada utilizando Angular CLI de la siguiente manera:

$ ng generate pipe markdown

Esto creará una nueva tubería llamada markdowny la importará en su src/app/app.module.tsarchivo:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { MarkdownPipe } from "../markdown.pipe";

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, MarkdownPipe ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

A continuación, abra el src/app/markdown.pipe.tsarchivo y actualícelo de la siguiente manera:

import { Pipe, PipeTransform } from '@angular/core';
import * as marked from "marked";

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

  transform(value: any, args?: any): any {
    if (value && value.length > 0) {
      return marked(value);
    }
    return value;
  }

}

Importamos markedy actualizamos el transform()método para analizar y devolver HTML.

A continuación, abra el src/app/app.component.tsarchivo y agregue las siguientes variables:

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;

  public title: string = '*Angular 10 Markdown Pipe*';
  public content: string = '**Markdown** is cool!';

}

A continuación, abra el src/app/app.component.htmlarchivo y actualícelo de la siguiente manera:

<h1 [innerHTML]="title | markdown"></h1>
<div [innerHTML]="content | markdown"></div>

Usamos el innerHTMLatributo para representar el código HTML resultante de convertir el contenido de Markdown en las dos variables componentes.

Conclusión

En este tutorial, hemos visto por ejemplo cómo crear una tubería personalizada en Angular 10 para analizar Markdown en HTML.

Publicar un comentario

0 Comentarios