Display data in Angular Elements

Question

I'm using Angular elements to show a angular page inside an existing Spring-Boot project.

I have an inquire button with which I load data from backend in the component typescript file and then display it on the screen. I'm using two different methods for it :

{{data.name}}
Making a form and then doing form.patchValue()

Both are working fine when I run the angular project in local server but when run the page via the Spring boot project (Angular elements), I'm unable to display data via the first method i.e {{data.name}}.

Any idea why?

Code:-

component.ts

data = {}
populateData(data) {
 this.data = data
}

component.html

<input value="{{data.name}}" />

Well, it looks like you are trying to show the property `name` of an array. Which does not exist. Could you check what does `data` contain when you run you app from springboot ? Maybe using a `console.log`. — Nicolas, May 12 '20 at 11:59
Is the API call to your backend returning data successfully when you're running with Spring Boot? — possum, May 12 '20 at 11:59
Hey. And Backend data is coming successfully and I've checked by using console.log. — Harshit Khanna, May 12 '20 at 13:30

score 0 · Answer 1 · answered May 12 '20 at 13:27

0

When you're the Angular project with Spring boot, it's rendered as a HTML page not compiled and run as a server with the angular-CLI, that' why it's not working!

answered May 12 '20 at 13:27

Rebai Ahmed

1,509
1
14
21

So how can I call call the service and display data? – Harshit Khanna May 12 '20 at 14:37

Display data in Angular Elements

1 Answers1