title: How to refresh parent component after modal component closes
body: <p>I have a component with a table that show rows from database. This component also has a "Add" button.</p>
  
  <p>When I click on this button a modal appears with a form to add a new entry in the database. </p>
  
  <p>I can save the row to the database, but I want to refresh the table in the parent component to show the new added entry.</p>
  
  <p>The code I am using is:</p>
  
  <p>in the parent component I open the modal with:</p>
  
  <pre><code>&lt;div&gt;
      &lt;a href="#responsive-modal" data-toggle="modal" data-target="#responsive-modal" class="btn btn-md btn-add animated flipInX flipInY lightSpeedIn slideInUp" (click)="createAgentie(agentie2)"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt; Add&lt;/a&gt;
      &lt;createagentie&gt;&lt;/createagentie&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>ts:</p>
  
  <pre><code>@ViewChild(CreateAgentieComponent) createAgentie: any = {};
      CreateAgentiee(agentie2: any = {}) {
  
          this.createAgentie.myObject = agentie2;
  
          this.createAgentie.open();
  
  
      }
  </code></pre>
  
  <p>in the child component:</p>
  
  <pre><code>&lt;button type="button" (click)="submit()" class="btn btn-danger waves-effect waves-light" data-dismiss="modal"&gt;Save changes&lt;/button&gt;
  </code></pre>
  
  <p>ts:</p>
  
  <pre><code>submit() {
          this.createagentieService.create(this.myObject)
              .subscribe(x =&gt; {
                  console.log(x);
                  this.myObject.denumire = "";
                  this.router.navigate(['/vizualizareagentii']);
  
              });
      }
  </code></pre>
  
  <p>The problem is that this.router.navigate(['/vizualizareagentii']); which is the parent component's route does nothing. How can I go the parent component and refresh it?</p>