Topic: How to reinitialize Angular Material select?
Jaroslav Kaštura pro asked 7 years ago
Adrian Sawicki free answered 7 years ago
Okay here is the example and it's using firebase.
1. First of all, we have to add HttpModule, if we don't have it imported in our app.module.
2. Now we should create a provider, which will let us get Data from our server.
import { Injectable } from '@angular/core'; import { Headers, Http } from '@angular/http'; import 'rxjs/Rx';import { Response } from '@angular/http'; @Injectable() export class ServerService { constructor(private http: Http) {} getOptions(){ return this.http.get('https://udemy-6c044.firebaseio.com/data.json') .map( (response: Response) => { const data = response.json(); return data; }); } }
3. Now we should add our newly created provider to our app.module. What is important here is to add it to the providers after you import it.
4. The next step will be adding what we've just created to our app.component.ts (for example, because as you probably can guess we can use it anywhere where we want now).
I will only change one place in our select, based on this you can do rest on your own. What we need is a function which will be using our provider.
import { Component, OnInit } from '@angular/core'; import { ServerService } from './server.service'; @Component({ selector: 'mdb-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'] }) export class AppComponent implements OnInit{ optionsSelect: Array; optionsAfterUpdate: Array; ngOnInit() { this.optionsSelect = [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, ]; } constructor(private serverService: ServerService) {} onGet() { this.serverService.getOptions() .subscribe( (options: any[]) => { this.optionsAfterUpdate = options; this.optionsSelect[0].label = this.optionsAfterUpdate[0].name; }, (error) => console.log(error) ); } }
5. Now we should create HTML template to check if everything is working properly. A bit of bootstrap to see everything correctly and our ng-select + button to trigger our getMethod
.
<div class="row">
<div class="col-md-6">
<mdb-ng-select [options]="optionsSelect" placeholder="Choose your option"></mdb-ng-select>
<label>Example label</label>
</div>
</div>
<button (click)="onGet()">Select options</button>
6. Now when you check your select before clicking the button with a onGet
function you have default values. After you click the button 'select options' your first option should change into 'FETECHED...' - if you will try using it with my 'learning' firebase.
Sorry for the indentation, We will fix forum so it will be more 'code friendly' :).
Adrian Sawicki free answered 7 years ago
Jaroslav Kaštura pro commented 7 years ago
Hi, have you some example, please?riccy pro commented 7 years ago
somehow this doesn't really work in my application...Magdalena Obalska free answered 7 years ago
Jaroslav Kaštura pro commented 7 years ago
Hi Magdalena, this is a basic functionality, I cannot work without it :(FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No