DEV Community

loading...
Cover image for Displaying Data in Angular

Displaying Data in Angular

Pato
Google Developer Expert on Angular and Web Technologies | Auth0 Ambassador | Media Developer Expert for Cloudinary | Twilio Champ | Technical Coach at SpringBoard | Google Women Techmaker
Updated on ・3 min read

According to the official Angular docs, displaying data falls under the category of Angular Components & Templates.

Angular Components & Templates:

Displaying Data

If you are new to Angular, one of your first questions will be: How do I display my data on the website? There are a few ways to do so. I'm going to talk about them here.

The @Component decorators will help us specify the 'nickname' of the component, in our example it is: 'app-root'

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
...
})
export class AppComponent {

}
Enter fullscreen mode Exit fullscreen mode

In order for use to make use of this component HTML we have to inject it into the index.html file as followed:

...
<body>
  <app-root></app-root>
</body>
...
Enter fullscreen mode Exit fullscreen mode

Interpolation

When you declare a variable in your TS file, you can show the value in the HTML by using Interpolation. This technique will look like this:

E.g

In your app.component.ts file:

userName = 'Pato';
Enter fullscreen mode Exit fullscreen mode

In your app.component.html file:

<h1>{{userName}}</h1>
Enter fullscreen mode Exit fullscreen mode

Will render:

pato
Enter fullscreen mode Exit fullscreen mode

You can also make the use of templates instead of using the HTML file.

Your app.component.ts file will look like this if you are using templates.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{userName}}</h1>
    <h2>{{userLastName}}</h2>
    `
})
export class AppComponent {
 userName = 'Pato';
 userLastName = 'Vargas';
}
Enter fullscreen mode Exit fullscreen mode

Angular is in charge of watching the value of the variables. If the value changes, the HTML will be updated.

By default when you create a component, it uses a template file 'xxx.html' but if you want change the default to start using inline template, you have to do the following when creating a component:

ng generate component info -it
Enter fullscreen mode Exit fullscreen mode

Where 'info' is the name of the component. If you don't want to override the default behavior, just run the following to create the component with a template file.

ng generate component info
Enter fullscreen mode Exit fullscreen mode

Constructor or variable initialization?

You don't always have to initialize the variables when you declare them; you can initialize them in the constructor().

export class AppComponent {
  userName: string;
  userLastName: string;

  constructor() {
     this.userName = 'Pato';
     this.userLastName = 'Vargas';
  }
}
Enter fullscreen mode Exit fullscreen mode

Showing an array property with *ngFor

Imagine you want to display the values inside of an array.

First we declare the array:

export class AppComponent {
 userName = 'Pato';
 userLastName = 'Vargas';
 users = ['Pato','Wes','Ben'];
}
Enter fullscreen mode Exit fullscreen mode

In your app.component.html

<ul>
    <li *ngFor="let user of users">
      {{ user }}
    </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Will display:

*Pato
*Wes
*Ben
Enter fullscreen mode Exit fullscreen mode

Conditional display with NgIf

The following code will display the message if we have more than 0 users:

<p *ngIf="users.length > 0">You have some users in your app</p>
Enter fullscreen mode Exit fullscreen mode

Mixing *ngFor with *ngIf

The following code will display the name of the user only if the users name is 'Pato':

<ul>
    <li *ngFor="let user of users">
      <p *ngIf="heroe === Pato">{{ user }}</p>
    </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Will render:

*Pato
Enter fullscreen mode Exit fullscreen mode

From the Angular Docs:

Note: Angular isn't showing and hiding the message. It is adding and removing the paragraph element from the DOM. That improves performance especially in larger projects when conditionally including or excluding big chunks of HTML with many data bindings.

Official docs for this topic: https://angular.io/guide/displaying-data

Discussion (2)

Collapse
padamban profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Padamban

I understand that you want to document your studies, but in my opinion you are just bloating the #angular feed with bellow-beginner level content.

Collapse
devpato profile image
Pato Author • Edited

as far as I know there's not such a thing that doesn't allow me to post bellow beginner level content. :) maybe beginner stuff to you, but for some people who are new to angular is helpful.