Angular - 2.26-Generating lists with ngFor.
Now that we are familiar with directives, let's see the last built-in directive we need for the basics: *ngFor. So far our application has had a button to add a server, but the list of servers stays static - clicking the button does not really grow the visible list. The reason is that we hard-coded two <app-server> elements in the template. *ngFor is the structural directive that solves this by replicating a piece of template for every element of an array.
We start by declaring an array property in the parent component: servers = ['Test server', 'Test server 2'];. Whenever the user clicks "Add server", we push the value of serverName into the array: this.servers.push(this.serverName);. We now have a real, dynamic source of truth - the next step is to render one <app-server> per element.
The *ngFor syntax
<app-server *ngFor="let server of servers"></app-server>replicates the element once per item.serveris a local template variable holding the current array element on each iteration.serversis the class property exposed by the component - any iterable works (arrays, sets, etc.).
The leading star marks ngFor as a structural directive, just like *ngIf. Save the file: the application starts with two server elements (the two initial values), and every click on "Add server" appends a new one. We do not need the server variable yet because we have not learned how to pass data into a child component, but we already see the dynamic list growing on screen.
For now the content of each <app-server> is static because we cannot yet forward the server name to the child. We will fix that in the next section when we dig deeper into components and explore inputs/outputs to communicate between parent and child. Before that we will practise what we have learned with another exercise and define the project we will build throughout the course.