Alert in Meteor Angular 2 app only appears after c

Question

I've implemented the ng2-bootstrap ngb-alert on a page of a Meteor Angular 2 app. When I push an alert to the alerts array in typescript, the alert is only displayed after i click the browser window again.

The push is done within a callback of the Accounts.createUser function. If the push is done within the signup method (and not the Accounts.createUser callback function) the alert is displayed immediate.

I've also tried to use an async pipe in the ngFor and use a Promise type for the alerts variable. This doesn't solve the problem either.

Underneath sample coding for the problem.

template html

...
<p *ngFor="let alert of alerts">
 <ngb-alert [type]="alert.severity">{{ alert.detail }}</ngb-alert>
</p>
...
<button type="button" (click)="signup()">Signup</button>
...

component class

...
alerts: IAlert[];
...
signup(): void {
  this.alerts = [];

  Accounts.createUser(this.credentials, (error) => {
    if (error) {
      this.alerts.push({severity: 'danger', detail: error.reason || 'Unknown error'});
    } else {
      this.alerts.push({severity: 'success', detail: 'Account created!'});
    }
  });
}
...

IAlert

export interface IAlert {
  severity: string;
  detail: string;
}

Answer 1

Actually here main problem is we are using angular 2 and meteor together and both are in different zones. so angular don't detect change which are outside of its zone.you can solve this problem using this method.

import { NgZone } from '@angular/core';

in you constructor type use this

constructor(private ngZone: NgZone) {}

and use ngZone like this which values you want to detect by angular

  generate_head_list_data(){
        var self = this;
         Meteor.call('refresh_graph_list', self.all_csvdata, self.newGraphdata, (error, response) => {
                if (error) {
                    console.log(error.reason);
                    self.ngZone.run(() => { <-- put you code inside ngZone in which you are getting issue in rendering
                        self.processingStart = false;
                    });
                } else {
                    self.ngZone.run(() => {
                        self.processingStart = false;
                    });
                    console.log(response);
                }
            });
    }

i also faced the same problem when i used angluar2-meteor first time.It works for me. i hope this will works for you also :)