Angular5, Взаимодействие между компонентами

В настоящее время прохожу курс Angular5 и после некоторого исследования этой темы я до сих пор не понимаю полностью следующее:

Код:

App.component.html:

      <app-server-element 
      *ngFor="let serverElement of serverElements"
      [element]="serverElement"
       ></app-server-element>

App.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  serverElements = [{type: 'server', name:'Testserver',content:'just a test!'},
                    {type: 'server', name:'Testserver',content:'just a test!'}
];  
   }

сервер-элемент.component.html:

  <p>
    <strong *ngIf="element.type === 'server'" style="color: red">
{{ element.content }}</strong>
    <em *ngIf="element.type === 'blueprint'">{{ element.content }}</em>
  </p>

сервер-элемент.component.ts:

import { Component, OnInit,Input } from '@angular/core';

@Component({
  selector: 'app-server-element',
  templateUrl: './server-element.component.html',
  styleUrls: ['./server-element.component.css']
})
export class ServerElementComponent implements OnInit {
 @Input() element: {type:string, name:string, content:string};
}

Вопрос:

Я немного смущен тем, что делает эта часть:

  *ngFor="let serverElement of serverElements"
  [element]="serverElement"

В моем текущем понимании это цикл for, который перебирает все элементы serverElementsArray. Но тогда что конкретно делает [element]="serverElement"?