Combining data values with their representation on the page is called data binding. You display your data to a user (and collect data from the user) by binding controls in the HTML template to the data properties of the component class.
Here is the step-by-step guide to display data in views.
Step 1: Install the Angular Application
If you do not have the latest Angular CLI, then you need to update your CLI.
Create a new project using the following command.
Go inside the folder and open the folder in Visual Studio Code.
Install the Bootstrap 4 CSS Framework using the following command.
npm install bootstrap --save
Add the bootstrap css file inside the angular.json file.
"styles": [ "src/styles.css", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],
Step 2: Create a Model file.
Inside the src >> app folder, create and Character.ts file and add the following coit.
// Character.ts export default class Character { actor_name: String; character_name: String; gender: String; status: String; }
We will display the Game of Thrones characters and their properties like actor_name, character_name, gender, status, etc.
Create an array of data inside the app.component.ts file.
// app.component.ts import { Component } from '@angular/core'; import Character from './Character'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { characters: Character[] = [ { actor_name: 'Peter Dinklage', character_name: 'Tyrion Lannister', gender: 'Male', status: 'Alive' }, { actor_name: 'Sean Bean', character_name: 'Ned Stark', gender: 'Male', status: 'Dead' }, { actor_name: 'Emilia Clark', character_name: 'Khaleesi', gender: 'Female', status: 'Alive' }, { actor_name: 'Catelyn Stark', character_name: 'Michelle Fairley', gender: 'Female', status: 'Dead' } ]; }
Step 3: Create an HTML view to display data in Angular
The last step is to write the HTML code to display the data. We will first display the data in Table Format.
Write the following code inside the app.component.html file.
<div class="container"> <table class="table table-striped"> <thead> <tr> <th>Actor Name</th> <th>Character Name</th> <th>Gender</th> <th>Status</th> </tr> </thead> <tbody> <tr *ngFor="let character of characters"> <td>{{ character.actor_name }}</td> <td>{{ character.character_name }}</td> <td>{{ character.gender }}</td> <td>{{ character.status }}</td> </tr> </tbody> </table> </div>
In this code, we have used the *ngFor to display the characters individually.
Save the file, go to the terminal, and hit the following command.
ng serve --open
It will open up the browser and open this URL: http://localhost:4200.
See the below output.
We can also display the output in the unordered list. For example, see the following HTML code.
<div class="container">
<ul *ngFor="let character of characters">
<li>{{ character.actor_name }}</li>
<li>{{ character.character_name }}</li>
<li>{{ character.gender }}</li>
<li>{{ character.status }}</li>
</ul>
</div>
It will display the data in the unordered list.
In a real-life scenario, we will mostly display data in table format.
That’s it.
takie
hi how do i display the table data which is align to the table header.
Kathrin
Hi there everyone, it’s my first pay a visit at this web page, and piece of
writing is actually fruitful designed for me, keep up posting such posts.
Mukta
Hey, thanks for this tutorial. Works really well for me! I was confused on how to put data in table.