Angular + Vaadin 10 Frontend

Flow
1

Hi,

I have a small test project, I just wanted to test if angular and vaadin 10 frontend can work together.
I have basically good results, but I could not make the grid work:

I have in my controller ts file (this is coming from the vaading-grid html examples, from the official documentation):

users = [
{“name”: “John”, “surname”: “Lennon”, “role”: “singer”},
{“name”: “Ringo”, “surname”: “Starr”, “role”: “drums”}
];

in my html file I have:

         <vaadin-grid items='{{users}}'>
              <vaadin-grid-column>
                <template class="header">Index</template>
                <template>[[index]

]


Name
[[item.name]
]


Surname
[[item.surname]
]


Role
[[item.role]
]

The grid shows, but it’s empty, if I use the code exactly from the sample page:

            <vaadin-grid items='[{"name": "John", "surname": "Lennon", "role": "singer"},{"name": "Ringo", "surname": "Starr", "role": "drums"}]

'>

Index
[[index]
]


Name
[[item.name]
]


Surname
[[item.surname]
]


Role
[[item.role]
]

Then it works.

I tried a lot of different things, but I could not make it work. What is the correct way, to feed items to the vaadin-grid from angular?

Thank you very much!

2

Property bindings work differently in Angular than in Polymer. The official docs (on vaadin.com) often use the Polymer binding syntax (items="[[users] ]").

Use [items] ="users" in Angular components.

3

Hello Marton,

I too am experimenting with Vaadin 10, but not angular as yet.
Could you host your sample on GitHub?

Thanks
Jeevan.
(mine is hosted at https://github.com/jnsunkersett/VaadinSpringBoot-LDAP)

4

Hi Jeevan,

I don’t have anything to publish yet, I will try to prepare something, but in the meantime you can try what I did:

I forked basically the following repo:

https://github.com/maximegris/angular-electron

This is quite a good basis. Then you can add vaadin frontend if you follow the steps here:
https://github.com/vaadin/base-starter-angular

I mean the steps under the section: Recreating this project.
It worked me, and then I also tried it out without bower, it works also with the following:

npm i @vaadin/vaadin-button --save
import ‘@vaadin/vaadin-button/vaadin-button.js’;

Cheers,
Marton