Cannot convert mySQL database entries text '\n' to '<br>'in Angular?

I can read data to my angular app from the database but I am just given the static \n in my text instead of a new line. I am aware I am supposed to convert all \n occurrences to <br /> but I am failing to do this, even when using echo nl2br;

//extract from my php file
if($result = mysqli_query($con, $sql))   
{

  $animals = [];
  $cr = 0;
  while($row = mysqli_fetch_assoc($result))
  {

    $animals[$cr]['animal']  = $row['animal'];
    $animals[$cr]['t1'] = $row['title1'];
    $animals[$cr]['p1'] = $row['paragraph1'];
    $cr++;

}
echo nl2br($animals);
  echo json_encode($animals);

Below is my angular file

//extract from my animals.component.html file

    <div class="container" *ngFor="let animal of this.animals">

        {{animal.t1}}
        {{animal.p1}}
        {{animal.t2}}

    </div>

However, my output on the webpage (coming from animal.t1) is just the same text as the database entry:

Animals \n are \n fun \n .

I have tried numerous different things and just cannot seem to convert the \n's to <br>. Has anyone got any advice on this?

nl2br takes a string not an array. If you select the columns in the query it is much easier. Just map the row array:

  // SELECT animal, t1, p1 FROM table WHERE .....

  while($row = mysqli_fetch_assoc($result))
  {
      $animals[] = array_map('nl2br', $row);
  }
  echo json_encode($animals);

If Angular is converting HTML to entities then you may want to look here Using HTML Entities within Angular strings