title: Angular6: Performance with change cycles
body: <p>I have a web application, written in Angular6. Everything works correctly, but I am curious whether I can optimise the performance of it. In my HTML bindings, I sometimes use a function call, for example in the <code>mat-paginator</code>, I use <code>getDataSize()</code>, and for some values, I use <code>{{getValueOfEntity(...)}}</code>.</p>
  
  <p>Whenever I put a console.log in these methods, and open the console, I start getting infinite logs. I was wondering if this is normal, and if it downgrades the performance, since the function gets called constantly.</p>
  
  <p>Do you have any idea if this is a serious problem, for example, Angular has to update the DOM constantly because of this or not? And if yes, is there a better way of doing this?</p>
  
  <p>EDIT: I'm having trouble to memoize my pipe. This is my current pipe:</p>
  
  <pre><code>@Pipe({
    name: "attributevalue",
    pure: true,
  })
  export class AttributeValuePipe implements PipeTransform {
  
  public transform(element: Entity, attribute: AttributeType | "DEFAULT"): string {
      return this.getAttributeValue(element, attribute);
  }
  
  public getAttributeValue(element: Entity, attribute: AttributeType | "DEFAULT") {
      if (attribute === "DEFAULT") {
          return "Error: Attribute is 'DEFAULT'";
      } else {
          for (const attr of element.attributeAssignments) {
              if (attr.typeId === attribute.id) {
                  return attr.value;
              }
          }
          return undefined;
      }
  }
  }
  </code></pre>
  
  <p>Any idea how to put in the memoize part?</p>
  
  <p>Is it as simple as this? I have no idea to test if it works correctly:</p>
  
  <pre><code>const memoize = require("lodash.memoize");
  return memoize(this.getAttributeValue(element, attribute));
  </code></pre>
  
  <p>in the transform function?</p>