# Angular performance tips

# 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.

```typescript
<!-- 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).

```typescript
<!-- 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](https://angular.io/guide/built-in-directives#tracking-items-with-ngfor-trackby)