Creating a view

In this recipe, we isolate the code for the filters from previous recipe in its own component: search_job in the folder lib\component\. You can follow along with the code in the project angular_view.

How to do it...

The change we make in this recipe is transparent to the user; the web page stays the same, but the project code is refactored.

1. In our main web page angular-view.html, the <div id="filters"> section is now replaced by the HTML code for the component. Have a look at the following code:

     <search-job
          type-filter="ctrl.typeFilter"
          company-filter-map="ctrl.companyFilterMap">
     </search-job>
   

2. In the constructor of JobListingController, the following code is added:

      for (var company in companies) {
           companyFilterMap[company] = false;
      }

3. The behavior of the component is coded in search_job_component.dart as follows:

   import 'package:angular/angular.dart';
   
   @Component(
       selector: 'search...