Angular Select Templating Example

By default the select takes the item.text and item.value of the data array items and populates the select. Besides the basic text/value interpretation you can write custom templates to render any custom markup as a scrollable list.

With the help of the itemTemplate option you can write a custom template where any data field can be used. You'll also want to make sure that the itemHeight is set accordingly.

Get started with this example

Preview in full screen

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, setOptions  } from '@mobiscroll/angular';

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {
  myData = [
    {
      text: 'Mercury – Act 1',
      year: '2021',
      artist: 'Imagine Dragons',
      value: '56243',
      img: 'Mercury_Act_1',
    },
    {
      text: 'Divide',
      year: '2017',
      artist: 'Ed Sheeran',
      value: '18659',
      img: 'Divide',
    },
    {
      text: 'Evolution',
      year: '2018',
      artist: 'Disturbed',
      value: '88459',
      img: 'Evolution',
    },
    {
      text: 'Future Nostalgia',
      year: '2020',
      artist: 'Dua Lipa',
      value: '65422',
      img: 'Future_Nostalgia',
    },
    {
      text: 'Blue Banisters',
      year: '2021',
      artist: 'Lana Del Rey',
      value: '67111',
      img: 'Blue_Banisters',
    },
    {
      text: 'Human',
      year: '2021',
      artist: 'OneRepublic',
      value: '60589',
      img: 'Human',
    },
    {
      text: 'Kamikaze',
      year: '2018',
      artist: 'Eminem',
      value: '42122',
      img: 'Kamikaze',
    },
    {
      text: 'Simulation Theory',
      year: '2018',
      artist: 'Muse',
      value: '80040',
      img: 'Simulation_Theory',
    },
    {
      text: 'The Nothing',
      year: '2019',
      artist: 'Korn',
      value: '46611',
      img: 'Nothing',
    },
  ];
}

<mbsc-page>
  <mbsc-select
    [data]="myData"
    display="anchored"
    [itemHeight]="64"
    label="Albums"
    [itemTemplate]="itemTemp"
    labelStyle="stacked"
    inputStyle="box"
    placeholder="Please select..."
  ></mbsc-select>
  <ng-template #itemTemp let-item>
    <div class="md-item-template">
      <img class="md-item-template-img" alt="Album" [src]="'https://img.mobiscroll.com/demos/' + item.data.img + '.png'" />
      <div class="md-item-template-title">
        <span>{{item.data.text}}</span>
        <span class="md-item-template-year">{{' (' + item.data.year + ')'}}</span>
      </div>
      <div class="md-item-template-artist">{{'by ' + item.data.artist}}</div>
    </div>
  </ng-template>
</mbsc-page>

.md-item-template {
  padding: 10px 10px 10px 54px;
  position: relative;
  text-align: left;
  line-height: normal;
}

.md-item-template-img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 4px;
}

.md-item-template-title {
  font-weight: 600;
  font-size: 15px;
  line-height: 24px;
}

.md-item-template-artist {
  font-size: 14px;
  opacity: 0.8;
  line-height: 20px;
}

.mbsc-scroller-wheel-item-2d .md-item-template {
  transform: scale(1.05);
}