I have a parent component which calls another component which renders the modal on the same page. On first load parent component is able to pass the data to child component. but once i go to another page and comes back then data from parent is not getting bound to child components modal.

Steps to follow in plunker:-

1. Enter any value in 1st input box(abcd)
2. Enter modal1 in 2nd textbox
3. click on modal1 button
4. correct value in modal will apeear
5. change value in 1st textbox to abcdef
6. change second text box value to modal2
7. click on modal2 button
8. correct value will come
9. now rechange value in first textbox to abcedfghij
10. change value to modal1 in 1st textbox
11. click on modal1
12. value not getting updated. It should get updated as binding is on the same field and passed to both components.

Plunker:- https://plnkr.co/edit/GNPyL6DzzxCzUD8VZMRF?p=preview

    {
    import {Component,AfterViewInit} from '@angular/core'        
    @Component({
      selector: 'revel2',
      inputs: ['value']
      template: `
      <div id="myModal2" class="small reveal" data-reveal  aria-hidden="true" role="dialog">
    I am Modal2 and I got value from parent component as:-
    {{value}}
    </div>`

    })
    export class ModalComponent2  {
      value:string;
      ngAfterViewInit(): void {
        $('#myModal2').foundation();
        $(window).trigger('open.fndtn.reveal');
      }

    }
    }