Why you should use onPush detection strategy - Part 2

In the previous part you saw that "onPush" change detection strategy option - used for prevent angular to run the checks in vain (when no change which can affect the component made). Only when the thing that changed is the value passed to the component through input - the change detection will run, and reflect the change at HTML.

export class AppComponent  {
  name = 'Angular';
  onChangeNameClick() { 
    this.name = 'Angular the awesome'; // change the "name" which passed to inner
  }
}

Objects

But what about values which are not strings (like in example), but objects?
Lets say we have inner component that suppose to display selected product, When user clicks the "selectProduct" button - the new product should be displayed at inner component:

export class AppComponent  {
  product = {
    model: 'GSX1000R',
    manufacturer: 'Suzuki'
  };
  selectProductClick() { // nothing will change at inner component
    this.product.model = 'Z900';
    this.product.manufacturer = 'Kawassaki';
  }
}

As you can see - nothing changes at inner component after the click. But why?
The answer is - that angular consider the the input value changed only when object reference changed. In other words - the change will apply only when input value will receive new different object:

  selectProductCorrectClick() { // will display the change because reference changed
    this.product = {
      model: 'Z900',
      manufacturer: 'Kawassaki'
    }   
  }

Why you should use onPush detection strategy - Part 1

Angular is powerful framework. It gives you various options to write your components.
The simple one - using "Default" change detection strategy:

@Component({
  selector: 'my-app',
  templateUrl: `
   <div>
    <!-- some inner component here -->
    <inner></inner>
   </div>
  `
  // changeDetection not specified - means Default Strategy
})
export class AppComponent  {
  name = 'Angular';
}

"Default Strategy" means angular run change detection check every time he thinks that change is possible. (Changes may come as result of mouse or key events or Ajax requests)
That makes sense - every possibility of change requires careful check if HTML views need to be updated too.
But what if you have a dumb component that gets its data through the "input" property:

@Component({
  selector: 'inner',
  template: `
    
{{name}}
    {{somePublicMethod()}} 
  `
})
export class InnerComponent  {
  @Input() name;
  somePublicMethod() {
    console.log('change check runned'); // will run twice no matter what kind of event happened
  }
}

"somePublicMethod" will run twice no matter what kind of event happened (which is bad in terms of performance)
So, is there any way you can "help" angular not to do any unneeded checks inside this component unless the input data changed?
That is where "onPush" strategy appears very handful:

@Component({
  selector: 'my-app',
  templateUrl: `
   <div>
    <!-- some inner component here -->
    <inner [name]="name"></inner>
    <button (click)="onlyClick()">click to trigger some event</button>
   </div>
  `
})
export class AppComponent  {
  name = 'Angular';

  onlyClick() {
    // nothing changed, but mouse event "click" triggered
  }
}

...

@Component({
  selector: 'inner',
  template: `
    
{{name}}
  `,
  // onPush is used!!!
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class InnerComponent  {
  @Input() name;
}

No change check will be run at "inner" component or its children in response to some event. The only case when check will run - is only when "name" property changed Read more in the next part

How to connect to gcp cluster from local terminal

Firstly you need Kubernetes installed on your machine

brew install kubernetes-cli

Open the cloud console UI, and navigate to "clusters" tab.

You will present with popup that displays command with exact parameters of the specific cluster

Note: if you already logged with different account - run "gcloud auth revoke --all"
and then: "gcloud auth login"

Now you can run the command in the console. It may happen you will be prompted with chrome asking for cloud credentials. After you get logged in, you can verify that you are in the correct cluster by, for example, checking for pods status:

kubectl get pods