I want to integrate angular component into vaadin.
Is there any way to do ?
Actually I have created angular project for diagram using the GO js but now i need to perform some action in vaadin side when user perform clicks in button than it should open the vaadin component.
Basically it’s a two way communication. From Angular to Vaadin and Vaadin to Angular.
Hi Marcus, I found the video really useful and have integrated paper-input-place (which is on the directory and provides a Google place dropdown [https://vaadin.com/directory/component/mlisookpaper-input-place]
(https://vaadin.com/directory/component/mlisookpaper-input-place)) into Vaadin 18 - up to a point. I have been able to show the component and have added a ChangeEvent using your model. Where I am stuck is where the Component returns an object or expects an object. ALl ther examples I have seen are for single string properties/.
e.g. paper-input-place returns a latLng object:
latLng
latLng is a read only property which returns an object after the user selects a place from the prompt.
{
"lat": 40.7829796,
"lng": -73.95897059999999
}
and value is also an object:
{
"search": "Guggenheim Museum, 5th Avenue, New York, NY, United States",
"place_id": "ChIJmZ5emqJYwokRuDz79o0coAQ",
"latLng": {
"lat": 40.7829796,
"lng": -73.95897059999999
}
}
I note there is a getElement().setPropertyBean() and getElement.setPropertyJson() but not the equivalent getter.
Any pointers would be appreciated.
Here is the complete class:
@Tag("paper-input-place")
@NpmPackage(value = "paper-input-place", version = "2.0.1")
@JsModule("paper-input-place/paper-input-place.js")
public class PaperInputPlace extends Component {
public PaperInputPlace(String k) {
setKey(k);
setHideError(true);
}
public void setKey(String k)
{
getElement().setProperty("minimizeAPI", true);
getElement().setProperty("apiKey",k);
}
public String getPlace()
{
// this needs to return an object
return getElement().getProperty("place");
}
public void setHideError(boolean h) {
getElement().setProperty("hide-error", h);
}
@DomEvent("input-change")
public static class PlaceChangeEvent extends ComponentEvent<PaperInputPlace>
{
private String value;
public PlaceChangeEvent(PaperInputPlace source,boolean fromClient,@EventData("event.detail.text") String value)
{
super(source,fromClient);
this.value=value;
}
public String getValue()
{
return value;
}
}
public Registration addValueChangeListener(ComponentEventListener<PlaceChangeEvent> listener)
{
return addListener(PlaceChangeEvent.class, listener);
}
}