ng-select How to programmatically set a value ?

Topic: ng-select How to programmatically set a value ?

vizmedia pro asked 6 years ago

I miss this opportunity

 this.optionsSelect = [ 
{ value: '1', label: 'Option 1' }, 
{ value: '2', label: 'Option 2',  SELECTED: true }, 
{ value: '3', label: 'Option 3' }, 
];

or

this.optionsSelect[3].selected = true;

How to set the value programmatically ?

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear Michael Nino,

You could try this way:

in *ngFor get index of element, then in mdb-select pass id="{{index}}", and then in forEach method you could add some specific value to your desired mdb-select with desired id.

Please look at my code:

.html:
<div>
<pre><div class="row">

<mdb-select #selects id="{{index}}" [options]="optionsSelect" placeholder="Choose your option"></mdb-select>

<label>Example label</label>

</div>

</div></pre>
</div>
.ts:
<div>
<pre>optionsSelect: Array<any>;

selecty: Array<any> = [1, 2, 3];

@ViewChildren('selects') selects: QueryList<any>;

ngOnInit() {

this.optionsSelect= [

{ value: '1', label: 'Option 1' },

{ value: '2', label: 'Option 2' },

{ value: '3', label: 'Option 3' },

];

}

ngAfterViewInit() {

this.selects.forEach((element) => {

setTimeout(() => {

if (element.el.nativeElement.attributes.id.value == 1) {

element.select(this.optionsSelect[0].value);

} else if (element.el.nativeElement.attributes.id.value == 2) {

element.select(this.optionsSelect[1].value);

} else if (element.el.nativeElement.attributes.id.value == 3) {

element.select(this.optionsSelect[2].value);

}

}, 0);

});

}</pre>
</div>
PS: this setTimeout(()) 0 is needed to avoid getting error, that some values from *ngFor are modified before they are rendered.
PS2: it's important to use two equal signs (==) instead of three (===) in if statements.

Hope it fix your problem.

Best Regards,

Damian

Please insert min. 20 characters.

Dear Michael Nino, You could try this way: in *ngFor get index of element, then in mdb-select pass id="{{index}}", and then in forEach method you could add some specific value to your desired mdb-select with desired id. Please look at my code: .html:

<div class="row">

<div *ngFor="let select of selecty; let index" class="col-md-4 mx-auto my-5">

<mdb-select #selects id="{{index}}" [options]="optionsSelect" placeholder="Choose your option"></mdb-select>

<label>Example label</label>

</div>

</div>

.ts:

optionsSelect: Array<any>;

selecty: Array<any> = [1, 2, 3];

@ViewChildren('selects') selects: QueryList<any>;

ngOnInit() {

this.optionsSelect= [

{ value: '1', label: 'Option 1' },

{ value: '2', label: 'Option 2' },

{ value: '3', label: 'Option 3' },

];

}

ngAfterViewInit() {

this.selects.forEach((element) => {

setTimeout(() => {

if (element.el.nativeElement.attributes.id.value == 1) {

element.select(this.optionsSelect[0].value);

} else if (element.el.nativeElement.attributes.id.value == 2) {

element.select(this.optionsSelect[1].value);

} else if (element.el.nativeElement.attributes.id.value == 3) {

element.select(this.optionsSelect[2].value);

}

}, 0);

});

}

PS: this setTimeout(()) 0 is needed to avoid getting error, that some values from *ngFor are modified before they are rendered. PS2: it's important to use two equal signs (==) instead of three (===) in if statements. Hope it fix your problem. Best Regards, Damian

Add comment

Rafał Rogulski free answered 6 years ago

2 0 Best answer

<p>Hi,</p>
<p> </p>
<p>First, you need to create a reference to your select:</p>
<p><code><ng-select <strong>#myselect</strong> [options]="optionsSelect" placeholder="Choose your option" #myselect></ng-select></code></p>
<p>now you can access to .select() method from template file:<br />
<code><button (click)="myselect.select('2')">Select 2</button></code></p>
<p>or you can get a reference in your component typescript with ViewChild:</p>
<p>import { Component, ViewChild } from '@angular/core';<br />
@Component({selector:'app-root',<br />
    selector:'app-root',<br />
    templateUrl:'app.component.html'<br />
})<br />
export class AppComponent {<br />
  @ViewChild('myselect') myselect;<br />
  optionsSelect:Array<any>;<br />
  constructor() {<br />
    this.optionsSelect= [<br />
      { value: '1', label: 'Option 1' },<br />
      { value: '2', label: 'Option 2' },<br />
      { value: '3', label: 'Option 3' },<br />
    ];<br />
  }<br />
  setNew() {<br />
    this.myselect.select(this.optionsSelect[0].value);<br />
  }<br />
}</p>
<p>Regards</p>

Please insert min. 20 characters.

Hi,

First, you need to create a reference to your select:

<ng-select #myselect [options]="optionsSelect" placeholder="Choose your option" #myselect></ng-select>

now you can access to .select() method from template file:
<button (click)="myselect.select('2')">Select 2</button>

or you can get a reference in your component typescript with ViewChild:

import { Component, ViewChild } from '@angular/core';
@Component({selector:'app-root',
selector:'app-root',
templateUrl:'app.component.html'
})
export class AppComponent {
@ViewChild('myselect') myselect;
optionsSelect:Array<any>;
constructor() {
this.optionsSelect= [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
}
setNew() {
this.myselect.select(this.optionsSelect[0].value);
}
}

Regards

Michael Nino free commented 6 years ago

Using your example above, how do I make #myselect dynamic? I use *ngFor to create a variable number of ng-select. It seems using # is the only way to get a instance of ng-select within the component's typescript.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

vizmedia

Pro User 94Support score
9Questions 15Answers 0Snippets