How to cut the string at every number and create a new line in Angular 7?

Question

I've angular expression like:

<ion-col text-center>{{employeeProfile?.YearOfService}}</ion-col>

And this print: 1 years 6 months 10 days

But my desired output will be:

1 years
6 months
10 days

I'm getting the data from server side as an object and value of

YearOfService = '1 years 6 months 10 days'

*Those who are proving me another link that already solved this issue, please keep it mind, I'm using Angular 7 not AngularJs. And another thing is that, this is possible in JavaScript with Regular Expression but when I transfer this to Angular Expression it doesn't work at all.

Possible duplicate of [How to get line break within string interpolation in Angularjs](https://stackoverflow.com/questions/47678148/how-to-get-line-break-within-string-interpolation-in-angularjs) — Plochie, Jul 18 '19 at 05:43

score 1 · Answer 1 · answered Jul 18 '19 at 05:40

1

You can use replace and regex and trim ( used to remove extra space and both side of string )

\d+

let str = "1 years 6 months 10 days"

console.log(str.replace(/\d+/g, "\n"+"$&").trim())

answered Jul 18 '19 at 05:40

Code Maniac

37,143
5
39
60

1

This works for console print. But when I place the value in {{}} (Angular Expression), it doesn't work! – Abhijit Mondal Abhi Jul 18 '19 at 05:46
1

This does not solve OP question, the question is about html template – Plochie Jul 18 '19 at 05:52
1

@AbhijitM.Abhi you can easily call a function inside `{{}}`, read [`Dynamic values inside template`](https://dzone.com/articles/why-we-shound-not-use-function-inside-angular-temp) and [`Calling method in angular`](https://stackoverflow.com/questions/37385535/calling-method-from-a-angular-2-class-inside-template) – Code Maniac Jul 18 '19 at 06:11

score 1 · Accepted Answer · answered Jul 18 '19 at 06:03

Using a pipe is better . Also use br tag instead of \n and set innerhtml instead of {{}}

Please find an implementation with pipe below :- https://stackblitz.com/edit/angular-custom-pipe-example-mkqsay

@Pipe({
  name: 'custom'
})
export class CustomPipe implements PipeTransform {
  transform(value: string): string {
    if (value === '') {
      return '';
    }
  return value.replace(/\d+/g, "<br>"+"$&").trim();
  }
}

and your html is like

<ion-col><div [innerHtml]="employee.Years | custom"></div></ion-col>

This works fine completely. This solution is from pure Angular! Great. — Abhijit Mondal Abhi, Jul 18 '19 at 06:37

Disaster · Answer 3 · 2019-07-18T06:12:01.600

1

You can do the function in html like

<div [innerHTML]="{{displayEmployee(employeeProfile)}}> </div>

and in controller

function displayEmployee(profile): String{
    if(profile){
    return profile.YearOfService.replace(/\d+/g, "<br />"+"$&").trim();
    }
    return '';
}

By the way I insist on writing properties with small-beginning camelCase

yearOfService, not  YearOfService

edited Jul 18 '19 at 06:12

answered Jul 18 '19 at 06:06

Disaster

861
8
6

score 0 · Answer 4 · answered Jul 18 '19 at 05:39

0

You can create a custom Angular Pipe and try to achieve your use case. Please refer docs. https://angular.io/guide/pipes

answered Jul 18 '19 at 05:39

Anish Unnikrishnan

171
1
8

score 0 · Answer 5 · answered Jul 18 '19 at 05:59

0

Adding to @Code Maniac's answer, you can try this to display in HTML.

var val = str.replace(/\d+/g, "<br/>"+"$&").trim(); // use <br/> instead of \n
// and do this:
<div innerHTML = "{{ val }}"></div> // insert as HTML

NOTE: I did not test the code.

answered Jul 18 '19 at 05:59

Sahith Vibudhi

4,935
2
32
34

score 0 · Answer 6 · answered Jul 18 '19 at 05:59

0

Like @Code Maniac anwser, use regex to add \n yo your string.

Then you can attach a class to the element with the attribute white-space: pre ;. This will break it into a new line for you if you're using \n.

Example

answered Jul 18 '19 at 05:59

Ethan Vu

2,911
9
25

How to cut the string at every number and create a new line in Angular 7?

6 Answers6