{"id":26255,"date":"2018-06-17T10:20:00","date_gmt":"2018-06-17T10:20:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/premier_developer\/?p=26255"},"modified":"2019-02-14T20:18:00","modified_gmt":"2019-02-15T03:18:00","slug":"angular-how-to-simplify-components-with-typescript-inheritance","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/angular-how-to-simplify-components-with-typescript-inheritance\/","title":{"rendered":"Angular How-to: Simplify Components with TypeScript Inheritance"},"content":{"rendered":"

Laurie Atkinson, Senior Consultant,<\/strong> By moving shared functionality to a base component and assigning dependencies inside the body of the constructor, you can simplify child components.<\/p>\n

\n

If your Angular components contain identical or similar functionality and you find yourself copying and pasting that code, it makes sense to implement some class inheritance, which is available with TypeScript<\/a>. And, you can simplify the child components even further by removing the dependencies from the parent constructor arguments and manually assigning them inside the constructor.<\/i><\/p>\n

Create the base component<\/h3>\n

In this example, we have 2 services that are used in the base class and are assigned using dependency injection.<\/p>\n

base.component.ts<\/b><\/p>\n

\n@Component({\n    template: ''\n})\nexport class BaseComponent {\n\n    constructor(protected utilitiesService: UtilitiesService,\n        protected loggingService: LoggingService) {\n        this.logNavigation();\n    }\n\n    protected logError(errorMessage: string) { . . .}\n    private logNavigation() { . . .}\n}\n<\/code><\/pre>\n

<\/p>\n
Inherit child component from base component<\/h3>\n
Note that our child component must pass all parent dependencies into the constructor to extend it.<\/p>\n
child.component.ts<\/b><\/p>\n
\n    @Component({ . . . })\n\n    export class ChildComponent extends BaseComponent {\n    \n    constructor(private childDataService: ChildDataService,\n    \n    utilitiesService: UtilitiesService,\n    \n                  loggingService: LoggingService) {\n    \n    super(utilitiesService, loggingService);\n    \n      }\n    \n    }    \n<\/code><\/pre>\n

<\/p>\n
As you can see, with a substantially complex base class, the child classes will potentially need to include a much longer list of all its parent\u2019s dependencies. And if the parent introduces a new dependency, then all children must be updated. This may be fine, but if you want to simplify the child classes as much as possible, then take a look at this alternative.<\/p>\n
Use a class to store the injector<\/h3>\n
This class will hold the module\u2019s injector. It will be set once and retrieved whenever a component or service needs to get a service dependency.<\/p>\n
<\/b><\/p>\n
app-injector.service.ts<\/b><\/p>\n
\n
\n    import { Injector } from '@angular\/core';\n\n    export class AppInjector {\n    \n    private static injector: Injector;\n    \n    static setInjector(injector: Injector) {\n    \n            AppInjector.injector = injector;\n    \n        }\n    \n    static getInjector(): Injector {\n    \n    return AppInjector.injector;\n    \n        }\n    \n    }       \n<\/code><\/pre>\n

After the module has been bootstrapped, store the module\u2019s injector in the AppInjector class.<\/b><\/p>\n
<\/b><\/p>\n
main.ts<\/b><\/p>\n
\n    platformBrowserDynamic().bootstrapModule(AppModule).then((moduleRef) => {\n        AppInjector.setInjector(moduleRef.injector);\n    });        \n<\/code><\/pre>\n

<\/p>\n
<\/b><\/p>\n
Use this injector class to assign dependencies<\/h3>\n
Now, we can modify the base component to remove all constructor arguments.<\/p>\n
<\/b><\/p>\n
base.component.ts<\/b><\/p>\n
\n    @Component({\n        template: ''\n    })    \n    export class BaseComponent {    \n        protected utilitiesService: UtilitiesService;    \n        protected loggingService: LoggingService;\n    \n    constructor() {    \n            \/\/ Manually retrieve the dependencies from the injector    \n            \/\/ so that constructor has no dependencies that must be passed in from child    \n            const injector = AppInjector.getInjector();    \n            this.utilitiesService = injector.get(UtilitiesService);    \n            this.loggingService = injector.get(LoggingService);    \n            this.logNavigation();\n    \n        }\n    \n        protected logError(errorMessage: string) { . . . }    \n        private logNavigation() { . . . }\n    }         \n<\/code><\/pre>\n

<\/p>\n
Inherit child component from base component<\/h3>\n
Now the child component only needs to use dependency injection for its own dependencies. <\/p>\n
child.component.ts<\/b><\/p>\n
\n    @Component({ . . . })\n    export class ChildComponent extends BaseComponent {\n    \n    constructor(private childDataService: ChildDataService) {    \n        super();    \n      }    \n    }            \n<\/code><\/pre>\n

<\/p>\n
Use the power of polymorphism to maximize code reuse<\/h3>\n
For maximum reuse of code, do not limit the methods in the parent class to merely those with identical implementations. Maybe you can refactor a complex method into pieces where shared logic can be moved into the parent. Maybe a method shares most of the logic with another component, but a few pieces differ between components which could be implemented in each child.<\/p>\n
TypeScript inheritance allows you to override a parent method in the child class and if the parent calls that method, the child\u2019s implementation will be invoked. For example, follow the order of execution shown in this picture, starting with a call to methodA() in ChildComponent.<\/p>\n
\"clip_image002[4]\"<\/a><\/p>\n
Here is a non-trivial code example to illustrate the power of this feature. This application contains many pages, each comprised of a form. All these form pages share the following functionality: <\/p>\n