Angular 8Angular 9Laravel 7Rest Api

Angular 9 ng-select with laravel 7.2 backend data

angular 9 ng select laravel 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.

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.