Error special characters

[andreyhideki]

I am trying to use the component with special characters! @ # $% ¨ &,.; / But it is causing the error 'Failed to execute' querySelector 'on' Element ':' # scroll-letter- @ 'is not a valid selector "

alpha-list.html

<ion-header>
  <ion-navbar>
    <ion-title></ion-title>
  </ion-navbar>

  <ion-searchbar placeholder="Pesquisar..." (ionInput)="search($event)" (ionClear)="onClear($event)"></ion-searchbar>
</ion-header>

<ion-content class="alpha-list-page" no-bounce>
  <ion-alpha-scroll *ngIf="current"
     [listData]="current"
     key="cod"
     [itemTemplate]="alphaScrollItemTemplate"
     [currentPageClass]="currentPageClass"
     [triggerChange]="triggerAlphaScrollChange">

   </ion-alpha-scroll>

</ion-content>

alpha-list.ts

import {Component} from '@angular/core';
import * as _ from 'lodash';

@Component({
  selector: 'alpha-list-page',
  templateUrl: 'alpha-list.html'
})
export class AlphaListPage {
  aa:any;
  currentPageClass = this;

  current: any;
  listContatos: any;

  //<ion-item (click)="currentPageClass.onItemClick(item)">
  alphaScrollItemTemplate: string = `
    <ion-item >
      <ion-checkbox [checked]="item.selected" (ionChange)="currentPageClass.change($event, item)" ></ion-checkbox>
      <ion-label>
        {{item.cod}}
      </ion-label>
    </ion-item>
  `;

  triggerAlphaScrollChange: number = 0;

  constructor() {
    this.carrega();
  }
  
  change(event, item){
    console.log(item);
    item.selected = event.checked;
    console.log('cod: ' + item.cod + ' selected: ' + item.selected);

    for (var i = 0; i < this.listContatos.length; i++) {
      //var element = this.listContatos[i];
      if (this.listContatos[i].cod === item.cod) {
        this.listContatos[i].selected = item.selected;
      }
    }

  }

  carrega(){
    this.aa = [];
     for (var i = 0; i < 100; i++) {
      this.aa.push({cod : i.toString(), selected : false});
    }

    this.aa.push({cod : "Aa1", selected : false});
    this.aa.push({cod : "Aa2", selected : false});
    this.aa.push({cod : "Aa3", selected : false});
    this.aa.push({cod : "BB", selected : false});
    this.aa.push({cod : "CC", selected : false});
    this.aa.push({cod : "DD", selected : false});
    this.aa.push({cod : "#", selected : false});
    this.aa.push({cod : "!", selected : false});
    this.aa.push({cod : "@", selected : false});
    this.aa.push({cod : ".", selected : false});
    this.aa.push({cod : ",", selected : false});
    this.aa.push({cod : ";", selected : false});
    
    this.current = this.aa;
    this.listContatos = this.aa;
  }

  search(ev: any) {
    console.log("SEARCH");
    this.current = this.listContatos;

    console.log(ev.target.value);
    let val = ev.target.value;
    if (val && val.trim() != '') {
      this.current = this.current.filter((item) => {
        return (item.cod.toLowerCase().indexOf(val.toLowerCase()) >= 0);
      });
    }
  }

  onClear(clearEvent) {
    console.log("ONCLEAR");
    this.current = this.listContatos;
  }
}

[rossmartin]

Sorry its taken me awhile to get to this I'll look into it.

[rossmartin]

This issue is fixed in v1.1.2, thanks.