how to add line break in Angular pipe output

user_13786693 0
Viewed 3167

How can I add a line break by using an Angular pipe

<th>{{(date | date: 'EEE MMM d')}}</th>

The output of this is like Mon Jul 20 - all in the same line. But I want it separate like:

Mon
Jul
20

In same cell but on a different line. Like adding a <br> tag. Please check the image below:

enter image description here

angular pipe
3 Answers
<th>
  {{(date | date: 'EEE')}}<br/>
  <strong>{{(date | date: 'MMM')}}</strong><br/>
  {{(date | date: 'd')}}
</th>
user_85581860

My first solution was also to create a pipe:

@Pipe({name: 'breakOn'})
export class BreakOnPipe implements PipeTransform {
  transform(value: string, ...args: any[]) {
    return value.replace(/,|;/g, '<br>'); //replace all ',' and ';' with <br>
  }

}

Similar to @Davis Jahn's answer. But this just shows the <br> in my table and no actual line break. The reason is that the string is "escaped". Solution:

<td mat-cell *matCellDef="let row"><span innerHtml="{{ row.value | breakOn }}"></span></td>

<td> does not seem to support "innerHtml" but <span> does.

user_4474260

You could actually try to implement a pipe which is defining a new line.

something like this:

@Pipe({ Name: 'addLine' })
Export class addLinePipe implements PipeTransform {
  transform(value: string, args: string[]): any {
      return value.replace(/(?:\r\n|\r|\n)/g, '<br/>');
  }
}

and then call it between your other pipes:

<th>
  {{date | date: 'EEE')}}
  {{foo | addLine}}
  {{date | date: 'MMM')}}
  {{foo | addLine}}
  {{date | date: 'd')}}
</th>
user_100248960
Related