Display Data in Angular (6,7,8) Tutorial with Examples
angular
63
Male avatar

loveprogramming viết ngày 08/04/2021

Display Data in Angular (6,7,8) Tutorial with Examples

https://grokonez.com/frontend/angular/angular-8/display-data-in-angular-678-tutorial-with-examples

[no_toc]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 *ngIf to insert or remove an element by on boolean expression

Related posts:

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:

angular-8-tutorial-how-to-display-data---final-results

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-8-tutorial-how-to-display-data---1-results

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:

More: https://grokonez.com/frontend/angular/angular-8/display-data-in-angular-678-tutorial-with-examples

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

444 bài viết.
77 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 6 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 5 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 5 tháng trước
1 0
Bài viết liên quan
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 5 tháng trước
1 0
Male avatar
0 0
https://grokonez.com/springframework/springmvc/angular4springbootcassandracrudexample no_toc]In this tutorial, grokonez shows you Angular Http Cli...
loveprogramming viết 2 tháng trước
0 0
Male avatar
0 0
https://grokonez.com/frontend/angular/angular4firebaseauthemailpasswordauthenticationwithangularfire2emaillogin Angular Firebase Auth Email/Passwo...
loveprogramming viết 2 tháng trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
444 bài viết.
77 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!