Hands-On Full Stack Web Development with Angular 6 and Laravel 5

Creating the bike-list methods

Let's create the bike-list component:

1. Open ./Client/src/pages/bikes/bike-list/bike-list.component.ts and add the following imports, right after the core import:

 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap/dropdown/dropdown.module';

 // App imports
 import { Bike } from '../bike';
 import { BikesService } from '../_services/bikes.service';

2. Add the following properties after the bike-list.component class declaration:

 // Using Bike Model class
 bikes: Bike[];
 isLoading: Boolean = false;
 public searchText: string;

3. Still on ./Client/src/pages/bikes/bike-list/bike-list.component.ts, let's create the constructor() function:

 constructor(
        private bikeService: BikesService) {}

4. Inside the ngOnInit()