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

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

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: – Angular Tutorial – Angular built-in Slice Pipe | … Continue reading "Display Data in Angular (6,7,8) Tutorial with Examples"

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

angular

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.

Angular 11 Facebook Social Login Example

Angular 11 login with facebook. In this tutorial, you will learn how to login with facebook in angular 8/9/10/11 app.

Angular 11 Google Social Login Example Tutorial

Angular 11 google login example. In this tutorial, you will learn how to integrate google social login in angular 11 app.