How can I @Input a complex object into my AngularDart component?

Question

I am creating a (my first!) AngularDart app. I have a List of objects of a class Procedure in a procedure_list_component.dart component (modeled after the sample ToDo app's list component). This is displayed in a MaterialListComponent and it all works fine.

I am using Dart SDK 2.1.0 and AngularDart ^5.2.0.

Now I want to develop a new component to display the details of the selected Procedure. The selection part works fine. My detail component currently looks like this:

@Component(
  selector: 'procedure-item',
  templateUrl: '''
<div>
  {{procedure.packageName}}.{{procedure.name}}
</div>
''',
  directives: [
  ],
)
class ProcedureItemComponent {
  @Input()
  Procedure procedure;
}

The component's usage looks like this:

<div *ngIf="selectedProcedure != null">
    <procedure-item procedure="{{selectedProcedure}}"></procedure-item>
</div>

However, at run time I receive the error:

EXCEPTION: Type 'String' is not a subtype of expected type 'Procedure'.
STACKTRACE: 
dart:sdk_internal 4000:19                                                         check_C
package:tadpole/src/procedure_list/procedure_list_component.template.dart 345:44  detectChangesInternal
package:angular/src/core/linker/app_view.dart 404:7                               detectCrash
package:angular/src/core/linker/app_view.dart 381:7                               detectChanges
package:angular/src/core/linker/view_container.dart 64:21                         detectChangesInNestedViews
package:tadpole/src/procedure_list/procedure_list_component.template.dart 136:13  detectChangesInternal
package:angular/src/core/linker/app_view.dart 404:7                               detectCrash
package:angular/src/core/linker/app_view.dart 381:7                               detectChanges
....many more lines

This error makes me suspect that passing a complex object between components is not supported, or there is some magic syntax for passing them.

I have tried using just "selectedProcedure" and {{selectedProcedure}} which result in compiler errors. Which then makes me think that complex objects are supported in this case.

Yes, my confusion is real.

Looking through the docs I cannot find any mention of whether or not this is possible. Every example I can find simply sends Strings, but never states specifically that only Strings are supported.

Is this really not supported? If it is, what am I doing wrong?

Jonah Williams Jonah Williams · Accepted Answer · 2019-01-11T05:38:51

To pass inputs to a component, you only need to use square brackets around the input name. If you leave them off, Angular attempts to set the input as a String, which doesn't work since it is defined as taking a Procedure.

<div *ngIf="selectedProcedure != null">
    <procedure-item [procedure]="selectedProcedure"></procedure-item>
</div>

How can I @Input a complex object into my AngularDart component?

1 Answers