Code examples of object composition & inheritance in Angular

Image for post
Image for post

Based on my story Inheritance & Object Composition I want to show you, how you can use some Angular features for reusing code in really nice ways. I prepared some easy examples below.

Inheritance

Inheritance is a very simple principle in Angular. You can combine a base class with a superclass by using the extends term. The superclass inherits fields and methods from the base class.

Subscribing and unsubscribing to an observable in a Redux store is a common repeatable practise. You can DRY, when you separate this logic in a base class.

>>> base.component.tsexport class BaseComponent implements OnInit, OnDestroy {
public randomNumber: number;
private selectNumber$: Observable<number>;
private subNumber: Subscription;

private destroyer$: Subject<void>;

constructor(protected store: Store<State>) {
this.destroyer$ = new Subject<void>();
}

ngOnInit(): void {
this.subscribeToRandomNumber();
}

ngOnDestroy(): void {
this.unsubscribeNumber();
}

public getRandomNumber() {
this.store.dispatch(GetRandomNumber());
}

protected subscribeToRandomNumber(): void {
this.selectNumber$ = this.store.select(selectRandomNumber);
this.subNumber = this.selectNumber$
.pipe(takeUntil(this.destroyer$))
.subscribe((next: number) => {
this.randomNumber = next;
});
}

/*
@deprecated, because of this
.destroyer$
*/
protected
unsubscribeNumber(): void {
if (this.subNumber) {
this.subNumber.unsubscribe(); …


Using Creational Patterns like Factory Method to refactor switch statements in Angular

Image for post
Image for post
Made by Itchimonji

Programmers try to avoid switch statements because switches are breaking the rule of the Open-Closed-Principle. Also, continuously extending the switch statement with more clauses leads to a high maintenance effort, as you need to modify the written code every time you extend it. Maybe your working unit-tests will fail after the change. You might need to fix your business logic and your tests every time — what a nightmare…

“The Problem with such duplicate switches is that, whenever you add a clause, you have to find all the switches and update them.” …


View-manipulation with Angular’s reactivity

Image for post
Image for post
Made by Itchimonji

You can use the reactivity of Angular in class- or ngClass-attributes of HTML elements. With this combination you can change your stylings dynamically at runtime — which would be helpful for theme components.

First of all, you need a variable of the current theming in a controller. This variable is a good starting point for using reactivity.

>>> app.component.ts

public theme: string;

constructor() {
this.theme = 'light';
}

Secondly, you need to define the theming in the stylesheet with some rules. Here you can use CSS, SCSS, SASS or other preprocessors. …


An important aspect of the Open-Close-Principle

Image for post
Image for post
Photo by Itchimonji

These days for your applications, a decoupled and encapsulated software system is ever more relevant. Reusability, maintenance, care, and sustainability play a major role in our software development projects — they are getting bigger and bigger. People, who try to master these challenges, read Robert C. Martins Clean Code, Clean Coder, or Clean Architecture. Actually, some of them follow his SOLID principles:

  • Single Responsibility Principle
  • Open-Closed-Principle
  • Liskov-Substitution-Principle
  • Interface-Segregation -Principle
  • Dependency-Inversion-Principle

So, why should we care about the so called “Inheritance & Object Composition”? Because they are a big part of one of the aforementioned SOLID principles: the Open-Closed-Principle.

„Software entities … should be open for extension, but closed for modification.“ …

About

Itchimonji

Fullstack Software Engineer | Trained Mathematical-Technical Software Developer | Employee at Energy2market

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store