Issue lists and details

The listing component, during its initialization, fetches the issue list by using the IssuesService class. It holds an Observable declared as issues$ which is initialized in the component's ngOnInit() life cycle hook. The listing component needs a reference to the router for navigating to different routes. It also makes use of IssuesService and UsersService for retrieving issues and getting additional information about the user to whom the issue is assigned.

Here's our IssueListingComponent code, present in the issue-listing.component.ts file:

export class IssueListingComponent implements OnInit {
  issues$: Observable<Array<Issue>>;

  constructor(private router: Router,
    private issuesService: IssuesService,
    private usersService: UsersService) { }

  ngOnInit() {
    this.issues$ = this.issuesService.getAll();
  }

  createIssue() {
    this.router.navigate(['/issues/create']);
  }

  editIssue(issue: Issue) {
    this.router.navigate(['/issue'...