Hice una interfaz de usuario simple que consta de dos componentes (padre e hijo).

Lo que hace la interfaz de usuario es que cuando escribo algunas cosas en el cuadro de entrada del componente Child. El valor cambiará usando ngModel.

El componente hijo funciona bien de esa manera.

// Child Component
@Component({
    selector: 'child',
    template: `
        <p>{{sharedVar}}</p>
        <input [(ngModel)]="sharedVar">
    `
})
export class ChildComponent {
    sharedVar: string;
}

Ahora tengo un componente primario que tengo la intención de usar el mismo valor que Componente secundario.

Agregué el componente secundario a la plantilla principal y uso la inyección de dependencia para llamar al componente secundariosharedVar.

// Parent Component
@Component({
    selector: 'parent',
    template: `
        <h1>{{sharedVar}}</h1>
        <child></child>
    `,
    directives: [ChildComponent],
    providers: [ChildCompnent]
})
export class ParentComponent {
    sharedVar: string;
    constructor(child: ChildComponent) {
        this.sharedVar = child.sharedVar;
    }
}

El problema es que mientras escribo en el cuadro de entrada, el valor en<p> cambia automáticamente mientras el valor en el componente principal<h1> no cambies.