How to manually get/set object model from AngularDart component?

Question

Angular manages our objects somewhere in the Scope, but I need to manually set and get the object that controls a component so I can automatically set all the component's info once I download its model from the web through JSON.

Example

@Component (selector: 'my-component')
class MyComponent {
    //component fields
}

As the user interacts with <my-component> it changes its fields. I want to be able to get the whole MyComponent object with its fields to save them like this

MyComponent comp = magicComponentGetterFunc('my-component');
String json = encodeJson (comp); //I do this this redstone_mapper

Can you please add more details (some code) about what you try to accomplish. — Günter Zöchbauer
So you wan't to search the DOM and then get the component class instance from the DOM element. There was a method in earlier Angular classes but only for testing purposes, not for production, I'm not sure whether this is fully supported in Angular.dart 1.0 but I think this was added with one of the recent versions. Doing this is usually an indication that you are using Angular the wrong way though. — Günter Zöchbauer

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-12-10T06:40:43

I think ngProbe can do that.

ElementProbe ep = ngProbe('my-component');

You can can find examples by visiting the links at https://pub.dartlang.org/packages/angular where ngProbe or ElementProbe is mentioned.

The CHANGELOG.md mentions that ngProbe is necessary for animation but the codedoc on the ElementProbe class still states that it is for testing and debugging (see https://github.com/angular/angular.dart/blob/96c0bcc7b6b0c3501b2c4799f425de8cd2e4dc0c/lib/core_dom/view_factory.dart#L259)

To get the JSON you either have to implement a getter/method (for example toJson) that returns the JSON you want or use some of the available serialization solutions (see State of Serialization and Deserialization of JSON in Dart).

If you want to do that this usually indicates that your approach works against the way Angular should be used.

How to manually get/set object model from AngularDart component?

1 Answers