How to display data from backend with a Promise() in Angular?


I would like to display a page from my Backend to my Angular frontend.

Backend: at ‘http://localhost:8080/test‘ I display a simple “hello” text.

Frontend: at ‘http://localhost:4200/editeur‘ there’s a button. When I click on the button, I would like to display my ‘http://localhost:8080/test‘ content under the button (so my “hello” text in this case).

I used a Promise() in Angular.

This is my Express backend middleware:

server.use('/test', (req, res, next) => {
res.json({ message: 'Hello' });

This is my HTML frontend:

<button class="btn btn-success" (click)="getEditeur()">Display backend</button>

This is my TS Angular frontend:

getEditeur() {

return new Promise((resolve, reject) => {
    (response) => {
    (error) => {

When I click the button, the console.log(‘Hello’); from my backend works, so frontend and backend are well linked. But now I would like my Promise() to display on screen the res.json({ message: 'Hello' }); message.

Thanks !


you can use async pipe , check this example ๐Ÿ‘‡


  data = null
  i = 1;

  getEditeur() {

    return new Promise((resolve, reject) => {
      // call the api => 
      // get the result ... 
      resolve({ message: 'Hello', times: this.i++ });

  getData() { = this.getEditeur();


<button (click)="getData()">Click</button>

  {{data | async | json}}

<ng-container *ngIf="data | async  as messageData">
  <div>message from server {{messageData.message}} , times {{messageData.times}}</div>

demo ๐Ÿš€๐Ÿš€

everytime you click the button will act to give nre promise after this promise resolve the data will be render by json pipe that why I add times property

Without async pipe you can use async/await

  async getData() { = await this.getEditeur();

demo โšกโšก

finally you can use promise then method

  getData() {
    this.getEditeur().then(result=> = result);

check this Promise

Answered By – Muhammed Albarmavi

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.