Angular variable in component html is different to what is showing in the component

I have an alert service based on which isn't showing alerts when I change routes.

In this example, I am registering a user and sending them to a login page:

  .finally(() => this.isRequesting = false)
    result => {
      if (result) {
        this.router.navigate(['/login']).then(() => {
          this.alertService.success("Yay", "yay", true, false);
    error => {
      this.alertService.validationError(error.error, 'Registration failed', false, false);

My login page has an app-alert tag which calls the app-alert component.

Now in my component I have set a console.log to make sure that the alert is being populated, and it is.

ngOnInit() {
    this.alertService.getAlert().subscribe((alert: Alert) => {
        if (!alert) {
            // clear alerts when an empty alert is received
            this.alerts = [];

        // add alert to array
        console.log(alert) // My alert shows up here
        console.log(this.alerts.length) // length is now 1

I'm successfully getting to the login page after registration, and my console shows my alert, and shows that alerts[] is equal to 1.

But in my html, the variable alerts.length shows as 0:


I suspect this has got to do with the route change, the alerts component is in the login page, not outside the router-outlet. Other alerts in the application work ok, but that is when both components are within a router-outlet, and the app-alert is outside that.