CODEWITHSUNDEEP
javascriptangularjsangulartypescript
dongx
dongx

Reputation: 1800

How to Add Pre-existing Tags to Select2 in Angular2

HTML:

<select data-placeholder="Skill List" style="width:100%;" class="chzn-select form-control" multiple="multiple">
    <option *ngFor="#skill of allSkills" [ngValue]="skill">{{skill}}
    </option>
</select>

TS:

allSkills = ['Welding', 'Forklifting'];
selectedSkill = ['Welding'];

ngOnInit(): void {
    jQuery('.chzn-select').select2();
}

How to add the selectedSkill initially?

Upvotes: 0

Views: 214

Answers (1)

Maximilian Riegler
Maximilian Riegler

Reputation: 23506

Just add the ngModel binding to the select tag:

<select data-placeholder="Skill List" 
        [(ngModel)]="selectedSkill" 
        style="width:100%;" 
        class="chzn-select form-control" 
        multiple="multiple">

    <option *ngFor="#skill of allSkills" [ngValue]="skill">
        {{skill}}
    </option>

</select>

And in your code:

allSkills = ['Welding', 'Forklifting'];
selectedSkill = allSkills[0]; // or just 'Welding'

ngOnInit(): void {
    jQuery('.chzn-select').select2();
}

Upvotes: 1

Related Questions