i'm using an API, for one of the response, it's a big bunch of text, and I would like to make it more "readable" Let's just say, the data is like this :

In a bowl, mash the banana with a fork until it resembles a thick purée. Stir in the eggs, baking powder and vanilla.\r\nHeat a large non-stick frying pan or pancake pan over a medium heat and brush with half the oil. Using half the batter, spoon two pancakes into the pan, cook for 1-2 mins each side, then tip onto a plate. Repeat the process with the remaining oil and batter. Top the pancakes with the pecans and raspberries.

is there a way, in Angular, to make it more like this :

In a bowl, mash the banana with a fork until it resembles a thick purée.
Stir in the eggs, baking powder and vanilla.
Heat a large non-stick frying pan or pancake pan over a medium heat and brush with half the oil.
Using half the batter, spoon two pancakes into the pan, cook for 1-2 mins each side, then tip onto a plate.
Repeat the process with the remaining oil and batter.
Top the pancakes with the pecans and raspberries.

Basically, at every dot ( . )

Thank you all

CodePudding user response：

1. A possible solution is to get the string and split it based on each dot(.) and add a "\n"

2. Another feasible way to make it more readable is to place the text in a <p> tag inside a container and with CSS properties set the text-align: justify

hope it could help!

CodePudding user response：

Answer is derived from this answer do upvote that answer!

html

<div [innerHTML]="name | readable"></div>

javascript

import { DomSanitizer } from '@angular/platform-browser';
import { PipeTransform, Pipe } from '@angular/core';

@Pipe({ name: 'readable' })
export class ReadablePipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    const newValue = value.split('.').join('.<br/>');
    return this.sanitized.bypassSecurityTrustHtml(newValue);
  }
}

Stackblitz Demo