Special scenarios requiring OnPush Change Detection

I'm currently building an Angular 2 application using ngrx, and I've been intrigued by the concept of OnPush change detection for optimizing performance. After reading multiple articles on the topic, it seems that the general consensus is: "If a component relies solely on its input properties, and they are immutable, then the component will only change when one of its input properties change.". This has led me to ponder a couple of questions regarding OnPush:

1) What happens if my component has a combination of @Input() properties and non-input properties - does OnPush lose its effectiveness in this scenario?

2) Similarly, if a component only has properties (without using @Input), does OnPush still provide any benefits?

Any insights on this would be greatly appreciated :)

Answer â„–1

OnPush strategy in Angular does not directly impact a components internal state.

If you take a moment to read through this informative article by Victor Savkin, you will see that he specifically highlights

It is important to note that a component can maintain private mutable state as long as it only changes when inputs are updated or an event is triggered from within the component’s template. The key restriction of the OnPush strategy is avoiding dependencies on shared mutable state. Learn more about this concept here.

It is valuable to dedicate time to reading this article and the related resource it mentions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Angular Material to link a constant within an HTML file

I have set up my constants in the following way: constants.ts export const Constants = Object.freeze({ ACCEPTED_LEADS_TO_CALL: "Accepted Leads to Call", RECOMMENDED_CALL_LIST: "Recommended Call List" }); This makes it easy to refere ...

Type of event triggered by user file upload via INPUT element

I have a piece of code that reads the contents of a locally stored file. Here is what it looks like: onFile(event: any) { console.log(event); const file = event.target.files[0]; const reader = new FileReader(); reader.onloadend = (ev: any) => { ...

typescript - specifying the default value for a new class instance

Is there a way to set default values for properties in TypeScript? For example, let's say we have the following class: class Person { name: string age: number constructor(name, age){ this.name = name this.age = age } } We want to ens ...

Guide on how to create a custom response using class-validator in NestJS

Is it feasible to customize the error response generated by class-validator in NestJs? The default error message structure in NestJS looks like this: { "statusCode": 400, "error": "Bad Request", "message": [ { "target": {} ...

(TS 2556) I'm puzzled as to why a type error is being thrown for a spread argument that was clearly defined and passed as a rest parameter

function debouncePromise<TParams extends Array<unknown>, TRes>( fn: (a: TParams) => Promise<TRes>, time: number, ) { let timerId: ReturnType<typeof setTimeout> | undefined = undefined; return function debounced(...args: TP ...

Exploring Angular: distinguishing between sessions on separate tabs

I am currently working on a web application that utilizes Angular for the front end and a Django Rest API for the back-end. In some cases, I need the Django Rest API to be able to distinguish between polling requests using session IDs. After conducting som ...

Angular: Struggling with Parent Component not recognizing changes in Child Component

Currently, I am facing an issue with my shopping cart functionality. When the website first loads and a user does not have a saved shopping cart, they need to click "add to cart" before one is created. The problem lies in the fact that my app.component doe ...

Passing a reference to a react functional component (react.FC) results in a type error: The property ref is not recognized on the type 'IntrinsicAttributes & Props & { children: ReactNode}'

Currently, I am working on mastering the utilization of forward refs. In a functional component (FC), I am trying to initialize all my refs and then pass them down to its child components so that I can access the canvas instances of some chartjs charts. Ho ...

Having trouble with TypeScript error in React with Material-UI when trying to set up tabs?

I have developed my own custom accordion component hook, but I am encountering the following error export default const Tabs: OverridableComponent<TabsTypeMap<{}, ExtendButtonBase<ButtonBaseTypeMap<{}, "button">>>> Check ...

The Angular service is sending back the error message "undefined" when trying to retrieve data with the ID parameter from the requested

When calling a service from a component, I am encountering a 400 bad request error with the following message: "Invalid data 'undefined' for parameter id" It's worth noting that the getProduct method in the API is functioning correctly. ...

Switching from module.exports in Javascript to Typescript format

My Node-express code currently uses module.exports to export functions. As I am converting the code to TypeScript, I need to find out how to replace module.exports in typescript. Can you help me with this? ...

Using Typescript to import a module and export a sub function

I am currently using mocha for testing a function, but I have encountered an error while running the test file. The structure of my files is organized as follows: server |-test | |-customer.test.ts |-customer.js Here is the content of the customer.js fi ...

Creating a hyperlink to a subdomain in TypeScript Execution File

I am seeking to add a link directing to a subdomain in the navigation bar of a react theme. Although I feel a bit hesitant about asking for help on something seemingly simple, I have struggled to find any relevant examples online to assist me. Below is the ...

The output from Angular Validator.pattern() may differ from that generated by online regex engines

Currently, I am facing an issue with my form group and a regular expression used to validate names. The criteria for the name input field are: It must be required. It should be alphanumeric. It must start with alphabets. It cannot contain any special char ...

Tips for preserving the status of radio buttons in a React application

I am currently utilizing a Map to keep track of the state of radio buttons, but I am facing challenges when it comes to correctly saving and updating it whenever a user makes a selection. The structure of my Map is as follows: { "Group A": [ ...

Unexpected silence from the Express web server

I am currently in the process of setting up my Angular application for Server Side Rendering using Angular Universal. Below is the JS file that has been generated by Angular Universal, with minor modifications made to the path and port: import 'zone ...

Getting the highest level object in a nested Angular component structure

Currently, I am in the process of developing a query builder using Angular that bears resemblance to the JQuery builder. However, I have encountered an issue related to emitting the data. Whenever I click on the addGroup or addRule buttons, a new group is ...

Tips for organizing an array of objects that contain null properties

Here is an array that I need help with: "data": { "risks": [ { "id": "22", "name": true, "surname": 0.5, "age": 0.75, "heigth" ...

Switching between various conditions

Here is a sample of my component: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'myApp-component', templateUrl: './myApp.component.html', styleUrls: ['./myApp.component.scss'] }) ex ...

What is the best way to configure Apache to act as a reverse proxy for an ASP.NET Core API and an Angular

My aspnet core api is running on localhost:8080 (kestrel) and functions perfectly on localhost:80 (apache reverse proxy), making it accessible from the internet via www.example.com. I am looking to deploy my angular client on the same port locahost:80(www ...