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.