Displaying Data in Angular
Tags: angular, frontend, typescript, javascript
Published: 2019-11-04 04:15:56

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

<h3>Angular Components & Templates:</h3>

<h2>Displaying Data</h2>

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'


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

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

}
```


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

```html
...
<body>
  <app-root></app-root>
</body>
...
```




<h3>Interpolation</h3>

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:

```javascript
userName = 'Pato';
```

In your app.component.html file:
```html
<h1>{{userName}}</h1>
```

Will render:

```html
pato
```

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.

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

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

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:

```javascript
ng generate component info -it
```

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.

```javascript
ng generate component info
```

<h3>Constructor or variable initialization?</h3>

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

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

  constructor() {
     this.userName = 'Pato';
     this.userLastName = 'Vargas';
  }
}
```

<h3>Showing an array property with *ngFor</h3>

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

First we declare the array:

```typescript
export class AppComponent {
 userName = 'Pato';
 userLastName = 'Vargas';
 users = ['Pato','Wes','Ben'];
}
```

In your app.component.html

```html
<ul>
    <li *ngFor="let user of users">
      {{ user }}
    </li>
</ul>
```

Will display:

```html
*Pato
*Wes
*Ben
```


<h3>Conditional display with NgIf</h3>

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

```html
<p *ngIf="users.length > 0">You have some users in your app</p>
```
<strong>Mixing *ngFor with *ngIf</strong>

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

```html
<ul>
    <li *ngFor="let user of users">
      <p *ngIf="heroe === Pato">{{ user }}</p>
    </li>
</ul>
```

Will render:
```html
*Pato
```


From the Angular Docs:

<i>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.</i>


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


<img src="https://thepracticaldev.s3.amazonaws.com/i/5a87eog40zvcsimuaew4.png" />