ngFor
is a structural directive in Angular that allows you to iterate over a collection, such as an array or object, and generate HTML elements for each item in the collection.
The ngFor
directive is often used in combination with the *ngFor
syntax, which is a shorthand way of declaring the directive in an HTML template.
Here is an example of using ngFor
to iterate over an array of strings and display each string in a list:
html<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
In the above example, items
is an array of strings defined in the component class. The *ngFor
directive is used to iterate over the items
array and generate an <li>
element for each string in the array.
You can also use ngFor
with objects by using the keyvalue
pipe to iterate over the key-value pairs in the object. For example:
html<div *ngFor="let item of myObject | keyvalue">
Key: {{ item.key }}, Value: {{ item.value }}
</div>
In the above example, myObject
is an object defined in the component class, and the keyvalue
pipe is used with ngFor
to iterate over the key-value pairs in the object and display them in the template.
Comments
Post a Comment