When initializing, the @Input property in Angular Component is consistently found to be empty

There's a component with 2 inputs - one is set, and the other is just a regular property.

@Input() public set value(val: string) {
        this._selectedOption =
           this._options.find(o => o[this.selectedProperty || 'someDefault'] === val);
    }
@Input() public selectedProperty: string;

In the provided code snippet, the selectedProperty is always empty the first time a value is set.

This is how it looks in HTML:

 <my-component [value]="someValue"
                           selectedProperty="value"
                </my-component>

In subsequent appearances of this component, the selectedProperty will be empty.

Is there a way to ensure that the selectedProperty is not empty the first time around?

Answer №1

An interesting response. The sequence in which sets are ordered in the @Inputs corresponds to their declaration within the class.

Therefore, if we want selectedProperty to be set first, it should look like this:

@Input() public selectedProperty: string;
@Input() public set value(val: string) {
        this._selectedOption =
           this._options.find(o => o[this.selectedProperty || 'someDefault'] === val);
    }

This pertains to the functionality of JavaScript and coincides with how Angular locates inputs within the class.

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

What is the best way to ensure that items have been properly loaded?

I am currently working on a system that involves three distinct item types: courses, packages, and programs. Users have the option to filter by All or by one of these three specific types. However, I am facing a challenge in how to handle the scenario wh ...

Generating Dynamic DIV Elements in Angular 2

I am looking to dynamically generate divs in Angular 2 with Bootstrap classes based on data retrieved from a database. For instance, if I receive 6 categories from the database, I would like to display this as 3 rows with 2 columns each. How can I implemen ...

Kylo Interface - Developing a fresh TypeScript module

I am unsure about how to effectively work with Kylo and its UI structure. Based on the documentation found at , it states: Most of the Kylo UI relies on AngularJS and AngularJS Material, but some parts have been updated to Angular 2 and Covalent. New p ...

An error occurred while parsing JSON: `Unexpected ending near "ma-sauce-launcher":"*`

After executing the command ">ng new angular-app" on Windows, I came across the following error: npm ERR! Unexpected end of JSON input while parsing near '...ma-sauce-launcher":"*' Package installation failed, please refer to the above error ...

Combining a form and table on a single webpage, I am curious how to utilize the form to update the table effectively using Express and Node.js

Seeking guidance in website development as I face a particular challenge. I aim to create a dynamic search page for a website. The form should allow users to select a location or category, with the same page updating with relevant results. Despite succes ...

Error in Chart.JS: Unable to access property '_meta' of an undefined object

I am having trouble creating a simple bar chart due to the error mentioned in the title. I have checked the data in the array I intend to use with the help of alert(), but there seems to be an issue with the syntax. Can someone please review this code an ...

How to reference a nested closure function in Javascript without relying on the 'this' keyword

I'm facing a situation where I have a tree of closures: 'A' contains private closures 'pancake' and 'B'. There are times when I need to call the private closure 'pancake' from inside 'B' and access its ...

Executing identical scripts on both desktop and mobile devices

When working with scripts that are needed for both the desktop and mobile versions of a site, how can they be served efficiently? For instance, while the desktop version might require $(document).ready as usual, jQuery Mobile would need $(document).on(&ap ...

Retrieve the final element of the array by using the "pop

Here is an array that I am working with: { "data": [ { "lat": 31.135859, "lng": 46.823952, "hd": 319 }, { "lat": 31.050476, "lng": 46.907204, &quo ...

Deliver the commitment to the data source connection settings in TypeORM

Is it possible to retrieve the datasource connection options from AWS Parameter Store instead of storing them as environment variables in a general JavaScript question? I am having difficulty finding a solution and seeking expert advice on this matter. Th ...

Mocha: Can anyone provide guidance on leveraging assert.reject in TypeScript with Promise as a parameter?

How can I effectively utilize the assert.reject method in TypeScript with promises as parameters? Here is the code snippet I am working with: import { assert } from "chai"; import { suite, test, timeout, slow } from "mocha-typescript"; import "mocha"; i ...

Using CSS files from node modules within a meteor application

Incorporating the froala editor into my Meteor and React project has presented a unique challenge. The editor mandates the importation of CSS files, as outlined in the documentation here: . However, upon importing a specific CSS file using the command belo ...

retrieving a URL with the help of $.getJSON and effectively parsing its contents

I seem to be struggling with a coding issue and I can't quite figure out what's wrong. My code fetches a URL that returns JSON, but the function is not returning the expected string: function getit() { var ws_url = 'example.com/test.js&ap ...

Auto-suggest dropdown menu with pre-populated options

I am looking to implement a feature where users can click on an icon and a dropdown menu will appear, allowing them to search through data. To better illustrate this concept, here is an image: Users will be able to input their quiz names in the first sect ...

Having trouble importing pixi.js into my .ts file

I am a newcomer to utilizing pixi.js for the first time. I went ahead and installed it using npm install pixi.js --save-dev. However, despite adding the dependency to my package.json file, I encountered difficulties when attempting to import it. Surprising ...

I'm interested in utilizing Angular 2 to parse a CSV file and showcase the data in a table

Hello everyone, I am new to Angular 2/4 and I am trying to parse a CSV file and display the data in a table on a webpage. I have attempted some code, but the data only gets displayed in the console, not on the webpage itself. Can anyone help me out? hand ...

Evolving from Angular 1.x to Angular 5: The Transition Journey

Seeking guidance on migrating a large web-app from Angular 1.4 to Angular 5. I have scoured through various tutorials but haven't found the right answer yet. If anyone has already achieved this milestone, please share your insights. Currently, I have ...

What is the most efficient way to store arrays created within for loops into an empty array located outside of the loop structure?

(I have looked at similar questions that were asked before, but I couldn't find a satisfactory answer... my apologies!) Hey everyone, I am currently using a nested for-loop which is resulting in new arrays being created. Each time the inner loop ex ...

Tips for sending props to Material UI components

Hey there! I'm currently working on a progressbar component that utilizes animations to animate the progress. I've styled the component using Material UI classes and integrated it into another component where I pass props to customize the progres ...

How to prevent users from selecting certain options using angular's ng-options

As per the Angular documentation ng-options guidelines I tried to implement this piece of code: <select ng-model="model" ng-options="item.CODE as item.NAME disable when item.DISABLE for item in list" id="foo" name="foo" ng-change="change()"> Howe ...