title: Update DOM when Angular 2 component property changes
body: <p>Just recently moved from Angular 1 to Angular 4, and having a bit of a tough time understanding why the DOM isn't updating when a component property is updated. I've searched and read countless posts, and can't find anything that seems to answer this. </p>
  
  <p>I have an app that has a component for displaying error messages, called MessageComponent:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';                                                                   
  
   @Component({                                                                                                               
     selector: 'message',                                                                                                     
     templateUrl: './message.component.html',                                                                                 
     styleUrls: ['./message.component.css']                                                                                   
   })                                                                                                                         
  
  export class MessageComponent implements OnInit {                                                                          
  
    messages: Array&lt;string&gt;;                                                                                                 
  
    constructor() {                                                                                                          
  
    }                                                                                                                        
  
    ngOnInit() {                                                                                                             
      this.messages = ['My messages'];                                                                                       
    }                                                                                                                        
  
    /* Takes an array of messages */                                                                                         
  
    showErrors(errors) {                                                                                                     
      this.messages = errors;                                                                                                
    }
  }
  </code></pre>
  
  <p>The template is straightforward:</p>
  
  <pre><code>&lt;div class="message"&gt;                                                                                                      
    &lt;p&gt;Messages go here&lt;/p&gt;                                                                                                  
    &lt;div class="error"&gt;                                                                                                      
       &lt;ul&gt;                                                                                                                 
         &lt;li *ngFor="let message of messages"&gt;{{message}}&lt;/li&gt;                                                              
       &lt;/ul&gt;                                                                                                                
    &lt;/div&gt;                                                                                                                   
  &lt;/div&gt;
  </code></pre>
  
  <p>And I'm calling the <code>showErrors</code> method from another component:</p>
  
  <pre><code>  import { Component, OnInit } from '@angular/core';                                                                         
  
    import { MessageComponent } from  '../message/message.component';                                                          
  
    @Component({                                                                                                               
      selector: 'app-signup',                                                                                                  
      templateUrl: './signup.component.html',                                                                                  
      styleUrls: ['./signup.component.css']                                                                                    
    })                                                                                                                         
    export class SignupComponent implements OnInit {                                                                           
  
      email: string;                                                                                                           
      password: string;                                                                                                        
      cardNumber: string;                                                                                                      
      expiryMonth: string;                                                                                                     
      expiryYear: string;                                                                                                      
      cvc: string;                                                                                                             
      plan: string;                                                                                                            
  
      constructor(private activatedRoute: ActivatedRoute, private auth: Auth, private message: MessageComponent) { }           
  
      signupUser() {                                                                                                           
        // do stuff here, then call back with status                                                                                                                                                                                   
        }, (status: number, response: any) =&gt; {                                                                                
          if (status == 200) {                                                                                                 
            // yay, do success stuff                                                                                                
          } else {                                                                                                             
            console.log('Error', response.error.message);                                                                      
            this.message.showErrors([response.error.message]);                                                                 
          }                                                                                                                    
        });                                                                                                                    
      } 
  </code></pre>
  
  <p>The <code>signupUser()</code> method is called from this form, which is <code>signup.component.html</code>, the template for the SignupComponent: </p>
  
  <pre><code>&lt;message&gt;&lt;/message&gt;                                                                                                      
  &lt;h1&gt;Signup&lt;/h1&gt;                                                                                                          
  &lt;form (submit)="signupUser()"&gt;                                                                                           
    &lt;div class="row"&gt;                                                                                                      
      &lt;div class="small-12 columns"&gt;                                                                                       
        &lt;label&gt;Email address                                                                                               
            &lt;input type="text" [(ngModel)]="email" name="email"&gt;                                                           
        &lt;/label&gt;                                                                                                           
      &lt;/div&gt;                                                                                                               
    &lt;/div&gt;                                                                                                                 
    &lt;div class="row"&gt;                                                                                                      
      &lt;div class="small-12 columns"&gt;                                                                                       
        &lt;label&gt;Password                                                                                                    
          &lt;input type="password" [(ngModel)]="password" name="password"&gt;                                                   
        &lt;/label&gt;                                                                                                           
      &lt;/div&gt;                                                                                                               
    &lt;/div&gt;                                                                                                                 
    &lt;div class="row"&gt;                                                                                                      
      &lt;div class="small-12 columns"&gt;                                                                                       
        &lt;label&gt;Card Number                                                                                                 
            &lt;input type="text" [(ngModel)]="cardNumber" name="card-number" data-stripe="number"&gt;                           
        &lt;/label&gt;                                                                                                           
      &lt;/div&gt;                                                                                                               
    &lt;/div&gt;                                                                                                                 
    &lt;div class="row"&gt;                                                                                                      
      &lt;div class="small-6 columns"&gt;                                                                                        
        &lt;label&gt;Expiration Date (MM/YY)                                                                                     
          &lt;span&gt;&lt;input type="text" size="2" [(ngModel)]="expiryMonth" name="expiry-month" placeholder="MM"&gt;&lt;input type="text" size="2" [(ngModel)]="expiryYear" name="expiry-year" placeholder="YY"&gt;&lt;/span&gt;                                                      
        &lt;/label&gt;                                                                                                           
      &lt;/div&gt;                                                                                                               
      &lt;div class="small-6 columns"&gt;                                                                                        
        &lt;label&gt;CVC                                                                                                        
          &lt;input type="text" [(ngModel)]="cvc" name="cvc"&gt;                                                                
        &lt;/label&gt;                                                                                                          
      &lt;/div&gt;                                                                                                              
    &lt;/div&gt;                                                                                                                
    &lt;input type="submit" value="Sign Up"&gt;                                                                                 
  &lt;/form&gt;  
  </code></pre>
  
  <p>Hopefully that's enough to get the gist. What I'm able to observe is that <code>this.messages</code> inside the <code>MessagesComponent</code> DOES indeed change to the correct value when called, however, the DOM doesn't update. </p>
  
  <p>What am I missing here? I feel like I have some fundamental misunderstanding about how Angular detects the changes to the component property and propagates that to the DOM, but I have no clue what it is I'm missing. </p>
  
  <p>Thanks for any help!</p>