Step 10 : Create Front-end for your application #4
To improve the display of the data in your application, you will add some components. First, Drag & Drop an "Attr" component into ListContainer -> ForEach -> ListItem -> Label. Set its "Attr name" property to "class" and its "Attr value" property to "ion-text-wrap". The "title" text will now be displayed entirely without ellipsis.
Now, let's add the authors: To do so, Drag & Drop the "Paragraph" component into the "Label" one.
Click "some text" text under it and click the "Text value" property. Double-click the "SC" button, this will display the NgxComponent Source picker. Click the "Show Iterators on current page Sources" (play) top button, then select the "ForEach" entry on the left panel.
Finally, select "authors" on the right panel and click the [OK] button. You can also change the ListHeader text to display something more accurate and dynamic.
Type some text in the input field and the ListHeader text will change accordingly. Click the [SUBMIT] button to display the new data layout.
And this is it ! You know how to integrate SQL data in your application(s).
Click to expand...