Is it possible that Angular 6's ngOnChanges directive is not compatible with a lambda expression?

Currently, I am in the process of creating an attribute directive that is designed to alter the background color of the host element based on a provided "quality" @input.

While experimenting with my directive, I discovered that using ngOnChanges as a lambda expression prevented the ngOnchanges method from being called when the input value changed.

Here is a link to my playground where you can see the code in action:

https://stackblitz.com/edit/angular-6-playground-lqwps2?file=src%2Fapp%2FmyOrder.directive.ts

@Directive({
  selector: '[my-order]'
})

export class MyOrderDirective {

  @Input()
  quality: number = 1;

  @HostBinding('style.background-color')
  backgroundColor: string;


  // ************* works ********************
  // ngOnChanges(changes: SimpleChanges) {
  //   if (this.quality % 2 == 0) {
  //     this.backgroundColor = 'red';
  //
  //   } else {
  //     this.backgroundColor = 'blue';
  //   }
  //
  // };


  // ******* lambda expression does NOT work ***********
  ngOnChanges = (changes: SimpleChanges) => {
    if (this.quality % 2 == 0) {
      this.backgroundColor = 'red';

    } else {
      this.backgroundColor = 'blue';
    }

  };

  // ******************** Not work *********************
  // ngOnChanges = function (changes: SimpleChanges) {
  //   if (this.quality % 2 == 0) {
  //     this.backgroundColor = 'red';
  //
  //   } else {
  //     this.backgroundColor = 'blue';
  //   }
  //
  // };


  constructor() {

  }


}

Answer №1

This specific behavior is causing an error on GitHub.

As mentioned in #7270 (comment), this issue is intentional. Implementing a fix for this would negatively impact runtime speed and hinder tree shaking, so it will not be addressed.

Confirmation by mhevery, a member of the Angular team

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

Is it possible to determine when a component has completed its rendering process in Angular?

I am currently working on an Angular application where I have a page component that contains several subcomponents. Each subcomponent is set up to fetch data from an API in the ngOnInit method, causing a layout shift issue as they load at different speeds ...

While attempting to set up a fresh 'TypeScript Angular Project' in Visual Studio 2022, I encountered an Error Message stating "Visual Studio Code: Illegal characters found in the path"

Encountering an issue when attempting to create a new 'Standalone TypeScript Angular Project' called HealthCheck in VS 2022. Upon clicking the create button, I receive an Error Message stating "Visual Studio Code: Illegal characters in path" for ...

Trouble with references in Vue TypeScript when trying to access child component methods

I'm encountering an issue with calling a function in a child component while using typescript <notification ref="notification"></notification> <button @click="$refs.notification.show()"></button> Is there a ...

What is causing Angular to consistently display the first object in the array on the child view, while the child .ts file correctly prints information from a different object?

Once a card of any object is clicked, the information of that specific object will be printed to the console. However, the child view will only display the details of the first object in the array it retrieves from. All pages are included below. A visual e ...

What steps can I take to eliminate the overload error that occurs when I extend the Request object in Express?

I'm having trouble extending Express' Request object to access req.user, and I'm encountering an overload error. I've attempted a couple of solutions, but none of them seem to work for me. EDIT: I am currently using Passport.js and JWT ...

Angular Universal in combination with AngularFire server experiences a hanging issue due to the first() pipe

I am currently developing an angular/firestore application that requires SSR capabilities. I have integrated angular universal into the project and everything seems to be functioning properly until I utilize the first() pipe on any of the firestore calls, ...

Ways to implement a loading template with OnPush change detection technique

Currently, I am retrieving a route parameter: searchResults$: Observable<string[]>; constructor( private route: ActivatedRoute, private svc: SearchService) { this.searchResults$ = this.route.paramMap.pipe( map((p: ParamMap) => p.get(&a ...

Revolutionize Your Web Development with ASP.NET Core and Angular 2 Integration using Webpack

I have started a new ASP.NET Core 1.0.1 project and I am working on integrating Angular 2 from scratch with Webpack Module Bundler. My goal is to use Hot Module Replacement (HMR) through ASP.NET Core SpaServices in order to avoid browser reloads, but I am ...

Typescript encounters ERROR TS1128: Expecting a declaration or statement

Having trouble with a TypeScript error in my game-details.component.ts file that I've been trying to fix for a couple of hours. It's showing up at line 26, column 54 and everything seems correct to me. Interestingly, when I press CTRL + S in my ...

Utilizing the NG-CLASS directive within a material table to target a specific 'row' element for styling in CSS

I have a table with various columns, one of which is a status field. I am looking to display colored badges in that column based on the status of each record, which can be "Completed", "Deleted", or "Canceled". I have attempted to use ng-class to dynamical ...

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

Can we create an alias for the import path in TypeScript?

import A = require('../../distant/PathToA'); import B = require('./different/path/PathToB'); I am utilizing external modules (commonJS) and browserify, with WebStorm as my editor. If this were just regular javascript, there are severa ...

Using Angular2 moment to format a date in a specific way

Encountered an error while using the amTimeAgo pipe from angular2-moment. The error message is as follows: Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not ...

The output.library.type variable in WebPack is not defined

Currently, I am delving into WebPack with a shortcode. As part of my learning process, I am working on a code snippet that involves calculating the cube and square of a number, which are then supposed to be stored in a variable outlined in the webpack.conf ...

I am interested in utilizing angular 4 ng2-ui/map with places-auto-complete functionality that is restricted to a specific country

Check out my code snippet below: <input class="form-control" placeholder="Pickup Location" places-auto-complete (place_changed)="pickupChanged($event)" formControlName="pickup_location" [types]="['geocode']" /> I am trying to figure out ...

The safeguarding of Angular2 and Laravel against CSRF vulnerabilities

I have come across some interesting articles that I've read recently. The issue I am facing revolves around this particular section of code: <meta property="csrf-token" name="csrf-token" content="{{ csrf_token() }}"> I am utilizing Angular2 a ...

Leverage elements from nearby npm repository when building an Angular 2 application

After developing a generic chart component using d3 and Angular 2, I decided to share it by publishing it in a local npm repository. This way, anyone can easily incorporate the chart component into their Angular project by simply running the npm install my ...

Angular List Selector: A versatile multiple selection component with a stylish list design

I'm in need of a select component similar to the one shown in https://i.sstatic.net/mo6NH.png The issue is that Material Angular doesn't have this specific component, so I opted to use the default HTML select inside my component. Everything was ...

Is there stability in using *ngFor for lists in Nativescript Angular?

Update: I have inquired about the current status of RadListView in Nativescript, questioning if it still exists. You can find more information here. Initial query: Is it suitable to utilize *ngFor for lists in Nativescript? Typically, I see recommendatio ...

Several arrays within the filteredData (MatTableDataSource) are being utilized

Hey there, I could really use some assistance. I have this data stored in a filteredData variable within a MatTableDataSource. filteredData My goal is to display this data in two separate tables, but I'm encountering issues where nothing is being sh ...