How to extend any Core Directive, Service, Class of Angular2?

Question

How we can extend or use same defination of Core Directive, Service, Class with few new features?

Lets say we want to create new routerLink directive which only has few more event listerner property and more methods for its class.

One more thing, when I am trying to do so OR try to start,

From angular.io I got reference for this on github "https://github.com/angular/angular/blob/2.0.0-beta.1/modules/angular2/src/router/router_link.ts#L6-L84".

But when I tried to find same file in local downloaded files then found like no such file exist on path(angular2/src/router/router_link.ts).

Whereas there is file exist angular2/src/router/router_link.d.ts but its content are different as compare to github source.

Can anyone also provide guidline for same also as well extend or recreate own directive on top of CORE?

Answer 1

Most of the services/components/etc can all be extended fairly easily.

I extend the RouterOutlet to allow me to use my own Auth service which I inject into the new outlet:

import {Directive, Attribute, ElementRef, DynamicComponentLoader, Inject} from 'angular2/core';
import {Router, RouterOutlet, ComponentInstruction} from 'angular2/router';
import {UserService} from '../../services/user_service';
//import {LoginCmp} from '../login/login';

@Directive({
  selector: 'router-outlet'
})
export class LoggedInRouterOutlet extends RouterOutlet {
  public user: any;
  private parentRouter: Router;

  constructor(_elementRef: ElementRef, _loader: DynamicComponentLoader,
              _parentRouter: Router, @Attribute('name') nameAttr: string, @Inject(UserService) user:UserService) {
    super(_elementRef, _loader, _parentRouter, nameAttr);
    this.user = user;
    this.parentRouter = _parentRouter;
  }

  activate(instruction: ComponentInstruction) {
    var url = instruction.urlPath;
    if (!this.user.publicRoutes[url] && !this.user.isAuth()) {
      // todo: redirect to Login, may be there a better way?
    console.log('Component Redirecting from:', url);
      this.parentRouter.navigate([this.user.baseRoute]);
    }
    return super.activate(instruction);
  }
}

The original is here from Auth0 but is a bit outdated with the alpha/beta switch

As to the source code, I think you are looking for the precompiled code which is written in TypeScript

When you get it from NPM or whatever it's run through the compiler already.

Hope that helps.