Angular 2 select using ngModel and @Input conflict

Question

I have a problem with distributing @Input and selecting from angular stuff. My choice depends on the parent and communication through @Input and @Ouput. When I select an option, I send the value to the parents, and the parents intercept this answer and check if it can change the value.

In the case where the parent pointer points to the children, for some reason it cannot update its value, I do not change the value in the input data of the children. In this case, ngModel in the selection box does not reflect the value of Input.

I need a way to tell my child to return to the original value already present in Input

An example showing how a child interacts with a parent:

@Component({
    selector: 'child',
    template: `
        <md-select placeholder="Périodes" name="Périodes"
            [ngModel]="selected" (ngModelChange)="filterOptionsChange($event, 'periode')">
            <md-option *ngFor="let periode of periodes" [value]="periode">
                Semaine {{periode.id}}
            </md-option>
        </md-select>`
})
export class Child {

    @Input() selected: any;
    @Output() filterChange = new EventEmitter<any>();

    filterOptionsChange(evt, type: string) {
        this.filterResult[type] = evt;
        this.filterChange.emit(this.currentFilter);
    }
}

@Component({
    selector: 'my-parent',
    template: `
        <div>
            <child [selected]="selected" (valueChanged)="validate($event)"></child>
        </div>`
})
export class App {
    selected:any;

    constructor() {
    }

    validate(event) {
        if (true) {
            // do that and change the selected value
        } else {
            //do nothing, and keep the initial selected value
        }
    }
}

Answer 1

, ref , .

https://plnkr.co/edit/YrTTScdjOnFvwUYO1OWR?p=preview

@Component({
    selector: 'child',
    template: 
    `
  <select #el (ngModelChange)="valueChanged.emit($event)" [ngModel]="selected"  [compareWith]="compareFn">
    <option *ngFor="let op of options"  [ngValue]="op">
       {{op.name}}
    </option>
  </select>
  {{selected.name}}
    `
  })
  export class Child {
    compareFn:
        (o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2? o1.id === o2.id: o1 === o2;
    @Input() selected: Object;
    @Output() valueChanged = new EventEmitter<any>();

    options = [
      {id:"1", name:'A'},
      {id:"2", name: 'B'},
      {id:"3", name:' C: Do not allow'},
      {id:"4", name:' D'}
    ];
  }

  @Component({
    selector: 'my-app',
    template: `
      <div>
        <child [selected]="selected" (valueChanged)="valueChanged($event)"></child>
      </div>
    `,
  })
  export class App {
    selected = {id:"1", name: 'A'};

    constructor() {
    }

    valueChanged(value) {
     // keep the previous for 3
     if(value.id === '3') {
       this.selected= Object.assign({}, this.selected);
     }
     else {
        // for all other values take that user selected
        this.selected= Object.assign({}, value);
     }
    }
  }