Display Data in Angular Example
This article’s goal is to explain how we can display the data in an Angular application. This article will show you the steps to create an app where we can see how to display data in an Angular.
We will use the following technologies.
- NPM
- Angular
Display Data in Angular Example
Install Node JS on your machine in order to create an Angular application.
Install Angular CLI
Install Angular CLI using the following command.
npm install @angular/cli -g
Now, create an Angular project, run the following command in Angular CLI.
ng new angular-frontend-app
It will ask you the following questions…
Would you like to add Angular routing?
Select y and press the Enter key.
Which stylesheet format would you like to use? (Use arrow keys)
Choose CSS and press the Enter key.
After that project will start creating, once project is created then go to the project folder using following command.
cd angular-frontend-app
Now, install the Angular Powered Bootstrap using the following command.
npm install @ng-bootstrap/ng-bootstrap -save
Next, install the Angular Material using the following command.
npm install @angular/material -save
Also, install the Component Development Kit for Angular using the following command.
npm install @angular/cdk -save
Run the project using given below command. Application will open using this URL: http://localhost:4200/
ng serve –open
Create array of data
Create an array of data inside the src >> app >> app.component.ts file.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
title = 'Dymatize Amazon.com Customer Reviews';
/*
Sample Review Data: Dymatize Amazon.com customer reviews
*/
customerReviews: any = [
{
"asin": "B0015QSZMI",
"overall_rating": 4,
"rating": 1,
"comment_count": 0,
"brand": "Dymatize",
"region": "USA",
"month": "Oct",
"year": 2018,
"review_url": "https://www.amazon.com/gp/customer-reviews/R1HR6FR9QVGFI6?ie=UTF8&ASIN=B0015QSZMI",
"body": "When I got the product it was damage and half the protein was out the bag and in the box that it was in. then when I Tried it for the first time it had clumps of gooey stuff and the taste was not the same from when I order form bodybuilding.com in my opinion it was fake stuff to me hope this helps"
},
{
"asin": "B0015QSZMI",
"overall_rating": 4,
"rating": 5,
"comment_count": 0,
"brand": "Dymatize",
"region": "USA",
"month": "Oct",
"year": 2018,
"review_url": "https://www.amazon.com/gp/customer-reviews/R1HRWV1K6UGDEC?ie=UTF8&ASIN=B0015QSZMI",
"body": "AWESOME PRODUCT"
},
{
"asin": "B0014O0E7U",
"overall_rating": 4.3,
"rating": 5,
"comment_count": 0,
"brand": "Dymatize",
"region": "USA",
"month": "Oct",
"year": 2018,
"review_url": "https://www.amazon.com/gp/customer-reviews/R3FUOL8VW0A9R1?ie=UTF8&ASIN=B0014O0E7U",
"body": "Sin sabor para el precio esta bien"
},
{
"asin": "B002GCW026",
"overall_rating": 3.9,
"rating": 5,
"comment_count": 0,
"brand": "Dymatize",
"region": "USA",
"month": "Oct",
"year": 2018,
"review_url": "https://www.amazon.com/gp/customer-reviews/R25G7F0S5J8E3P?ie=UTF8&ASIN=B002GCW026",
"body": "Boy oh boy did I gain weight with this bad boy. I went from 175 to 205 in one month!! Now I have diabetes and hypertension!!! Jk I don’t but Yea good product."
},
{
"asin": "B002N6F2UW",
"overall_rating": 4.4,
"rating": 1,
"comment_count": 0,
"brand": "Dymatize",
"region": "USA",
"month": "Oct",
"year": 2018,
"review_url": "https://www.amazon.com/gp/customer-reviews/R1VMLKHPKNKRRJ?ie=UTF8&ASIN=B002N6F2UW",
"body": "Bad experience"
},
{
"asin": "B002N6F2UW",
"overall_rating": 4.4,
"rating": 3,
"comment_count": 0,
"brand": "Dymatize",
"region": "USA",
"month": "Oct",
"year": 2018,
"review_url": "https://www.amazon.com/gp/customer-reviews/R3ONVKJ1IZHG1U?ie=UTF8&ASIN=B002N6F2UW",
"body": "Overall this is a great brand and a good product. I’ve typically purchased it through bodybuilding.com but due to a better price picked amazon. However, one of the features I most enjoy about this protein (how well the protein powder dissolves into water or almond milk) is completely different this time around. Either a bad batch or bad handling of the product."
},
{
"asin": "B002N6F2UW",
"overall_rating": 4.4,
"rating": 5,
"comment_count": 0,
"brand": "Dymatize",
"region": "USA",
"month": "Oct",
"year": 2018,
"review_url": "https://www.amazon.com/gp/customer-reviews/RKZBFBGG8KISM?ie=UTF8&ASIN=B002N6F2UW",
"body": "It’s one of the good product"
},
{
"asin": "B002N6F2UW",
"overall_rating": 4.4,
"rating": 5,
"comment_count": 0,
"brand": "Dymatize",
"region": "USA",
"month": "Oct",
"year": 2018,
"review_url": "https://www.amazon.com/gp/customer-reviews/R239Q3ITCQA8SR?ie=UTF8&ASIN=B002N6F2UW",
"body": "This is my go to protein for years now I subscribed and get it every two months without thinking about it. Oh and it was cheaper than health store around me. Very happy!"
},
{
"asin": "B002N6F2UW",
"overall_rating": 4.4,
"rating": 5,
"comment_count": 0,
"brand": "Dymatize",
"region": "USA",
"month": "Oct",
"year": 2018,
"review_url": "https://www.amazon.com/gp/customer-reviews/R2AQBG5Q5C09VZ?ie=UTF8&ASIN=B002N6F2UW",
"body": "So far, this has been my favorite protein powder. It tastes great, and I like that it is high protein but low carb and calorie. I drink one mixed with water after my morning workout, and it keeps me satisfied until lunch. Mixing a scoop of peanut powder in is a bonus treat."
},
{
"asin": "B002N6F2UW",
"overall_rating": 4.4,
"rating": 5,
"comment_count": 0,
"brand": "Dymatize",
"region": "USA",
"month": "Oct",
"year": 2018,
"review_url": "https://www.amazon.com/gp/customer-reviews/RSDVV04KJND2L?ie=UTF8&ASIN=B002N6F2UW",
"body": "Love this stuff, been using it for years. Great taste, low carbs, high protein, simply amazing."
},
{
"asin": "B007OLDAIC",
"overall_rating": 4.5,
"rating": 5,
"comment_count": 0,
"brand": "Dymatize",
"region": "USA",
"month": "Oct",
"year": 2018,
"review_url": "https://www.amazon.com/gp/customer-reviews/R17NZ9CWAI3D3?ie=UTF8&ASIN=B007OLDAIC",
"body": "Cinnamon bun flavor is really good! After trying another brands casein Dymatize is in a class by itself"
}
];
}
Now, import the MatCardModule and NgbModule inside the app.module.ts file.
import { MatCardModule } from '@angular/material';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
imports: [
...
MatCardModule,
NgbModule
],
Next, write the following code inside the app.component.css file.
.card {
background:rgba(0,0,0,.04)
}
Also, write the following code inside the src >> styles.css file.
@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";
.title {
text-align: center;
padding: 10px;
font-family: Roboto,"Helvetica Neue",sans-serif;
}
HTML view to display data
We will display the data in Card Format. Write the following code inside the app.component.html file.
<h1 class ="title">{{title}}</h1>
<mat-card class="card" *ngFor="let customerReview of customerReviews">
<mat-card-header>
<mat-card-title>{{customerReview.brand}}</mat-card-title>
<mat-card-subtitle>{{customerReview.month}}, {{customerReview.year}}</mat-card-subtitle>
<mat-card-subtitle>{{customerReview.region}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<ngb-rating [(rate)]="customerReview.rating" max="5"></ngb-rating><pre><b>{{customerReview.rating}}</b> out of 5 stars</pre>
<p>{{customerReview.body}}</p>
</mat-card-content>
<pre>{{customerReview.comment_count}} Comments</pre>
<mat-card-actions>
<a href={{customerReview.review_url}}>Review</a>
</mat-card-actions>
</mat-card>
Save files and go to the browser and you can see the data is displaying in Card format.
Now, we have completed Data Display in Angular Example.
Here is the link for GitHub repository for full working example of Data Display in Angular Example:
Wow really nice and complete article.