Why can't I pass arrow functions in the angular component properties

Question

other component template:

<app-search-bar [onSearch]="content => onSearch(content)"></app-search-bar>

Error: Parser Error: Bindings cannot contain assignments at column 10 in [content => onSearch(content)]

app-search-bar.component.ts:

...
export class SearchBarComponent implements OnInit {
  searchText = '';
  @Input() onSearch: (content: string) => void;
  constructor() { }

  ngOnInit(): void {

  }

}

I am a newbie to angular, I don’t know the reason, this is not correct, so that the IDE cannot know what attributes the component transmits. Compared with the programming model of reactjs, this is very unfriendly

Answer 1

The template parser allows for basic JavaScript syntax - which can still be used to build up complex statements, but it's advisable to keep it basic

If you need to reference more complex syntax like an arrow function, just assign it to a property on the component and reference that property in the template instead

https://angular.io/guide/template-syntax