Angular binding web api formatting

Question

From my web api, I can see there is formatting for line breaks etc, as below:

address: "11 Ingle Park Way↵LONDON↵NN15 1GN↵United Kingdom"

What I want to know is, how to I bind the data to my view with this formatting. So far I am doing:

<span class="text-gray">{{receivedRequest.address}}</span>

TS file

receivedRequest: any;

constructor(private service: nowService,
    private appComponent: AppComponent,
    private userService: UserService,
    private router: Router,
    private http: HttpClient,
    private route: ActivatedRoute
  ) {
    this.receivedRequest = { number: '', opened_at: '', description: '', short_description: '', "c_i.serial_number" : "value" }; this.receivedLocation = { city: null, country: null }
  }

private getRequest() {
    this.service.getServiceRequest(this.s_id, this.c_id).subscribe((data) => {
      this.loading = true;
      console.log('Result - ', data);
      console.log('service data is received');
      this.loading = true;
      this.receivedRequest = data.result;
      this.loading = false;
    })
  }

.service file

getServiceRequest(s_id, cId): Observable<any> {
    return this.http.get<any>(this.servicenowApiUrl + "/" + s_id + "?c_id=" + cId)
      .pipe(
        catchError(this.handleError)
      );
  }

You need to replace the text line breaks with actual <br> elements, or they'll get rendered to single spaces like virtually all other whitespace in HTML. — jonrsharpe
– jonrsharpe, Commented Apr 10, 2019 at 15:54
Unless you want to do it on the server side, but that would likely make it less useful for any non-HTML-based clients. — jonrsharpe
– jonrsharpe, Commented Apr 10, 2019 at 15:56
That worked Alessandro, can you add as answer and I can accept — Sole
– Sole, Commented Apr 10, 2019 at 16:13

invernomuto · Accepted Answer · 2020-06-24 20:52:03Z

1

As you can read here

The HTML pre element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional ("monospace") font. Whitespace inside this element is displayed as written.

As you can find below, you can replace your span tag with a pre tag

<pre class="text-gray">{{receivedRequest.address}}</pre>

and preserve the existent format of your text without modify your api endpoint.

All the best

edited Jun 24, 2020 at 20:52

answered Apr 11, 2019 at 6:14

invernomuto

10.3k5 gold badges42 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular binding web api formatting

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related