CODEWITHSUNDEEP
htmlcssionic-frameworkionic4
Faouzi
Faouzi

Reputation: 1019

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

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 :

enter image description here

The select modal :

enter image description here

This is what I get :

When keeping ion-label

enter image description here

When removing ion-label

enter image description here

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>

Upvotes: 2

Views: 3376

Answers (4)

Zenul_Abidin
Zenul_Abidin

Reputation: 829

The answer by @Gaurav Sekhri is correct but we can make it even simpler by placing the JSON directly inside the interfaceOptions like this:

<ion-item>
  <ion-select placeholder="Select" [interfaceOptions]="{header: 'Courses List'}">
    <ion-select-option value="Course1">Course 1</ion-select-option>
    <ion-select-option value="Course2">Course 2</ion-select-option>
    <ion-select-option value="Course3">Course 3</ion-select-option>
  </ion-select>
</ion-item>

You should also add aria-label with the label name to the <ion-select> element so that screen readers can see it.

Upvotes: 0

Gaurav Sekhri
Gaurav Sekhri

Reputation: 51

You can use the default properties provided by ionic.

In your ts file, declare this:

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

@Component({
  selector: 'app-CoursesComponent',
  templateUrl: 'CoursesComponent.html',
  styleUrls: ['./CoursesComponent.scss'],
})

export class CoursesComponent {

  customActionSheetOptions: any = {
    header: 'Courses List',
  };

}

And then, in your html file:

<ion-item>
  <ion-select placeholder="Select" [interfaceOptions]="customActionSheetOptions">
    <ion-select-option value="Course1">Course 1</ion-select-option>
    <ion-select-option value="Course2">Course 2</ion-select-option>
    <ion-select-option value="Course3">Course 3</ion-select-option>
  </ion-select>
</ion-item>

Upvotes: 5

Rhydian Jones
Rhydian Jones

Reputation: 11

I have found out if you put the ion-label inside the selector tags and make the label 'fixed' using the position property with ionic labels it will do the job.

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

Upvotes: 1

Brian Ducca
Brian Ducca

Reputation: 189

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:

first

When one item selected:

goal

Upvotes: 3

Related Questions