-1

We have a lot component interaction in my project through @Input and @output annotations. With the recent upgrade from angular 9 & 10 from angular 8 am facing few errors on passing the value to the @input annotation:

<mc-header-bar [(headerModel)]="headerModel" ></mc-header-bar>

Error message : Type 'Event' is not assignable to type 'HeaderBar'

headerModel looks like below:

 headerModel: HeaderBar = new HeaderBar('Home', '', false, '', false);

In angular 8 this code has no issue and used to work fine. when i remove two way binding to one way binding i dont see the error.

[(headerModel)]="headerModel" -----> [headerModel]="headerModel"

is two way binding [()] won't work on passing to @input now ?

@Component({
  selector: 'mc-header-bar',
  templateUrl: './header-bar.component.html',
  styleUrls: ['./header-bar.component.scss']
})
export class HeaderBarComponent implements OnInit, AfterViewInit, OnDestroy {

  /**
   * Input model for displaying the header bar
   */
  @Input() headerModel: HeaderBar;

Help Appreciated !

Pradeep
  • 1,192
  • 2
  • 12
  • 30
  • I upgraded many projects from angular 7 to 10 and didn't found a problem like it are you sure you don't have another issue? By the way, The error message is not related to html or binding. can you provide HeaderBar interface? – IsraGab Nov 18 '20 at 22:42
  • I have the similar issues when for example I have some persistence component with basic functionality that extends by other components which used as child. So when I try to bind value from parent to persistence it doesn’t work. And Angular already had open issues – Oleksii Pavlenko Nov 18 '20 at 22:49
  • headerModel: HeaderBar = new HeaderBar('Home', '', false, '', false); – Pradeep Nov 18 '20 at 22:59
  • @IsraGab i updated the question with some more info – Pradeep Nov 18 '20 at 23:04
  • @IsraGab Do you know ngModel 2 way binding is not allowed in angular9 ,10 ? – Pradeep Nov 20 '20 at 00:17

1 Answers1

0

yes two way binding not work with passing from parent to child for the change from child you need to handle event from child to parent template and this way you can detect change from child to parent

ravipatel
  • 74
  • 9