Improve jira components, to OnPush strategy

frontend/src/app/jira-control/avatar/avatar.component.ts

@@ -1,19 +1,25 @@
-import { Component, Input } from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges} from '@angular/core';
 
 @Component({
   selector: 'j-avatar',
   templateUrl: './avatar.component.html',
-  styleUrls: ['./avatar.component.scss']
+  styleUrls: ['./avatar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AvatarComponent {
+export class AvatarComponent implements OnChanges {
   @Input() avatarUrl: string;
   @Input() size = 12;
-  @Input() name = '';
   @Input() rounded = true;
   @Input() className = '';
 
-  get style() {
-    return {
+  public style: any;
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.updateStyle();
+  }
+
+  private updateStyle() {
+    this.style = {
       width: `${this.size}px`,
       height: `${this.size}px`,
       'background-image': `url('${this.avatarUrl}')`,

frontend/src/app/jira-control/breadcrumbs/breadcrumbs.component.ts

@@ -1,12 +1,11 @@
-import { Component, Input } from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 
 @Component({
   selector: 'breadcrumbs',
   templateUrl: './breadcrumbs.component.html',
-  styleUrls: ['./breadcrumbs.component.scss']
+  styleUrls: ['./breadcrumbs.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BreadcrumbsComponent {
   @Input() items: string[] = [];
-  constructor() {}
-
 }

frontend/src/app/jira-control/button/button.component.ts

@@ -1,9 +1,10 @@
-import { Component, Input } from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 
 @Component({
   selector: 'j-button',
   templateUrl: './button.component.html',
-  styleUrls: ['./button.component.scss']
+  styleUrls: ['./button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ButtonComponent {
   @Input() type = 'button';
@@ -13,7 +14,4 @@ export class ButtonComponent {
   @Input() isWorking: boolean;
   @Input() isActive: boolean;
   @Input() disabled: boolean;
-
-  constructor() {}
-
 }

frontend/src/app/jira-control/svg-definitions/svg-definitions.component.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 
 @Component({
   selector: 'svg-definitions',
-  templateUrl: './svg-definitions.component.html'
+  templateUrl: './svg-definitions.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SvgDefinitionsComponent {
   constructor() {}

frontend/src/app/jira-control/svg-icon/svg-icon.component.ts

@@ -1,8 +1,9 @@
-import { Component, Input } from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 
 @Component({
   selector: 'svg-icon',
-  templateUrl: './svg-icon.component.html'
+  templateUrl: './svg-icon.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SvgIconComponent {
   @Input() name: string;

frontend/src/app/project/components/navigation/sidebar/sidebar.component.html

@@ -3,7 +3,6 @@
     <div class="sidebar-content">
         <div class="flex px-1 py-6">
             <j-avatar avatarUrl="https://res.cloudinary.com/dvujyxh7e/image/upload/c_scale,w_256/v1593097745/angular-vietnam-transparent_iwfwxa.png"
-                      [name]="'Project'"
                       [rounded]="false"
                       [size]="45"
                       title="Angular Vietnam">
@@ -49,4 +48,4 @@
                  class="divider"></div>
         </div>
     </div>
-</div>
+</div>

frontend/src/app/work-in-progress/work-in-progress.component.html

@@ -8,7 +8,7 @@ <h3 class="m-10 text-center">
         <a class="text-lg text-blue-500 hover:text-blue-800"
            href="https://jira.trungk18.com/">Visit the work in progress app</a> |
         <a class="text-lg text-blue-500 hover:text-blue-800"
-           href="hhttps://github.com/trungk18/jira-clone-angular/tree/master/frontend">View front-end code</a>
+           href="https://github.com/trungk18/jira-clone-angular/tree/master/frontend">View front-end code</a>
     </h3>
 
     <div class="px-4 py-3 text-teal-900 bg-teal-100 border-t-4 border-teal-500 rounded-b shadow-md"
@@ -38,4 +38,4 @@ <h3 class="m-10 text-center">
     </p>
     <div>© 2020 <a class="text-blue-500 hover:text-blue-800"
            href="https://trungk18.com/">Trung Vo</a></div>
-</div>
+</div>