Hey there,
I'm relatively new to working with Angular 6 and currently in the process of building my own website using Angular+NodeJs.
The interface I'm creating consists of 2 sections each containing 3 buttons. When a button is clicked, it triggers a modal that displays a title (corresponding to the button's name) and a body (an array of paragraphs with content). This information, including section title, button names, and modal body, is sent from the node server as a JSON string.
While everything functions properly on the server side, I am facing an issue on the front end. The JSON string is successfully transmitted when the service makes the query, and the button titles are displayed correctly on the screen alongside the modal title. However, the modal body fails to show up.
I am trying to comprehend why the modal title appears correctly, but the modal content does not, even though I believe I have used similar code for both. It seems like there might be a fundamental misunderstanding about databinding on my part.
Here's a snippet of my JSON:
[
{id:1, title: "section title ...", buttons:[
{
id:1,
text:"Button title 1",
paraphs:[
{id:1, content:"paraph1"},
{id:2, content:"paraph2"}
]
},
{id:2, text:"Button title 2"},
{id:3, text:"Button title 3"}
]},
{id:2, title: "Section title 2", buttons:[
{id:1, text:"Button title 1"},
{id:2, text:"Button title 2"},
{id:3, text:"Button title 3"}
]}
]
This is how my component.html looks like:
<!-- Your HTML code here -->And here's a snippet of my component.ts file:
import { Component, OnInit } from '@angular/core';
import { PrestationService} from '../service/prestation.service'
@Component({
selector: 'app-prestation',
templateUrl: './prestation.component.html',
styleUrls: ['./prestation.component.css']
})
export class PrestationComponent implements OnInit {
sections;
modal_title;
paraphs;
constructor(private ps:PrestationService) { }
ngOnInit() {
this.ps.getPrestation().subscribe(
data => this.sections = data
)
}
handleClick(buttonTitle, buttonContent){
this.modal_title = buttonTitle;
this.paraphs = buttonContent;
}
}