Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 select2 with laravel 7.2 backend data.

Post Working:

In this post, I am showing select2 into my Angular 9 application with Laravel 7 backend rest api data.

Here is code snippet and please use carefully:

1. Very first, you need to below command into your Angular 9 application:

npm install select2

npm install jquery --save

 

2. Now you need to add below code into your angular.json file:

"styles": [
       "node_modules/select2/dist/css/select2.min.css",
              ...
          ],
"scripts": [
       "node_modules/jquery/dist/jquery.min.js", 
       "node_modules/select2/dist/js/select2.min.js"
              ...
      ]

 

3. Now you need to add below code into your app.module.ts file:

...
import { HttpClientModule } from '@angular/common/http';
...

imports: [
  
  HttpClientModule,
  ...
  ],

 

4. Now you need to add below code into your app.component.ts file:

...
declare let $: any;
import { HttpClient } from '@angular/common/http';
...


export class AppComponent {
...
data = [];
   constructor(private http: HttpClient) {
   this.http.get('http://localhost/blog/public/api/sample-restful-apis').subscribe(data => {
  
    this.data.push(data);
    console.log(this.data);
   
    
    }, error => console.error(error));
  
  }
   
   ngOnInit() {

    
    $('.js-example-basic-single').select2();

  }

...


}

 

5. Now you need to add below code into app.component.html file:

<select class="js-example-basic-single" name="state" style="width: 150px;" >
  <option *ngFor="let mydata of data[0]" value="{{mydata.firstname}}">{{mydata}}</option>
  
</select>

 

6. Finally, you need to add below code into your laravel api.php file:

Route::get('sample-restful-apis', function()
{
   $data = ['ajay', 'therichpost', 'angular9', 'laravel7', 'restapi'];
   return Response::json($data, 200);
});

 

This is it and if you have any kind of query then please do comment below.

Jassa

Thank you.