How to hide ion-label from main select page and show it only on select modal header

Issue

Context : I have a list of courses followed by the authenticated user. I want to be able to show all the courses's title in the ion-title header, and show the details relative to the selected course in the page content.

The problem : I want to show only the current course name in ion-title without adding a label, and show the label "Courses List" only on the select modal header.I tried to remove the ion-label,but the select modal displayed without title..

This is what I want : The header :

The select modal :

This is what I get :

When keeping ion-label

When removing ion-label

My code :

<ion-item lines="none">
     <ion-label>Courses List</ion-label>
     <ion-select [(ngModel)]="course.id" (ionChange)="selectcourse($event)">
      <ion-select-option *ngFor="let course of courses" [value]="course.id">
       {{course.title}}
      </ion-select-option>
    </ion-select>
 </ion-item>

Solution

A quick workaround is to set display:none to the ion-label and a placeholder with Course List to achieve what you are looking for.

<ion-item lines="none">
    <ion-label style="display:none">Courses List</ion-label>
    <ion-select placeholder="Courses List" (ionChange)="selectcourse($event)">
       <ion-select-option *ngFor="let course of courses" [value]="course.id">
          {{course.title}}
       </ion-select-option>
    </ion-select>
</ion-item>

First Time:

When one item selected:

Answered By - Brian Ducca