1. Use Pipe instead of function call inside template

You should not call directly a function from the component-class, because it runs on every changeDetection.

The following snippet shows you a bad example by using a function call.

<!-- Bad -->
<div *ngIf="yourHandler(data)"></div>

The better way is using a Pipe because, by default, pipes are defined as pure so that Angular executes the pipe only when it detects a pure change to the input value. A pure change is either a change to a primitive input value (such as String, Number, Boolean, or Symbol), or a changed object reference (such as Date, Array, Function, or Object).

<!-- Good -->
<div *ngIf="data | yourHandlerPipe"></div>

2. Use import instead of require()

When you have a 3rd-party lib you will have to import into your util, it is always better to use **import **over require() if possible because import, the ES6 syntax, supports **tree shaking **when you compiling your code into minified javascript.

3. By using *ngFor directives, don't forget to use trackBy-Functions!

If you loop of an DOM-element by using the *ngFor directive without using a trackBy-function all DOM-elements will be new created when one element in the list has changed. This causes a lot of work for the browser. If you are using a trackBy-function you will support the Angular framework to determine only the DOM-element which has changed and update the ONLY the bindings without creating the DOM-elements again.

Follow the original documentation on the Angular website:
Using trackBy-functions with the *ngFor directive