Angular 9 ng-select with laravel 7.2 backend data

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

Post Working:

In this post, I am showing ng-select 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 i @ng-select/ng-select

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

"styles": [
            ...
      "node_modules/@ng-select/ng-select/themes/default.theme.css"
          ],

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

import { NgSelectModule } from '@ng-select/ng-select';
...
imports: [
        ...
  NgSelectModule,
  
  ],

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

...
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));
  
  }
}

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

<ng-select [items]="data[0]" class="custom" placeholder="Select"></ng-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.