In this recipe, we'll show you how to work with an Angular component step by step. Components are lightweight, reusable, and self-contained UI widgets that have a single specific purpose. We'll use a component that shows a graphical representation of the job's salary. You can follow along with the code in the project angular_component.

How to do it...

Our app shows job type data in a list, together with a number of stars, to indicate the salary. This is also shown when selecting a job to show its details, as shown in the following screenshot:

A component showing the salary

Its working is explained as follows:

• The following is the startup script angular_component.dart:

  import 'package:angular/angular.dart';
  import 'package:angular/application_factory.dart';
  import 'package:angular_component/salary/salary_component.dart';
  import 'package:angular_component/job_listing.dart';
  
  void main() {
    applicationFactory()
          .addModule(new AppModule())
          .run();
  }
  
  class AppModule...