CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic3
OshoParth
OshoParth

Reputation: 1552

Strip Html Tags In Ionic?

Using ionic 3 I have fetched some data from wordpress api and am then displaying the same on app UI. Everything seems to work fine except the HTML tags included in the content. The html tags are printed too. I have referred to some resources that suggested the following code :- 

`var app = angular.module('myHDApp', []);

    app.filter('removeHTMLTags', function() {

    return function(text) {

        return  text ? String(text).replace(/<[^>]+>/gm, '') : '';

};

});

I have implemented the above function in my .ts code but it does not seems to work for me as I still get the HTML tags in the content.

Upvotes: 2

Views: 4913

Answers (2)

Nechar Joshi
Nechar Joshi

Reputation: 670

The Simplest solution:

removeHTMLInfo(value: string)
{  
    if (value)

        return value.replace(/<\/?[^>]+>/gi, "");
}

Upvotes: 1

Gowtham
Gowtham

Reputation: 3233

What you have found is for ionic v1. In ionic 3, you have to create a pipe first.

In your cli,

ionic g pipe removehtmltags

You can find your newly created pipe under src/pipes. Now in your removehtmltags.ts,

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

@Pipe({
  name: 'removehtmltag',
})
export class RemovehtmltagPipe implements PipeTransform {
  /**
   * Takes a value and makes it lowercase.
   */
  transform(value: string) {
           if(value){
               var result = value.replace(/<\/?[^>]+>/gi, ""); //removing html tag using regex pattern
              return result;
           }
           else{}


  }
}

You can now use this pipe in your html files like this,

<p>{{yourData | removehtmltag}}</p>

Upvotes: 6

Related Questions