Repeated Cards in an Angular 2 Layout

You can't use a Repeater in an ng2+{N} app, but you can use *ngFor and have some fun with repeated cards!

  •            
            
    <ActionBar title="Home">
    </ActionBar>
    
    <StackLayout>
     <GridLayout rows="*,auto,auto">
        <ScrollView>
          <StackLayout>        
            <CardView class="innerCardStyle">
                <StackLayout>          
                  <Label class="header" text="Welcome!"></Label>          
                  <Label textWrap="true" text="Practice Buddy helps students become better musicians, and music teachers mentor their students."></Label>
                </StackLayout>
            </CardView>
            
          <WrapLayout horizontalAlignment="center">
              <CardView radius="5" class="innerCardStyle" width="40%" *ngFor="let student of studentList">
                <StackLayout horizontalAlignment="center">
                  <Label horizontalAlignment="center" class="header" [text]="student.Name"></Label>
                  <Label horizontalAlignment="center" text="Working towards:"></Label>
                  <Image #instrument></Image>
                  <Label horizontalAlignment="center" textWrap="true" [text]="student.Reward"></Label>
                </StackLayout>
              </CardView>
            </WrapLayout>
          </StackLayout>
        </ScrollView>
       </GridLayout> 
     </StackLayout>
    
            
            
          
  •         
    
    import { Component, ElementRef, ViewChild, OnInit} from "@angular/core";
    import { View} from 'ui/core/view';
    import {Router} from "@angular/router-deprecated";
    import {Student} from "../../shared/student/student";
    import {StudentListService} from "../../shared/student/student-list.service";
    
    @Component({
      selector: 'home',
      templateUrl: 'components/home/home.html',
      styleUrls: ['components/home/home-common.css'],
      pipes: [TNSFontIconPipe],
      providers: [StudentListService]
    })
    
    export class HomeComponent implements OnInit {
        studentList: Array = [];
        isLoading = false;
        
        constructor(private _studentListService: StudentListService, private fonticon: TNSFontIconService, private _router: Router) {}
      
        ngOnInit() {
            this.isLoading = true;
            this._studentListService.load()
            .subscribe(loadedStudents => {
                loadedStudents.forEach((studentObject) => {
                this.studentList.unshift(studentObject);
                });        
                this.isLoading = false;
              });
        	  }
          }
    		
    		</code>
      </pre>
    </div>
    </li>
    
     
    </ul>