![]() You may have seen this term floating around Angular in a few ways, such as _nghost prefixes on Nodes (ng-host) or the host property in directives. Note how we have id=host, which is our “host” Node for the template to be injected into. querySelector ( ' #myTemplate ' ) let clone = document. We’ll roll back to showing some AngularJS code here, perhaps you’ve done this before or done something similar in another framework/library: So, what is the element? First, let’s take a step back. When using an asterisk ( *) in our templates, we are informing Angular we’re using a structural directive, which is also sugar syntax (a nice short hand) for using the element. So in this next section, we’ll take a deeper dive on ngFor, * and the element to explain in more detail what’s really happening here. This also shares the same syntax as *ngIf, which you’ve likely also seen before. We mentioned earlier in this article that we’d look at understanding what the * meant in our templates. We won’t demonstrate first and last, as it’s fairly obvious from the above how we can hook those up! element The NgFor directive also does far more than just loop and give us a value and index, it can be combined with observables via the async pipe or enhance our rendering performance with the trackBy function we can provide.įor this article, we’ll be including a further ContactCardComponent component in our ( index, contact ) ![]() ![]() NgFor allows us to loop over data and access each value and index - much like a regular Array ForEach. □ Tip: Include the BrowserModule in the root module of your app, as it already includes the CommonModule for us! NgFor is one of the most commonly used Angular directives that comes with Angular’s CommonModule. NgFor does support arrays and array-like objects as well - we’ll explore each approach. Rendering a list of components would be a great use-case for NgFor.Īs Angular is a reactive framework, it’s common to see NgFor being used alongside observables, and so our code examples will also follow a reactive style. In this post you’re going to learn how to use Angular’s NgFor directive to loop over data to render data or components. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |