title: Angular Dom Not Updating When calling method in a seperate component
body: <p>Hi y'all So I have a component(let's call this recipe component) that has a ref to another component(Let's call this grocery component).</p>
  <p>My recipe component has a reference to grocery component. A method in my recipe component uses the grocery component ref to call a method within the grocery component.</p>
  <p>The recipe component method is called addToGroceryList(recipeName,ingredients) this method uses the grocery component reference to call groceryComponenent.addToGroceryList(recipeName,ingredients)</p>
  <p>And when I do this my dom doesn't get updated and for the life of me I can't figure out why. How ever I made a temporary button in my grocery Component html to call groceryComponent.addToGroceryList(&quot;test1&quot;,[&quot;test&quot;]) and when I use this mock button the dom updates just fine. So I know the issue is because I'm invoking methods through a reference.</p>
  <p>Anyways here's my code. groceryList is my reference to my other component</p>
  <p>RecipeComponent:</p>
  <pre><code>    import {Component} from '@angular/core';
  import {GetRecipesService} from './getrecipes.service'
  import { TagInputModule } from 'ngx-chips';
  import {GrocerySidebarComponent} from &quot;./grocery-sidebar/grocery-sidebar.component&quot;;
  
  
  TagInputModule.withDefaults({
      tagInput: {
          placeholder: 'Add a ag',
          // add here other default values for tag-input
      },
      dropdown: {
          displayBy: 'my-display-value',
          // add here other default values for tag-input-dropdown
      }
  });
  
  
  @Component({
      selector: 'recipes', //&lt;recipes&gt;
      styleUrls: ['./recipes.component.css'],
      template: `
      &lt;script src=&quot;angular.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;ng-tags-input.min.js&quot;&gt;&lt;/script&gt;
      &lt;div class=&quot;recipeContainer container-fluid&quot;&gt;    
          &lt;!-- Modal --&gt;
          &lt;div class=&quot;modal fade&quot; id=&quot;exampleModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
          &lt;div class=&quot;modal-dialog&quot;&gt;
              &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-header&quot;&gt;
                  &lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;Modal title&lt;/h5&gt;
                  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                  &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
                      &lt;form&gt;
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;label for=&quot;recipeNameInput1&quot;&gt;Recipe Name&lt;/label&gt;
                          &lt;input [(ngModel)] =&quot;formRecipeName&quot; name=&quot;formRecipeName&quot; class=&quot;form-control&quot; id=&quot;exampleInputEmail1&quot; aria-describedby=&quot;emailHelp&quot;&gt;
                      
                      
                          &lt;tag-input [(ngModel)]=&quot;formIngredients&quot; id=&quot;ingredientTags&quot; [modelAsStrings]=&quot;true&quot; name=&quot;formIngredients&quot; [secondaryPlaceholder]=&quot;'Enter Ingredient'&quot;&gt; &lt;/tag-input&gt;
                          
                          &lt;/div&gt;
                  
                      &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot; (click)=&quot;addRecipe()&quot; data-dismiss=&quot;modal&quot;&gt;Submit&lt;/button&gt;
                  
                      &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-footer&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;!-- Are you Sure Modal --&gt;
          &lt;div class=&quot;modal fade&quot; id=&quot;deleteModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;deleteModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
          &lt;div class=&quot;modal-dialog&quot;&gt;
              &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-header&quot;&gt;
                  &lt;h5 class=&quot;modal-title&quot; id=&quot;deleteModalLabel&quot;&gt;Are you sure?&lt;/h5&gt;
                  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                  &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
                      &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot; (click)=&quot;deleteRecipeInBuffer()&quot; data-dismiss=&quot;modal&quot;&gt;Delete&lt;/button&gt;
                  
              &lt;/div&gt;
              &lt;div class=&quot;modal-footer&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
                      
  
          &lt;div class=&quot;album py-5 bg-light&quot;&gt;
  
          &lt;nav class=&quot;navbar navbar-expand-sm navbar-dark bg-dark&quot;&gt;
                  &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
                  &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarCollapse&quot; aria-controls=&quot;navbarCollapse&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
  
                  &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarCollapse&quot;&gt;
                  &lt;ul class=&quot;navbar-nav mr-auto&quot;&gt;
                      &lt;li class=&quot;nav-item active&quot;&gt;
                      &lt;button class=&quot;btn btn-outline-success my-2 my-sm-0&quot; type=&quot;submit&quot; data-toggle=&quot;modal&quot; data-target=&quot;#exampleModal&quot;&gt;Add Recipe&lt;/button&gt;
                      &lt;/li&gt;
                      &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;form class=&quot;form-inline mt-2 mt-md-0&quot;&gt;
                      &lt;input class=&quot;form-control mr-sm-2&quot; type=&quot;text&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot;&gt;
                      &lt;button class=&quot;btn btn-outline-success my-2 my-sm-0&quot; type=&quot;submit&quot;&gt;Search&lt;/button&gt;
                  &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
              &lt;div class=&quot;row&quot;&gt;
                  &lt;div class=&quot;col-md-4&quot; *ngFor = &quot;let recipe of recipeList;trackBy:trackByIdCode&quot;&gt;
                      &lt;div class=&quot;card mb-4 box-shadow&quot;&gt;
                      &lt;sup&gt;
                          &lt;button type=&quot;button&quot; data-toggle=&quot;modal&quot; data-target=&quot;#deleteModal&quot; class=&quot;close&quot; aria-label=&quot;Close&quot; (click)=&quot;prepareToDelete(recipe._id)&quot;&gt;
                          &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/sup&gt;
                          &lt;h5 class=&quot;card-title&quot;&gt;{{recipe.recipeName}} &lt;/h5&gt;
                          &lt;div class=&quot;card-body&quot; &gt;
                              &lt;p class=&quot;card-text&quot;&gt;{{recipe.recipeIngredients}}&lt;/p&gt;
                                  &lt;div class=&quot;d-flex justify-content-between align-items-center&quot;&gt;
                                      &lt;div class=&quot;btn-group&quot;&gt;
                                      &lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-outline-secondary&quot; (click)=&quot;addToGroceryList(recipe.recipeName,recipe.recipeIngredients)&quot;&gt;Add To Grocery List&lt;/button&gt;
                                      &lt;/div&gt;
                                  &lt;small class=&quot;text-muted&quot;&gt;9 mins&lt;/small&gt;
                                  &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  
  
  
              &lt;/div&gt;
          
          &lt;/div&gt;
      &lt;/div&gt;
      TODO: Edit Recipe. Ingreidents with quantity. Ingredients with style (Chopped. Diced. Sautee..etc). Search or Filter (by name or ingredient). 
      TODO: Add to grocery List. Undo Button
                  `,
  })
  export class RecipesComponent{
      constructor(getRecipesService: GetRecipesService,groceryList:GrocerySidebarComponent){
          getRecipesService.getRecipes().subscribe(promise=&gt;{
              this.recipeList = promise;
              this.recipeList = this.recipeList.data;
              console.log(this.recipeList);
          });
          this.recipeService=getRecipesService;
          this.groceryList = groceryList;
          
      }
      addToGroceryList(recipe,ingredients){
          this.groceryList.addToGroceryList(recipe,ingredients);
      }
  
      //when user presses x on card, the id is stored here. Then are you sure window appears
      //if yes on are you sure then delete whats in buffer
      //else clear what's in buffer
      prepareToDelete(recipeId){
          this.deleteBuffer = recipeId;
      }
        //if yes after are you sure, delete whats in buffer
    deleteRecipeInBuffer(){
          this.deleteRecipe(this.deleteBuffer);
      }
  
      addRecipe(){
          this.recipeService.addRecipe(this.formRecipeName,this.formIngredients).subscribe(promise=&gt;{
              console.log(&quot;promise&quot;+promise);
              this.refreshRecipeList();
              this.formIngredients = undefined;
              this.formRecipeName = undefined;
          });
         
      }
  
  
      deleteRecipe(recipeId){
          this.recipeService.deleteRecipe(recipeId).subscribe(promise=&gt;{
              console.log(promise);
              this.refreshRecipeList();
          })
          
      }
      
      refreshRecipeList(){
          this.recipeService.getRecipes().subscribe(promise=&gt;{
              console.log(&quot;refreshed&quot;);
              this.recipeList = promise.data;
          });
      }
  
      public trackByIdCode(index: number, recipe: any): string {
          return recipe._id;
      }
      deleteBuffer;//buffer is used to store recipeId =&gt; are you sure window comes up. if yes then delete whats in deleteBuffer
      formRecipeName;//form value in modal
      formIngredients; //form value in modal
      recipeService;//http access service
      recipeList;//list of all recipes recieved from recipeService
      groceryList;
  }
  </code></pre>
  <p>//</p>
  <p>Grocery Component:</p>
  <pre><code>import { Component, OnInit, NgModule,ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
  import {GetRecipesService} from '../getrecipes.service';
  import { MatIconRegistry } from &quot;@angular/material/icon&quot;;
  import { DomSanitizer } from &quot;@angular/platform-browser&quot;;
  @Component({
    selector: 'app-grocery-sidebar',
    templateUrl: './grocery-sidebar.component.html',
    styleUrls: ['./grocery-sidebar.component.css'],
    changeDetection: ChangeDetectionStrategy.Default,
    })
  
  export class GrocerySidebarComponent {
  
    constructor(getRecipesService: GetRecipesService,private matIconRegistry: MatIconRegistry,private domSanitizer: DomSanitizer,private cdr:ChangeDetectorRef) { 
      getRecipesService.getGroceryList().subscribe(promise=&gt;{
        this.groceryList = promise.data;
    });
      this.recipeService=getRecipesService;
      this.matIconRegistry.addSvgIcon(&quot;shopping_cart&quot;,this.domSanitizer.bypassSecurityTrustResourceUrl(&quot;../assets/shopping-cart-solid.svg&quot;));
      this.CDR = cdr;
    }
  
    addToGroceryList(recipeName,recipeIngredients){
      console.log(&quot;Entered addToGroceryList&quot;);
      this.recipeService.addToGroceryList(recipeName,recipeIngredients).subscribe(promise=&gt;{
        console.log(&quot;promise returned from addToGroceryList()&quot;)
        this.refreshGroceryList();
      });
      
    }
  
    refreshGroceryList(){
      this.recipeService.getGroceryList().subscribe(promise=&gt;{
        this.groceryList = promise.data;
        console.log(&quot;refreshed&quot;);
      })
    }
  
    deleteGroceryRecipeById(groceryId){
      console.log(&quot;Delete requested: &quot;+groceryId);
      this.recipeService.deleteGroceryRecipeById(groceryId).subscribe(promise=&gt;{
        this.refreshGroceryList();
      });
    }
  
  
    public trackByCode(index: number, recipe: any): string {
      console.log(&quot;tracking&quot;);
      return recipe._id;
  }
    CDR;
    recipeService;
    groceryList: object[];
    showFiller=false;
  }
  </code></pre>
  <p>Grocery HTML:</p>
  <pre><code>&lt;div class=&quot;accordion&quot; id=&quot;accordionExample&quot;&gt;
    &lt;div class=&quot;card&quot; *ngFor=&quot;let grocery of groceryList;trackBy:trackByCode; index as index;&quot;&gt;
      &lt;div class=&quot;card-header&quot; [id]=&quot;'grocery1'+index&quot;&gt;
        &lt;h5 class=&quot;mb-0&quot;&gt;
          &lt;button class=&quot;btn btn-link&quot; type=&quot;button&quot; attr.data-toggle=&quot;collapse&quot; [attr.data-target]=&quot;'#grocery2'+index&quot; attr.aria-expanded=&quot;false&quot; [attr.aria-controls]=&quot;'grocery2'+index&quot;&gt;
            {{grocery.recipeName}}
          &lt;/button&gt;
          &lt;sup&gt;
            &lt;button type=&quot;button&quot; class=&quot;close&quot; aria-label=&quot;Close&quot; (click)=&quot;deleteGroceryRecipeById(grocery._id)&quot;&gt;
            &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
            &lt;/button&gt;
        &lt;/sup&gt;
        &lt;/h5&gt;
      &lt;/div&gt;
  
      &lt;div [id]=&quot;'grocery2' + index&quot; class=&quot;collapse&quot; [attr.aria-labelledby]=&quot;'grocery1'+index&quot; attr.data-parent=&quot;#accordionExample&quot;&gt;
        &lt;div class=&quot;card-body&quot;&gt;
          &lt;ul class=&quot;list-group&quot; id=&quot;filterList&quot;&gt;
            &lt;li class=&quot;list-group-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;list-down-btn&quot; attr.data-toggle=&quot;#subgroup&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-chevron-down&quot;&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul id=&quot;subgroup&quot; class=&quot;list-group&quot;&gt;
                &lt;li class=&quot;list-group-item&quot; *ngFor=&quot;let ingredient of grocery.ingredients&quot;&gt;{{ingredient}}&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;sup&gt;
    &lt;button type=&quot;button&quot; class=&quot;close&quot; aria-label=&quot;Close&quot; (click)=&quot;addToGroceryList('test',['test']) &quot;&gt;
    &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
    &lt;/button&gt;
  &lt;/sup&gt;
  
  &lt;mat-icon svgIcon=&quot;shopping_cart&quot;&gt;&lt;/mat-icon&gt;
  </code></pre>
  <p>Again just to re-iterate the dom updates fine when I call addToGroceryList() from within my grocery component. But when I use a ref to call addToGroceryList from another component the dom doesn't update. Does anyone have any ideas what's going on here?</p>