<table>
      <tr>
          <td style="font-size: 20px;">CRN</td>
          <td style = "font-size: 20px;" >Name</td>
          <td style ="font-size: 20px;" >Lecturer</td>
          <td style = "font-size: 20px;" >Level</td>
          <td style = "font-size: 20px;" >Days</td>
          <td style = "font-size: 20px;" >Time</td>
      </tr>
      <ng-container *ngFor="let data of courseData">
      <tr>
        <td style="text-decoration: underline;" (click)="crnClicked(data.crn)">{{data.crn}}</td>
        <td>{{data.name}}</td>
        <td>{{data.lecturer}}</td>
        <td>{{data.level}}</td>
        <td>{{data.days}}</td>
        <td>{{data.hours}}</td>

        <button ion-button small  round (click)="addCrn(data.crn)" color="primary" block>+</button>
    </tr>
    </ng-container>
</table>
<div class="row">
    <ion-item>
        <ion-input placeholder="CRN1" type ="number" [(ngModel)]="crn1"></ion-input>
    </ion-item>
    <ion-item>
        <ion-input placeholder="CRN2" type ="number" [(ngModel)]="crn2"></ion-input>
    </ion-item>
    <ion-item>
        <ion-input placeholder="CRN3" type ="number" [(ngModel)]="crn3"></ion-input>
    </ion-item>
    <ion-item>
        <ion-input placeholder="CRN4" type ="number" [(ngModel)]="crn4"></ion-input>
    </ion-item>
    <ion-item>
        <ion-input placeholder="CRN5" type ="number" [(ngModel)]="crn5"></ion-input>
    </ion-item>
</div>