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 {
}
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>
...
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';
In your app.component.html file:
<h1>{{userName}}</h1>
Will render:
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.
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:
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.
ng generate component info
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';
}
}
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'];
}
In your app.component.html
<ul>
<li *ngFor="let user of users">
{{ user }}
</li>
</ul>
Will display:
*Pato
*Wes
*Ben
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>
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>
Will render:
*Pato
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
Top comments (2)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.