Format a big bunch of text

Question

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

refer [here](https://stackoverflow.com/questions/49832358/angular-5-how-to-insert-a-string-as-a-html-element) — Naren Murali, Aug 04 '22 at 15:42
Please phrase your question more clearly. Please state what exactly the goal is, what you are having trouble with and what you have tried so far [read more](https://stackoverflow.com/help/how-to-ask) — MrCodingB, Aug 04 '22 at 15:50

score 0 · Answer 1 · edited Aug 23 '22 at 03:32

0

A possible solution is to get the string and split it based on each dot(.) and add a "\n"
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.

edited Aug 23 '22 at 03:32

Sunderam Dubey

1
11
20
40

answered Aug 04 '22 at 15:36

Trajox

352
3
11

score 0 · Accepted Answer · answered Aug 04 '22 at 15:50

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

Format a big bunch of text

2 Answers2