This article was written alongside Lars Gyrup Brink Nielsen. He was instrumental in the research and writing of this piece. Go drop him a follow!
In recent years, we've seen frameworks like React and Vue develop utilities to share code that uses lifecycle methods. What does that look like?
I promise this article is about Angular, stick with me on this.
For example, if you wanted to have a component that measures the browser window, you might write some code like so:
React
const App = () => {
const [height, setHeight] = useState(window.innerHeight);
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
function onResize() {
setHeight(window.innerHeight);
setWidth(window.innerWidth);
}
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, []);
return <p>The window is {height}px high and {width}px wide</p>
}
Vue
<!-- App.vue -->
<template>
<p>The window is {{height}}px high and {{width}}px wide</p>
</template>
<script setup>
import {ref, onMounted, onUnMounted} from 'vue';
const height = ref(window.innerHeight);
const width = ref(window.innerWidth);
function onResize() {
height.value = window.innerHeight;
width.value = window.innerWidth;
}
onMounted(() => {
window.addEventListener('resize', onResize);
});
onUnMounted(() => {
window.removeEventListener('resize', onResize);
});
</script>
Like seeing equivical code between multiple frameworks at once? You might like the book I'm writing called "The Framework Field Guide", which teaches React, Angular, and Vue all at once.
This works great for a single component, but what if you want to reuse this window
logic in more than one component?
While you could copy and paste the code between multiple components, or even export functions to setup and take down the event listeners, both of these methods are clunky. This is where the aforementioned Hooks and Composition APIs come into play for React and Vue respectively.
React
const useWindowSize = () => {
const [height, setHeight] = useState(window.innerHeight);
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
function onResize() {
setHeight(window.innerHeight);
setWidth(window.innerWidth);
}
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, []);
return {height, width};
}
const App = () => {
const {height, width} = useWindowSize();
return <p>The window is {height}px high and {width}px wide</p>
}
Vue
// useWindowSize.ts
import {ref, onMounted, onUnMounted} from 'vue';
export const useWindowSize = () => {
const height = ref(window.innerHeight);
const width = ref(window.innerWidth);
function onResize() {
height.value = window.innerHeight;
width.value = window.innerWidth;
}
onMounted(() => {
window.addEventListener('resize', onResize);
});
onUnMounted(() => {
window.removeEventListener('resize', onResize);
});
return {height, width};
}
<!-- App.vue -->
<template>
<p>The window is {{height}}px high and {{width}}px wide</p>
</template>
<script setup>
import {useWindowSize} from './useWindowSize';
const {height, width} = useWindowSize();
</script>
This enables us to use the useWindowSize
logic in more than one component - lifecycle methods and all.
But what about Angular? How can you reuse code logic, including lifecycle methods, without having to copy and paste code?
Answer: A base component class that you extend.
In this article we'll learn:
- What a base component class is
- How to use a base class in Angular
- How to simplify Angular base class usage using an abstract class
- Overwriting lifecycle methods in Angular extended classes
- Using dependency injection with your extended class
- Why you don't want to use base classes with Angular
What is an extension class, anyway?
Let's work off of the assumption that you're familiar with what a class is, but may not be familiar with what class extension or inheretence is.
Very quickly, let's assume that we have this JavaScript class:
class HelloMessage {
message = "Hello";
name = "";
constructor(name) {
this.name = name;
}
sayHi() {
console.log(`${this.message} ${this.name}`);
}
}
const messageInstance = new HelloMessage("Corbin");
messageInstance.sayHi(); // Will log "Hello Corbin"
This class has a few things going on:
- Two properties:
message
andname
- A constructor, with a parameter to set
name
to a new value - A method of
sayHi
When we create an "instance" of this class, it will in turn call the constructor
and give us an object with all of the properties and methods associated with HelloMessage
as an "instance" of that class.
Now, let's say that we want to reuse the sayHi
logic in multiple classes at a time.
Sounds like a familiar problem, doesn't it?
We can create a class that provides the sayHi
method:
class BaseHelloMessage {
message = "Hey there!";
name = "";
constructor(name) {
this.name = name;
}
sayHi() {
console.log(`${this.message} ${this.name}`);
}
}
Now, we can create multiple classes that have the same properties and methods as BaseHelloMessage
by using extends
:
class HelloMessage extends BaseHelloMessage {
}
const helloMsgInstance = new HelloMessage("Corbin");
// Inhereted from "BaseHelloMessage"
helloMsgInstance.sayHi();
class OtherHelloMessage extends BaseHelloMessage {
}
const otherHelloMsgInstance = new OtherHelloMessage("Corbin");
// Also inhereted from "BaseHelloMessage"
console.log(otherHelloMsgInstance.name);
But oh no! message
is set to "Hey there!"
, which isn't what we want for OtherHelloMessage
. Instead, let's overwrite the message
property to be "Hi-a!"
We can easily do this by using an "Override":
// `sayHi` will output "Hey there! Corbin"
class HelloMessage extends BaseHelloMessage {
}
// `sayHi` will output "Hi-a! Corbin"
class OtherHelloMessage extends BaseHelloMessage {
message = "Hi-a!";
}
This works in JavaScript, but TypeScript will give you a small warning:
TS4114: This member must have an 'override' modifier because it overrides a member in the base class 'BaseComponent'.
To solve this, we can simply change OtherHelloMessage
to be:
// `sayHi` will output "Hi-a! Corbin"
class OtherHelloMessage extends BaseHelloMessage {
override message = "Hi-a!";
}
Okay, now that we understand class extensions, let's see how we can use them in Angular!
How to use basic class extension usage in Angular
Let's assume that we're writing the following class in Angular, in order to get the window size and display it to the user:
@Component({
template: `
<p>The window is {{height}}px high and {{width}}px wide</p>
`,
selector: 'app-root'
})
class AppComponent implements OnInit, OnDestroy {
height = window.innerHeight;
width = window.innerWidth;
// This needs to be an arrow function
onResize = () => {
this.height = window.innerHeight;
this.width = window.innerWidth;
}
ngOnInit() {
window.addEventListener('resize', this.onResize);
}
ngOnDestroy() {
window.removeEventListener('resize', this.onResize);
}
}
But still wanted to share this window
size logic between multiple components.
Luckily, we can do this using a traditional Object-Oriented Programming (OOP) method: Create a base class that we extend later.
Let's try this really quick and create a BaseComponent
class:
class BaseComponent implements OnInit, OnDestroy {
height = window.innerHeight;
width = window.innerWidth;
// This needs to be an arrow function
onResize = () => {
this.height = window.innerHeight;
this.width = window.innerWidth;
}
ngOnInit() {
window.addEventListener('resize', this.onResize);
}
ngOnDestroy() {
window.removeEventListener('resize', this.onResize);
}
}
@Component({
selector: 'app-root',
template: `
<p>The window is {{height}}px high and {{width}}px wide</p>
`,
})
class AppComponent extends BaseComponent {
}
This might look correct, but yields us a compiler error:
Error: src/app/app.module.ts:5:7 - error NG2007: Class is using Angular features but is not decorated. Please add an explicit Angular decorator.
To fix this, we simply need to follow the instructions of the TypeScript compiler warning. Because BaseComponent
could be almost considered to be a component, let's create it as an instance of such:
@Component({
template: '',
selector: 'base-component'
})
class BaseComponent implements OnInit, OnDestroy {
height = window.innerHeight;
width = window.innerWidth;
// This needs to be an arrow function, otherwise `this` will bind to the Window
// For more, see: https://twitter.com/crutchcorn/status/1530104879271645184
onResize = () => {
this.height = window.innerHeight;
this.width = window.innerWidth;
}
ngOnInit() {
window.addEventListener('resize', this.onResize);
}
ngOnDestroy() {
window.removeEventListener('resize', this.onResize);
}
}
@Component({
selector: 'app-root',
template: `
<p>The window is {{height}}px high and {{width}}px wide</p>
`,
})
class AppComponent extends BaseComponent {
}
This solves the error and now AppComponent
tracks resizing as-expected!
You'll notice, however, that while BaseComponent
does have the implements
keyword, the AppComponent
does not. While it's seemingly not a requirement to have the implements
keyword on AppComponent
in modern versions of Angular, I'd personally still highly suggested.
@Component({
selector: 'app-root',
template: `
<p>The window is {{height}}px high and {{width}}px wide</p>
`,
})
class AppComponent extends BaseComponent implements OnInit, OnDestroy {
}
This is because it's easier to glance at the AppComponent
code and see what lifecycle methods are used in the extended class or not.
Simplify Base Component Usage by using an abstract class
While our BaseComponent
is extendible now, there's a new frustration that's arose as a result of using the @Component
: We just registered a new component that can be accidentally used in another component's template.
For example, if we had a template that looked like:
<base-component></base-component>
We wouldn't get a compiler error, but would have a loose bit of code running needlessly. Ideally we'd like to have BaseComponent
still able to use lifecycle methods without registering a new template tag.
Fortunately, that's possible, as of Angular 9; simply remove BaseComponent
's @Component
selector
property and it won't register a new tag.
@Component({
template: ''
})
class BaseComponent implements OnInit, OnDestroy {
// ...
}
That solves one problem, but still leaves one present with using @Component
: you must add a declaration of the BaseComponent
into an NgModule
. Otherwise, you'll end up with the following error during compilation:
BaseComponent is not declared in any Angular module
To solve this, we can either import BaseComponent
in an NgModule
or, alternatively, mark BaseComponent
as an abstract class:
@Component({
template: ''
})
abstract class BaseComponent implements OnInit, OnDestroy {
// ...
}
@Injectable
is an alternative of an abstract class
Since Angular 10 you can now use @Injectable
to declare your BaseComponent
instead. This sidesteps the problem of having to mark a component class
as abstract because even without it Injectable
s do not need to be declared in a module:
@Injectable()
class BaseComponent implements OnInit, OnDestroy {
// ...
}
You might expect there to be some migration of AppComponent
when you're using @Injectable
instead of @Component
for the BaseComponent
, but alas there is not.
@Injectable()
class BaseComponent implements OnInit {
ngOnInit() {
console.log('I AM BASE COMPONENT');
}
}
@Component({
selector: 'app-root',
template: `
<p>Test</p>
`,
})
class AppComponent extends BaseComponent {
}
That said, while using @Injectable
is explicitly supported, it's very hacky to use this in place of @Component
. This is because Angular's @Injectable
s do not support lifecycle methods without a Component
that extends it.
As such, we'll be sticking to the abstract
class solution.
Overwriting Lifecycle Methods
If you recall from our quick overview of what a base class does, you can replace the base class implementation of both methods and properties.
The same is true for lifecycle methods, since they're just a type of method on the component class instance.
@Component({
template: ''
})
abstract class BaseComponent implements OnInit {
ngOnInit() {
console.log('I AM BASE COMPONENT');
}
}
@Component({
selector: 'app-root',
template: `
<p>Test</p>
`,
})
class AppComponent extends BaseComponent implements OnInit {
override ngOnInit() {
console.log("And I am the AppComponent")
}
}
The downside here, however, is that ngOnInit
on AppComponent
will no longer call the BaseComponent
's ngOnInit
logic. After all, what if you wanted to simply add behavior to ngOnInit
, rather than replace it entirely?
Luckily, we can use the super
keyword to refer to the base class instance and call the original method inside of the overwritten method:
@Component({
selector: 'app-root',
template: `
<p>Test</p>
`,
})
class AppComponent extends BaseComponent implements OnInit {
override ngOnInit() {
// This will log `I AM BASE COMPONENT`
super.ngOnInit();
console.log("And I am the AppComponent")
}
}
Use Dependency Injection with your extended class
While you're able to use global window
variable in a browser environment, if you're attempting to use window
in a server-side rendered Angular application, it will throw an error.
window is not defined
To solve this problem you can use Angular's dependency injection to inject an instance of document
to BaseComponent
, and get access to the window
through defaultView
that way:
@Component({
template: ''
})
abstract class BaseComponent implements OnInit, OnDestroy {
window!: Window;
constructor(@Inject(DOCUMENT) private document: Document) {
this.window = document.defaultView!;
}
}
Because of this, this is the recommended way to get access to the document
and window
instance inside of an Angular component, even if it's a non-SSR app.
Luckily, this works out-of-the-box with extended Angular component classes:
import {Component, Inject, Injectable, OnDestroy, OnInit} from '@angular/core';
import {DOCUMENT} from "@angular/common";
@Component({
template: ''
})
abstract class BaseComponent implements OnInit, OnDestroy {
window!: Window;
constructor(@Inject(DOCUMENT) private document: Document) {
this.window = document.defaultView!;
}
height = this.window.innerHeight;
width = this.window.innerWidth;
// This needs to be an arrow function
onResize = () => {
this.height = this.window.innerHeight;
this.width = this.window.innerWidth;
}
ngOnInit() {
this.window.addEventListener('resize', this.onResize);
}
ngOnDestroy() {
this.window.removeEventListener('resize', this.onResize);
}
}
@Component({
selector: 'app-root',
template: `
<p>The window is {{height}}px high and {{width}}px wide</p>
`,
})
class AppComponent extends BaseComponent implements OnInit, OnDestroy {
}
Overwriting constructor
behavior
When working with class extension, regardless of being used in Angular or in JavaScript itself, you need to call super()
when trying to overwrite a constructor:
class BaseClass {
name = "";
constructor() {
name = "Frank";
}
}
class AppClass extends BaseClass {
constructor() {
// This is required
super();
}
}
Without calling super
, you'll get the following error:
Uncaught ReferenceError: must call super constructor before using 'this' in derived class constructor
Likewise, you need to call super
when overwriting a class component's constructor
as well.
@Component({
template: ''
})
abstract class BaseComponent {
name = "";
constructor() {
this.name = "Kevin";
}
}
@Component({
selector: 'app-root',
template: `
<p>{{name}}</p>
`,
})
class AppComponent extends BaseComponent {
constructor() {
super();
this.name = "Corbin";
}
}
This water gets muddied when using dependency injection in a base component that utilizes dependency injection.
@Component({
template: ''
})
abstract class BaseComponent {
window!: Window;
constructor(@Inject(DOCUMENT) private document: Document) {
this.window = document.defaultView!;
}
// ...
}
@Component({
selector: 'app-root',
template: `
<p>Test</p>
`,
})
class AppComponent extends BaseComponent {
// This code doesn't work. Read on to learn why
constructor() {
super();
}
}
As the super
method needs to be passed with the same arguments from dependenct injection, least we see the following error:
TS2554: Expected 1 arguments, but got 0.
app.component.ts(8, 15): An argument for 'document' was not provided.
To solve this, we need to pass document
from a new instance of AppComponent
's dependency injection to BaseComponent
:
@Component({
selector: 'app-root',
template: `
<p>Test</p>
`,
})
class AppComponent extends BaseComponent implements OnInit {
// This code doesn't work. Read on to learn why
constructor(@Inject(DOCUMENT) private document: Document) {
super(document);
console.log(document.body);
}
}
But alas, this does not work!
Similar to how we had to add override
to our AppComponent
's lifecycle methods, we need to do the same with our constructor. Otherwise, we'll get this error:
TS4115: This parameter property must have an 'override' modifier because it overrides a member in base class 'BaseComponent'.
Let's update the code to show what that might look like:
@Component({
template: ''
})
abstract class BaseComponent implements OnInit {
constructor(@Inject(DOCUMENT) private document: Document) {}
ngOnInit() {
console.log(document.title);
}
}
@Component({
selector: 'app-root',
template: `
<p>Test</p>
`,
})
class AppComponent extends BaseComponent implements OnInit {
constructor(@Inject(DOCUMENT) private override document: Document) {
super(document);
console.log(document.body);
}
}
Something worth mentioning is that this code still doesn't work. You'll see a compiler error with the following code:
TS2415: Class 'AppComponent' incorrectly extends base class 'BaseComponent'.
Types have separate declarations of a private property 'document'.
To solve this, we simply need to make our BaseComponent
's constructor
properties public
instead of private
:
@Component({
template: ''
})
abstract class BaseComponent implements OnInit {
constructor(@Inject(DOCUMENT) public document: Document) {}
ngOnInit() {
console.log(document.title);
}
}
@Component({
selector: 'app-root',
template: `
<p>Test</p>
`,
})
class AppComponent extends BaseComponent implements OnInit {
constructor(@Inject(DOCUMENT) public override document: Document) {
super(document);
console.log(document.body);
}
}
Remember to keep your
override
property in theAppComponent
constructor
, otherwise you'll have errors.
Alternatively, we can stop using parmeter properties in BaseComponent
and just not mark the field as public
or private
, like so:
@Component({
template: ''
})
abstract class BaseComponent implements OnInit {
private document: Document;
constructor(@Inject(DOCUMENT) document: Document) {
this.document = document;
}
ngOnInit() {
console.log(document.title);
}
}
@Component({
selector: 'app-root',
template: `
<p>Test</p>
`,
})
class AppComponent extends BaseComponent implements OnInit {
constructor(@Inject(DOCUMENT) document: Document) {
super(document);
console.log(document.body);
}
}
You don't need to use constructor
to use Dependency Injection
While our previous code works, it comes with the caveat that you have to still refactor your extended classes in the instance that you want to add a new injection into your base class.
Luckily, Angular 14 introduces the ability to use the inject
function which removes the need to use constructor
to use dependency injection. The API is relatively straightforward, replace constructor
usage of Dependency Injection with the inject
function as a property initializer:
import { inject } from '@angular/core';
@Component({
template: ''
})
abstract class BaseComponent {
// The `Document` type annotation is optional as it can be inferred by the `inject` function
private document: Document = inject(DOCUMENT);
window!: Window = this.document.defaultView;
// No constructor needed as we use property injection instead of constructor injection
// ...
}
Because of this, our AppComponent
class can be much simpler:
@Component({
selector: 'app-root',
template: `
<p>Test</p>
`,
})
class AppComponent extends BaseComponent {
// This code now works as the base class doesn't have constructor parameters anymore
constructor() {
super();
}
}
Why you don't want to extend Angular base classes
Now that we've learned how to extend base classes in Angular to share lifecycle methods, allow me to flip the script:
You shouldn't use a base class in Angular.
Why?
Well, it's often cited by Angular experts that using a base class is brittle and difficult to maintain.
For example, let's say that you have a base component that doesn't use dependency injection, but then suddenly need to add dependency injection. What do you do?
Well, you'd have to refactor every instance that you extended that class.
Similarly, if you add a lifecycle method that you want to overwrite in the future, there can be someheadaches depending in which order you do things in.
While the inject
function solves some of these problems, it implicitly introduces a new dependency, which might:
- Result in run-time errors thanks to missing providers
- Break or make testing more difficult for the same reason
Plus, there are more than a few ways to write this code in a different, more stable, way.
Fixing things the right way
There are better ways to write the WindowSize
code differently today that solve the problems of maintainability a bit better.
Let's take a look at two different methods for fixing the problem:
- A naïve implementation that replaces lifecycle methods for manual function calls
- A more "Angular" way of fixing the issue, using RxJS
The naïve way to fix the issue
A simple way of fixing some of the maintainability problems of using lifecyle methods , using an @Injectable
class that's provided on a per-class level enables you to have the constructor
method setup side effects and the Injectable
's ngOnDestroy
lifecycle method take it down:
Remember,
Injectable
s don't havengOnInit
!
@Injectable()
class WindowSizeService implements OnDestroy {
private window!: Window;
height = 0;
width = 0;
constructor(@Inject(DOCUMENT) document: Document) {
this.window = document.defaultView!;
this.height = this.window.innerHeight
this.width = this.window.innerWidth
window.addEventListener('resize', this.onResize);
}
onResize = () => {
this.height = window.innerHeight;
this.width = window.innerWidth;
}
ngOnDestroy() {
window.removeEventListener('resize', this.onResize);
}
}
@Component({
selector: 'app-root',
template: `
<p>The window is {{windowSize.height}}px high and {{windowSize.width}}px wide</p>
`,
providers: [WindowSizeService]
})
class AppComponent {
constructor(public windowSize: WindowSizeService) {
}
}
This code functions, but introduces other issues when it comes to maintainability. After all, if you want to pass something into addListeners
or removeListeners
, you introduce the same refactoring issue you had previously.
Further, height
and width
are simply mutated which, while will still trigger change detection, makes it difficult to impossile to track when they've changed. Ideally, we should have a way to know when height
and width
are changed.
If only Angular had a way to track a series of changes in some kind of... Observable...
Oh!
The Angular way to fix the code
While mutable properties can get the job done, they're far from optimal. Let's instead leverage rxjs
, which is built into Angular after all, to create an observable.
For this type of DOM event listening, RxJS exposes a fromEvent
method that we can pipe into a map
to create an Observable.
import {fromEvent, debounceTime, map, Subject, takeUntil, Observable} from 'rxjs';
interface WindowSize {
readonly height: number;
readonly width: number;
}
@Injectable()
class WindowSizeService implements OnDestroy {
private destroy$ = new Subject<void>();
size$: Observable<WindowSize>;
constructor(@Inject(DOCUMENT) document: Document) {
const window = document.defaultView!;
this.size$ = fromEvent(window, 'resize').pipe(
debounceTime(50),
map(() => ({
height: window.innerHeight,
width: window.innerWidth,
})),
startWith({
height: window.innerHeight,
width: window.innerWidth,
}),
takeUntil(this.destroy$)
);
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}
This is a much more straightforward setup process that's much more Angular-ific!
As an added benifit, we now can utilize an AsyncPipe
in order to listen for changes on the size$
observable:
@Component({
selector: 'app-root',
template: `
<p *ngIf="windowSize.size$ | async as size">The window is {{size.height}}px high and {{size.width}}px wide</p>
`,
providers: [WindowSizeService]
})
class AppComponent {
windowSize = inject(WindowSizeService);
}
Conclusion
And that's it! I hope this has been an insightful look into how you can extend component logic.
And this isn't an area of stagnation within Angular - they're introducing new functionality to share component logic using the upcoming hostDirectives
API.
Hey, while you're here - do you want to learn more Angular in-depth like this? Maybe you've been working in Angular for some time and want to learn React or Vue, but not start from scratch?
Top comments (0)