Use angular component in VAADIN

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.

The easiest approach will be to use [Angular Elements]
(https://angular.io/guide/elements) to turn the component into a standard web component. You can then [import the JS]
(https://vaadin.com/docs-beta/latest/flow/importing-dependencies/importing/) and use the [Element API]
(https://vaadin.com/docs-beta/latest/flow/creating-components/component-basic/) to interact with it.

Here’s a video I recorded a while back about using web components from Java in Vaadin: https://youtu.be/E31ei5zklb8

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);
    }

}