ngx-select-dropdown makes page blank

Question

Im trying to use nix-select-dropdown to make a searchable dropdown for store id's. I originally created the page with just a input box and everything worked fine. As soon as I added the ngx-select-dropdown eventing after this tag does not show up nor does the dropdown.

before dropdown is added:

after dropdown is added:

store-setting-view-page.component.html

<H1 align="center">Store Settings Viewer</H1>
<div><label>Store ID: </label><input type="text" aria-label="Store ID"></div>



<label>Store ID: </label>
<div class="col s12 l6">
<ngx-select-dropdown tabindex="0" (change)="changeValue($event)" [multiple]="true" [(ngModel)]="storeSelection"
                   [config]="storeIDDropdownConfig" [options]="stores"></ngx-select-dropdown>
</div>

<div>
<label>MIR Program: </label>
<select [(ngModel)]="mirProgram">
<option value="missed quote">Missed quote</option>
<option value="minutes over">Minutes Over</option>
</select>
</div>
<div>
....

store-setting-view-page-component.ts

import { Component, OnInit } from '@angular/core';
import {SelectDropDownModule} from "ngx-select-dropdown";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";

@Component({
selector: 'app-store-settings-view-page',
templateUrl: './store-settings-view-page.component.html',
styleUrls: ['./store-settings-view-page.component.css']
})

export class StoreSettingsViewPageComponent implements OnInit {
stores:any =[
{
  storeID:"1",
  mirOptIn:"true",
  smsOptIn:"true",
  pushOptIn:"true",
  loyaltyOptIn:"true",
  mirProgram:"minutes over",
  missQuoteTimePromo:"Free Large Pizza",
  minutesOverPromo:"Free Large Pizza",
  minutesOver:"10"
}, {
  storeID:"2",
  mirOptIn:"true",
  smsOptIn:"true",
  pushOptIn:"true",
  loyaltyOptIn:"true",
  mirProgram:"minutes over",
  missQuoteTimePromo:"Free Large Pizza",
  minutesOverPromo:"Free Large Pizza",
  minutesOver:"12"
}
];
storeSelection: any = [];
storeIDDropdownConfig = {search: true, displayKey: 'storeID', limitTo: 3};
mirProgram: any = "minutes over";
data: string[]=["1","2","3"];
constructor() {

}

ngOnInit(): void {
}

search() {

}

changeValue($event: any) {

}
}

score 1 · Answer 1 · answered Jan 04 '22 at 07:23

1

You have a missing " in the template:

<ngx-select-dropdown 
    tabindex="0" 
    (change)="changeValue($event)" 
    [multiple]="true // <-- MISSING " at the end
    [(ngModel)]="storeSelection" 
    [config]="storeIDDropdownConfig" 
    [options]="stores">
</ngx-select-dropdown>

answered Jan 04 '22 at 07:23

Misha Mashina

1,739
2
4
10

It looks like this was an error when copy and pasting to here. Iv also tried using ng-select and get the same issue. – donald esposito-kelley Jan 04 '22 at 13:44

ngx-select-dropdown makes page blank

1 Answers1