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

Image for post
Image for post
Made by Itchimonji

Why do we use switch statements?


Code examples of object composition & inheritance in Angular

Image for post
Image for post

Inheritance

>>> 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 the design pattern Template Method to handle URL parameters of similar components with the same logic

Image for post
Image for post
Made by Itchimonji

Briefly explained: Routing in Angular


Using the Introduce Special Case pattern to refactor a null checking condition

Trees in autumn
Trees in autumn
Photo by the author.


View-manipulation with Angular’s reactivity

Image for post
Image for post
Made by Itchimonji
>>> app.component.ts

public theme: string;

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


Two important aspects of the Open-Close-Principle

Image for post
Image for post
Made by Itchimonji
  • Single Responsibility Principle
  • Open-Closed-Principle
  • Liskov-Substitution-Principle
  • Interface-Segregation -Principle
  • Dependency-Inversion-Principle

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