How to access a AngularDart components attribute (NgOneWay) outside of the component, eg. on the page it is in?

0
votes

Here is a AngularDart component in a page.

<body>
<testcomponent></testcomponent>
  <p>Should have value {{testcomponent.test}}</p>
</body>

The component has a NgOneWay of

@NgOneWay("test")
String test = "HELLO";

This does not work as no value is shown on the page. The component can show its NgOneWay within the components HTML but I wish to access it outside of the components HTML on the page where the component is used.

Is there any way to show the components NgOneWay on the page in which the component is being used?

Here is my test code. http://www.topazbooking.com/test2.zip

I am using Dart 1.5.1

Ok I understand its not a good practice, it creates a dependancy between the page using the component and the component itself. The problem I have is that I use some javascript which doesn't work within the component, that's a different problem ... I shouldn't explain here but I was trying to use the view only and not component as my js worked in the view but not in the component.

2
dartangular-dart

2 Answers

2
votes

In short : No you can't get the attribute outside the component, because component is not make to do this

In Angular Dart, Component need to be see as a black box that you can compose like lego to create a structured application. You can't use a part of a piece of lego somewhere else.

For you information NgOneWay, NgAttr and NgTwoWay are here to interact with your component but as HTML attribute.

A little example:

<body>
<testcomponent test="Hi friend"></testcomponent>
</body>

But you can get your attribute inside the component

testcomponent.html

<div>
     <p>Should have value {{testcomponent.test}}</p>
</div>

If you really want to get the behavior that you want, you need to use Controller

Note: You can trick if you want by adding static value. but is not the good way to do it

1
votes

The best way I've found to handle this type of situation is to map a value-change handler on the component. In your case, you'd map a on-test-change attribute.

<testcomponent on-test-change="ctrl.testChangeHandler"></testcomponent> <p>Should have value {{ctrl.testValue}}</p> </body>

The testChangeHandler method would presumably be a function that accepts a string. testcomponent would call the on-test-change handler whenever the test value is updated. The parent component would then set testValue within the handler. As mentioned in another answer, this would require a parent component.

The nice thing about this solution is it keeps component completely decoupled, which is always a good thing!