In the tutorial, Grokonez.com will introduce how to display data in Angular by examples:
- Display data using Interpolation
- Show array items with
*ngFor - Model Data by TypeScript class and display its properties
- Using
*ngIfto insert or remove an element by on boolean expression
Related posts:
– Angular Tutorial
– Angular built-in Slice Pipe | Array SlicePipe + String SlicePipe Example
Overview Angular Display Data
We display data in Angular by binding controls in an HTML template to properties of an Angular component.
We create a Component with list of customers & show data of customers:
Using Interpolation to show Component Properties
The easiest way to display a component property is to bind the property name through interpolation.
-> With interpolation, we put the property name in the view template, enclosed in double curly braces: {{firstCustomer}}.
Example:
import { Component } from '@angular/core'; import { Customer } from './customer' @Component({ selector: 'app-root', template: ` <h2 style="color:blue; background:yellow; max-width:650px">{{title}}</h2> <h3>Customer is : {{customer}}</h3> ` }) export class AppComponent { title = 'How to display data with Angular - from Grokonez.com site'; customer = "Jack"; } |
-> The template show 2 component’s properties using double curly brace interpolation:
<h2 style="color:blue; background:yellow; max-width:650px">{{title}}</h2> <h3>Customer is : {{customer}}</h3> |
Angular automatically pulls the value of the title and customer properties from the component and inserts those values into the browser. Angular updates the display when these properties change.
Initialize Properties using a Constructor
– We could instead declare and initialize the properties using a constructor:
export class AppComponent { title: string; customer: string; constructor() { this.title = 'How to display data with Angular - from Grokonez.com site'; this.customer = "Jack"; } } |
Using *ngFor to display an Array Property
To display a list of customers, we redefine a AppComponent by adding an array of customer’s name:
export class AppComponent { title: string; customers: string[]; firstcustomer: string; constructor() { this.title = 'How to display data with Angular - from Grokonez.com site'; this.customers = ["Jack", "Mary", "Jane", "Davis"]; this.firstcustomer = this.customers[0]; } } |
– Use the Angular *ngFor directive in the template to display each item in the customer list:
template: ` <h2 style="color:blue; background:yellow; max-width:650px">{{title}}</h2> <h3>Customer is : {{firstcustomer}}</h3> <ul> <li *ngFor="let customer of customers"> {{ customer }} </li> </ul> ` |
The *ngFor in the li element is the Angular “repeater” directive. It marks that li element as the “repeater template”.
-> result:
Creating a Data Class
Define data directly inside the component is NOT best practice.
-> We need turn the array of customers into an array of Customer objects.
So we need define a Customer class.
– Using the below commandline to create a new Customer class: ng generate class customer
After that, we have a file: customer.ts, add definition for Customer class:
export class Customer { constructor( public id: number, public name: string, public age: number) { } } |
Customer class has a constructor and 3 properties: id, name, and age.
Now using Customer class in AppComponent:
export class AppComponent { title = 'How to display data with Angular - from Grokonez.com site'; customers = [ new Customer(1, 'Jack', 25), new Customer(13, 'Mary', 31), new Customer(15, 'Jane', 19), new Customer(20, 'Davis', 27) ]; firstCustomer = this.customers[0]; } |
– Update template to display Customer info as below:
template: ` <h2 style="color:blue; background:yellow; max-width:650px">{{title}}</h2> <h3>First Customer is : {{firstCustomer.name}}</h3> <p>All Customers:</p> <ul> <li *ngFor="let customer of customers"> name = {{ customer.name }}, age = {{ customer.age}} </li> </ul> ` |
-> Result:
Show Data with * NgIf Conditional
The Angular *ngIf directive inserts or removes an element based on a truthy/falsy condition.
Add the following paragraph at the bottom of the template:
<p *ngIf="customers.length > 3"><strong>There are many customers!</strong></p> |
When a list customers has more than 3 items, Angular adds the paragraph to the DOM and the message appears.
If there are 3 or fewer items, Angular omits the paragraph, so no message appears.
Note: to improve performance in a big project, Angular *ngIf directive isn’t showing and hiding the message. It is adding and removing the paragraph element from the DOM.
Conclusion
You had learned how to display data in Angular:
- Show data by Interpolation with double curly braces
- Show an array of items by
*ngFor - Using Typescript class to structure data model and display properties of the model
- Using
*ngIfto display a chunk of HTML based on a boolean expression
Happy Learning! See you later!
Having read this, it is so helpful, thanks.
Good explanation for an Angular tutorial. Thanks!
392965 962547Thank you for the auspicious writeup. It in fact was a amusement account it. Appear advanced to much more added agreeable from you! Nevertheless, how could we communicate? 161524
911299 726796I think 1 of your advertisements triggered my internet browser to resize, you may want to put that on your blacklist. 939002
344955 280011Conveyancing […]we like to honor other sites on the internet, even if they arent related to us, by linking to them. Below are some internet sites worth checking out[…] 760591
111647 436053Yay google is my king helped me to uncover this outstanding website! . 97583
561763 215896Hey I was just searching at your site in Firefox and the image at the top with the link cant show up correctly. Just thought I would let you know. 16770
485414 661471Yay google is my king helped me to find this outstanding site! . 922117
945128 963059Glad to be 1 of several visitants on this awesome web site : D. 485183
912767 554307I conceive this internet site holds some real superb information for everyone : D. 804091
962077 788667I adore this information presented and possesses given me some type of resolve forpersistance to succeed i genuinely enjoy seeing, so sustain the excellent function. 394777
464474 654102What a lovely weblog. I will undoubtedly be back once more. Please maintain writing! 429843
804844 293415Fantastic post is going to be linking this on a few websites of mine maintain up the great work. 247356
4149 617377Employing writers exercises such as chunking. They use a lot of websites that contain several creative writing exercises. Writers read an exercise, and do it. 942716
104662 698983great points altogether, you simply gained a brand new reader. 100442
763724 186773What a lovely blog. Ill certainly be back. Please preserve writing! 545214
44400 139510Thank you for sharing with us, I conceive this website actually stands out : D. 798080
376252 813721Intriguing post. Ill be sticking around to hear considerably a lot more from you guys. Thanks! 678963
318129 679034It is difficult to get knowledgeable folks on this subject, but the truth is be understood as what happens you are preaching about! Thanks 455034
849668 360586I like this internet site very a lot, Its a extremely good position to read and receive info . 138150
451891 617443Hi, ich habe Ihre Webseite bei der Suche nach Fernbus Hamburg im Internet gefunden. Schauen Sie doch mal auf meiner Seite vorbei, ich habe dort viele Testberichte zu den aktuellen Windeleimern geschrieben. 316867
638710 437367Ive been absent for a although, but now I remember why I used to enjoy this web site. Thank you, I will try and check back more often. How frequently you update your internet site? 626914
452537 572464Every e-mail you send should have your signature with the link to your web site or weblog. That typically brings in some visitors. 73512
637225 467267As I internet site possessor I think the articles here is really great, regards for your efforts. 17947
472534 674585Hi. Thank you for generating this website . I m working on betting online niche and have found this web site making use of search on bing . Will be positive to appear far more of your content . Gracias , see ya. :S 236624
465054 736046I dont normally check out these types of websites (Im a pretty modest person) – but even though I was a bit shocked as I was reading, I was undoubtedly a bit excited as properly. Thanks for producing my day 500617
413336 253017I got what you intend,bookmarked , very decent internet web site . 875300
72073 538303I was trying to uncover this. Really refreshing take on the data. Thanks a whole lot. 556914
500726 541021Great V I should definitely pronounce, impressed with your site. I had no trouble navigating through all tabs as well as related information ended up being truly easy to do to access. I recently found what I hoped for before you know it in the least. 605098
361686 640171I enjoy searching through and I conceive this web site got some truly helpful stuff on it! . 285398
83781 18804This really is a excellent weblog, would you be involved in doing an interview about just how you developed it? If so e-mail me! 176117
112327 378735We will give deal reviews, deal coaching, and follow up to ensure you win the deals you cant afford to lose. 570686
420219 226992This web page is often a walk-through its the internet you wanted about this and didnt know who to question. Glimpse here, and you will completely discover it. 324517
358442 163239Hello there! I could have sworn Ive been to this weblog before but soon after reading by means of some of the post I realized it is new to me. Anyhow, Im surely pleased I located it and Ill be book-marking and checking back regularly! 163274
982625 882209Hi there for your personal broad critique, then again particularly passionate the recent Zune, and moreover intend this specific, not to mention the beneficial feedbacks other sorts of everyone has posted, will determine if is it doesnt answer you are searching for. 434182
285660 67594Now im encountering a fresh short difficulties Once i cant appear like allowed to sign up for the certain give food to, Now im utilizing search engines like google audience. 649900