Angular 2

Checklists

Adding a component

1. The class

   @Component({ templateUrl: './checkboxes.component.html', selector: 'wu-checkboxes' })

2. Add it to app.module.ts

Adding a page component with navigation

1. Add a component
2. Add it to app.routing.ts
3. TBD

Adding a library

1. Add to /package.json, or npm install --save library-name
2. Run yarn
3. Add /yarn.lock to git
4. You might need to import it in index.d.ts, or use declare namespace/class/function within the component .ts.

Routing

Required parameters

Required parameters are specified in route. They need to be passed, component cannot be displayed properly without them. Example:

{path:"technology-report/:exec", component: TechnologiesReport}

Accessing required parameters

To access parameters in component, inject ActivatedRoute instance into component constructor. Then access parameters in ngOnInit method.

@Component({
    templateUrl: 'technologies.report.html'
})
export class TechnologiesReport implements OnInit {
    private execID: number;

    constructor(private _route: ActivatedRoute) {}

    ngOnInit(): void {
        this._route.params.subscribe((params: {exec: number}) => {
            this.execID = +params['exec'];
        });
    }
}

Passing parameters to router - in component/service Inject Router as dependency into component/service.

Then use

this.router.navigate(['/route', param]);

or

this.router.navigate([`/route/${param}/something/${anotherParam}`]);

Passing parameters in template

<a [routerLink]="['/route', param]">Some link</a>

or

<a [routerLink]="['/route/' + param + '/something/' + anotherParam]">Some link</a>

Optional parameters

Optional parameters are not specified as path of route. They appear in route in form of semi-column separated parameters.

Passing parameters to router - in component/service Inject Router as dependency into component/service.

Then use

this.router.navigate(['/route', {
   param: 'optional',
   param2: 'parameters'
}]);

Passing parameters in template

<a [routerLink]="['/route', {
    firstParam: param,
    anotherParam: anotherParam
}]">Some link</a>

Resolve

Resolve is class which can pre-fetch data before router navigates to specified route. It can also prevent router from navigating. Resolves should be used when navigating to components which cannot be displayed without having proper data. For example group list cannot be displayed without having proper project. Or application list without group. And so on...

Resolve can return either Promise or Observable or any non false value. Observable or Promise resolved to false or scalar false value means routing will be stopped. I think possible return values are too broad and we should use Observable only. complete() method needs to be called on observable before routing proceeds.

Example of resolve class:

import {Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from "@angular/router";
import {Observable} from "rxjs";
import {ApplicationGroup} from "../../windup-services";
import {ApplicationGroupService} from "../../services/application-group.service";
import {NotificationService} from "../../services/notification.service";
import {Injectable} from "@angular/core";

@Injectable()
export class ApplicationGroupResolve implements Resolve<ApplicationGroup> {

    public constructor(
        private _applicationGroupService: ApplicationGroupService,
        private _notificationService: NotificationService,
        private _router: Router
    ) {

    }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<ApplicationGroup|boolean> {
        let id = +route.params['groupId'];

        return new Observable<ApplicationGroup>(observer => {
            this._applicationGroupService.get(id).subscribe(
                applicationGroup => {
                    observer.next(applicationGroup);
                    observer.complete();
                },
                error => {
                    this._notificationService.error(error);
                    this._router.navigate(['/']);
                    observer.next(false);
                }
            );
        });
    }
}

and its definition in route:

{path: "groups/:groupId", component: GroupList, resolve: {
    applicationGroup: ApplicationGroupResolve
}}