1

For example i have a string in Title key as Sebamed Baby Wash Extra Soft 400Ml i want to reverse it to "Sebamed ybab Wash artxE Soft lM004". How to reverse it is there any angular pipe like to reverse the string. I have mentioned in the card of the templ;ate as reverse title to display the reversed string.

    <html component>
    <div class="card bg-light mb-3" style="max-width: 640px;" *ngFor="let 
   item1 of myResponse">
  <div class="card-header">Product Info</div>
  <div class="row no-gutters">
  <div class="col-md-4">
    <img src="{{item1.Images}}" class="card-img" alt="...">
  </div>
  <div class="col-md-8">

    <div class="card-body">
      <h5 class="card-title">Product Name: {{item1.Title}}</h5>
      <h5 class="card-title">Reverse Name: {{item1.Title}}</h5>
      <p class="card-text">Category: {{item1.Category}}</p>
      <p class="card-text">ASIN: {{item1.ASIN}}</p>
      <p class="card-text">Details: {{item1.Details}}</p>

    </div>
    </div>
  </div>
   <br>
  <a [routerLink]="['/list']" class="btn btn-dark  inline-block">Go 
   Back</a>
   </div>
     />


   </ component.ts
  import { Component, OnInit } from '@angular/core';

  /*importing services*/  
  import { DealsService } from '../deals.service'



 @Component({
 selector: 'app-details',
 templateUrl: './details.component.html',
 styleUrls: ['./details.component.css']
})
export class DetailsComponent implements OnInit {
    public myResponse;

 constructor(public dealsHttpService : DealsService) { 
console.log('Details component constructor is called');
}

 ngOnInit() {
console.log('Details component onInit called');

this.myResponse = JSON.parse(localStorage.getItem('details'));
console.log(this.myResponse)
return this.myResponse;


}
}
/>

</localstorage json data
ASIN: "B00VFJWGCA"
Actual Discount: "22.0%"
After_Price: "721"
BeforePrice: "920"
Category: "Baby Grooming"
Deal Check: "Deal"
Details: "['Made in Germany', 'Squalene supports the lipid barrier of 
babies and children', 'Sugar based mild cleanser, botanical lipids similar 
to vernix, allantoin', 'Instructions Included']"
Discount % Threshold: "15%"
Images: "https://images-eu.ssl-images-amazon.com/images/I/41X6IolhHGL.jpg 
|| https://images-eu.ssl-images-amazon.com/images/I/51Gqjo%2B7zgL.jpg"
Rank: "1.0"
Title: "Sebamed Baby Wash Extra Soft 400Ml"
vaibhav naik
  • 149
  • 1
  • 5
  • 13

3 Answers3

3

just make your own pipe:

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

@Pipe({name: 'reverse'})
export class ReversePipe implements PipeTransform {
    transform(value: string): string {
        return value.split('').reverse().join('');
    }
}

declare / import it as usual, and let it rip:

<h5 class="card-title">Reverse Name: {{item1.Title | reverse}}</h5>
bryan60
  • 28,215
  • 4
  • 48
  • 65
  • Hi @bryan60 should I include the pipe in the types script component or I need to create a separate file for file – vaibhav naik Jul 27 '19 at 02:38
  • Best practice is to create separate files for pipes. Keep them in a pipes folder under a shared module of some kind. – bryan60 Jul 27 '19 at 02:39
  • Do we need to include it using import statement in the typescript file to use it on html template? – vaibhav naik Jul 27 '19 at 02:54
  • I think I should include include it in app.module.ts – vaibhav naik Jul 27 '19 at 02:55
  • It needs to be declared or imported to the module where it’s being used – bryan60 Jul 27 '19 at 02:55
  • Means the type script component of html template isnt it? – vaibhav naik Jul 27 '19 at 02:57
  • I have another question couldnt solve it like when i include this line in html template "

    Details: {{item1.Details}}

    " the output of it appears as follows on the browser "['Made in Germany', 'Squalene supports the lipid barrier of babies and children', 'Sugar based mild cleanser, botanical lipids similar to vernix, allantoin', 'Instructions Included']" do i nedd to create another pipe to display it as strings?     – vaibhav naik Jul 27 '19 at 03:00
  • No you need to iterate over your array in template, or map your array to a string in your component. There’s a lot of reading on importing / declaring pipes and directives – bryan60 Jul 27 '19 at 03:15
2

What bryan60 is quite good, but to be extra cautious, I'd add check for null/undefined values in order not to get exceptions.

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

@Pipe({name: 'reverse'})
export class ReversePipe implements PipeTransform {
    transform(value: string | null | undefined): string {
        return value ? value.split('').reverse().join('') : "";
    }
}

That might be totally unnecessary for you, but thought it's still worth adding it.

Evaldas Buinauskas
  • 13,739
  • 11
  • 55
  • 107
  • error handling is always a good idea, but this isn't fully error checked, since a user could pass in anything and the compiler won't catch it. But depends if you want a "loud" error or a silent one more than anything else. Good chance OP wants errors thrown if wrong inputs are put in. – bryan60 Jul 26 '19 at 21:03
  • nit: The use of `!!` in a conditional is irrelevant :) – developer033 Jul 27 '19 at 02:31
  • @developer033 indeed it is unnecessary here. Thanks – Evaldas Buinauskas Jul 27 '19 at 07:04
0

If you have a need to reuse this functionality in the Angular framework, then creating a pipe to reverse the text is probably the better move.

However, if the reversing text functionality is not something you need to use throughout your code, it might be simpler to just reverse the direction of the text with a simple CSS class.

<style>
    .reverse{
        direction: rtl;
        unicode-bidi: bidi-override;
        text-align: left;
    }
</style>

<span class='reverse'>!$r@C llA gnillaC¡</span>

This would then be displayed as: ¡Calling All C@r$!

Terrence
  • 131
  • 5