Pass event from parent component to child component in AngularDart?

Question

I know how to pass an event from child to parent with StreamController and @Output(), but what if we want to do it the other way around? Also what if our child component is 2 levels down from the parent?

Suppose our template hierarchy looked something like this:

<a>
  <b>
    <c>
    </c>
  </b>
</a>

If we do something in <a>, how do we listen for it in <c>?

Answer 1

The counterpart to @Output is @Input which allows you to pass data down from a parent to a child.

Briefly:

import 'package:angular/angular.dart';

@Component(
  selector: 'a-component',
  template: '''
    <div>
      <h1>{{title}}</h1>
      <p>{{description}}</p>
    </div>
  ''',
)
class MyComponent {
  @Input()
  String title;
  
  @Input()
  String description;
}

Parent Template:

<a-component [title]="'Encyclopedia'" [description]="'Less comprehensive than the internet'"></a-component>

You can read more about it here https://angulardart.xyz/guide/template-syntax#inputs-outputs