angular 2 can't create selectpicker(bootstrap) dynamically

Question

I am trying to create the form of education dynamically. That is when user clicks the button "add education", it will create a form of education for user to fill info. I used the selectpicker from bootstrap for user to select year and month. However, angular2 fail to create selectpicker when loading the education form. If I create selectpicker staticlly, it will work, but not for dynamically. Really want to know what the problem is. The followings are the part of code in relative files:

apply-page.html

<div class="row education">
    <div class="col-md-1 col-xs-12 page-label">
        Education
    </div>
    <div class="col-md-10 col-xs-12 page-label-link">
        <ul class="ul-no-margin">
          <li *ngFor="let education of educations; let i = index">
            <education-form [index]="i" [education]="education" (deleteEvent)="deleteEducation($event)"></education-form>
          </li>
        </ul>
        <a (click)="addEducation()">Add education</a>
    </div>
</div>

education.html

<select class="inline-box selectpicker" data-style="btn-secondary" data-width="auto" tabindex="-1" id="" required="">
    <option value="0">Month *</option>
    <option value="1">Jan</option>
    <option value="2">Feb</option>
    <option value="3">Mar</option>
    <option value="4">Apr</option>
    <option value="5">May</option>                
    <option value="6">Jun</option>
    <option value="7">Jul</option>
    <option value="8">Aug</option>
    <option value="9">Sep</option>
    <option value="10">Oct</option>
    <option value="11">Nov</option>
    <option value="12">Dec</option>
</select>

The new education is showed here in apply-page:

<li *ngFor="let education of educations; let i = index"
    <education-form [index]="i" [education]="education" (deleteEvent)="deleteEducation($event)"></education-form>
</li>

If I remove the "selectpicker" in the class attribute, then select tag works fine but it can't show the beautiful layout from the bootstrap. If I add the "selectpicker" in the class attribute, then the select tag doesn't work. It will show nothing on the screen.

Hope someone can help me solve the problem. Thank you.

no, everytime when user click "add education" button, angular add new element to educations, then <li *ngFor="let education of educations; let i = index"> will show new education. — gogopower
– gogopower, Commented Jul 12, 2016 at 20:09

gogopower · Accepted Answer · 2016-07-12 20:23:59Z

I found out that I didn't include the jQuery module in my education.ts file. The following is the correct code.

education.ts:

import {Component, ViewEncapsulation, Input, Output, EventEmitter} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
// import education class
import {Education} from '../model/education';

declare var jQuery: any;

@Component({
  selector: 'education-form',
  template: require('./education-form.html'),
  host: {
    class: 'education-form'
  },
  encapsulation: ViewEncapsulation.None,
})
export class EducationForm{
    // the vars to store data from parent page
    @Input() index: number;
    @Input() education: Education;

    // the var to invoke an event of parent page
    @Output() deleteEvent = new EventEmitter<number>();


    ngOnInit(): void {
        jQuery('.selectpicker').selectpicker();
    }

    // the function to delete form of education
    deleteEducation(){
        this.deleteEvent.emit(this.index);
    }

}

I added

declare var jQuery: any;

and

ngOnInit(): void {
        jQuery('.selectpicker').selectpicker();
    }

then it works. Remember to include the module using in AngularJS.

Collectives™ on Stack Overflow

angular 2 can't create selectpicker(bootstrap) dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related