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

Answer 2

The communication between components in angular can be done by several ways:

• Two way data binding/ Input & Output events/ via a service ...
• Client side state (using ngrx )

Let's keep our component so simple, we assume that your application is not subject of state to use NGRX tool (which is recommended for big and complex angular application).

First, your component "app-search-bar" should display for example an input text with a button, the click on the button will fire an event in the parent component in order to get filtered search results to display in the page:

export class SearchBarComponent implements OnInit {
  searchText = '';
  @Output() onSearch = new EventEmitter<boolean>();
  constructor() { }
  ...

  fireSearch() {
   this.onSearch.emit(this.searchText);
  }

}

And the html of the component "app-search-bar" looks like this:

<input type="text" [value]="searchText">
<button (click)="fireSearch()">Search</button>

Finally, in the parent container you have to check the event of "onSearch" with the provided content to filter the data and display them anyway in the page:

    <app-search-bar (onSearch)="onSearch($event)"></app-search-bar>
    <table>
     <thead>
       <tr> 
        <th>First column</th>
       </tr>
      </thead>
      <tbody *ngIf="data">
       <tr *ngFor="item in data">
        <td>{{ item.columnValue }}</td>
       </tr>
      </tbody>
    </table>

And in the typescript class of the parent component, you have to implement the event like this:

export class ParentComponent implements OnInit {
  data;
  ....

  onSearch(content: string) {
   // do some staff here to filter the data and assign it to the property "data"
   this.data = ....;
  }

}

This is a very basic example which help you understanding more about the communication of a component with its container via Output events.

I recommend you to follow the official documentation of Angular which will guide you to develop a sample app and help you understand all the great features of Angular framework.