Develop Reference

Can I affect properties of an Angular component based on change of other properties in a non-template-driven fashion?

I'm developing a form with Angular 6 and using some standart components, including ng-select (I'd say that's a requirement). The form is supposed to have rather complicated logic (some field values affect other values or suggestions that ng-select should show). I have a rather general question (hoping that there's an approach which I haven't just found yet), but to stay more specific, let's consider the following example:
I have 2 dictionaries (let's call them categories and items), each item being a "child" of a certain category
I have to let user select a category and an item from each dictionary, for that I have 2 fields like
<ng-select
name="category"
[items]="formSuggestions.categories$ | async"
bindLabel="name"
[(ngModel)]="formFields.category"
></ng-select>
<ng-select
name="item"
[items]="formSuggestions.items$ | async"
bindLabel="name"
[(ngModel)]="formFields.item"
></ng-select>
(in fact, they are wrapped into custom components which I omit for simplicity)
(here formSuggestions.items$ and formSuggestions.categories$ are observables that are filled with suggestions on server response; each item is actually an object having id, name and parentId)
what I need is: when a category is selected, suggestions for items are limited to those which are children of that category; when an item is selected, the category is set automatically
My question is: is there a way in Angular to "subscribe" to changes of one property in model (formFields.item) and apply it to others (formFields.category, formSuggestions.categories$) or the only way to deal with this is to set Outputs like (change) of each field?
The problem with that approach is the actual form is more complicated, for instance:
there's another interface that should be shown in a modal window, where user can choose category (and same for item), so there's multiple points which change the props
item selection should affect another ng-select's suggestions (for another field) and pre-fill some crud interface with default stuff for that item
by the way, I have to show only 10 suggestions each time (suggestion dictionaries are quite long) and there's no "limit" option in ng-select, so I have to affect suggestion list based on field value
...
so I really wonder if I can go less template-driven. Any suggestions, at least for the 2 selections case?

(change) is listening to the classical input change event (not Angular specific). See also MDN-Link
For all [(ngModel)] bound elements, you could also use (ngModelChange) to listen to changes. Thats more Angular style. And it gets even more interesting when you create your own "input" components with the ControlValueAccessor.
The problem in your example is, that you use the subscribed suggestionCategories directly. You could (theoreticly) do a "map" in the observable stream and filter out the unwanted values. But this would only work for each emited event of the observable.
So in your case i fear you have to subscribe to the source, store the result in a component local variable. You also copy the data in a second variable that you use to show the values on the UI.
And whenever the user selects a category, you take the original stored data, filter it and assign the filtered result to your second-variable.
HTML
<ng-select
name="category"
[items]="formSuggestions.categories$ | async"
bindLabel="name"
[(ngModel)]="formFields.category"
(ngModelChange)="filterCategorySugestions($selectedValue)"
></ng-select>
In Typescript you would then use the filterCategorySugestions Method to filter the data and write it into your second variable (mentioned above).
by the way, when filtering, you could afterwards apply a mylist.splice(10) (standard Array method) to limit your results to the first 10. But perhaps you should ensure the order first. :-)
I hope it helps a bit.
warm regards
Jan

can I pass a value to a sibling component without saving it as a variable?

I have some bootstrap vue cards with a v-for statement, one of my tags returns a value based on the current iteration of v-for. I want to pass this value to another tag, if I save it as a variable before passing it then all iterations end up sharing the same variables but I don't want that.
<b-card-group v-for="(element, i) in array" :key="index">
<b-card>
<tag #update="updateFunction()" />
<otherTag />
<b-card />
<b-card-group />
I want the variable to be specific to the current iteration so future iterations won't have access to it.

You are basically asking two questions, so I am going to answer them in turn.
The main problem you seem to have is that you do not know how to differentiate between each card in your updateFunction function. The easiest way to make your updateFunction context-aware, is by putting an arrow function that takes one argument, and calls updateFunction with two arguments.
Your update handler would look something like this. You take the index of the card you are trying to update, and the value that was sent from a sibling.
methods: {
handleUpdate(index, val) {
this.$set(this.cards, index, val);
}
}
You then use an arrow function to make the update handler context-aware:
<tag #update="(value) => handleUpdate(index, value)" />
As for the question in the title of your problem description: If you are passing a value as a prop, you have two options. You either put a literal in the prop (e.g. :my-prop="5"), or you put a variable in the prop (e.g. :my-prop="myVariable"). The first one obviously doesn't allow you to change the value, so that is not very useful here. The second one pulls the data directly from the state of the parent component. It is thus not possible to pass data as a prop without it being saved in the parent component.
As shown above, that doesn't mean you can't have different data for different iterations of your v-for though.
There are other methods of sharing data between siblings, which is especially useful in larger applications, by using a vuex store. This will allow you to abstract away data in useful "chunks" (or modules), allowing you to interact with it using getters, mutations and actions. You can find more information using the official documentation.

Optionally pass data to child element via directive

I have a popup dialog box that I wish to display one of two slightly different views, dependant on whether I have data present or not.
Is there a way in which I can optionally pass in said data within the directives?
ie. I would like to use something like
<my-comp *ngIf="ifPopup" [data]="myData" [isNew]="isNew"></my-comp>
where the [data] may not always be present, ie. It may either be undefined or have actual data present.
I just want to avoid having to basically duplicate my component.
Update after confusion around my question
Basically I am adding a new record to my DB (imagine adding a new customer etc). My component will either be used to edit a record or create a new record. If I am editing a record, myData will be filled with this record. If I am creating a new record, myData will be undefined..

why don't you just use
<my-comp *ngIf="ifPopup && myData" [data]="myData"></my-comp>
in this way, If the myData is not present, your popup wont display

Or you can also use <ng-container> and wrap your component inside and and use ngIf for your data!

Finding all numeric value from an array of object & perform multiplication or division

I am using ReactJs for building my web application. The application has a state variable which contains the state of the application. My application has a feature where user see three radio buttons (thousands, millions, actual). When user clicks thousands radio button, I need to show all the numeric values in thousands. Same login apply for millions.
The state variable contains array of object. Each object can have its own sets of properties. Each property can be numeric, object, boolean or string.
What I want: I want to go over each property, check if it is numeric type, if true, divide each value by 1000 in case of thousand radio button is checked (similar logic for million button).
What is the most efficient way to achieve desired result.

for formatting, use something like https://www.npmjs.com/package/format-number.
In render function of your component, use array.filter to filter out any non-numeric values, then map the result to something like renderValue function. In this function, check currently selected formatter, which will be saved in state (I'll get to it in a second) by this.state.formatter. Format your value using format-number package and your formatter from this.state.formatter and display it.
Filtering will look something similar to:
this.props.values.filter((value) => !isNaN(value)).map(this.renderValue)
When it comes to setting your formatter to state, create <Input type="radio" name="format" value={1000} onChange={this.handleChange}/>and your handleChange function:
handleChange: function(event) {
this.setState({formatter: event.target.value});
}

Best practices for the input helper in new Ember components

I'm currently learning about Ember's new data-down, actions-up paradigm for components. As discussed here, however, sometimes I want to allow the child component to modify the property explicitly. This is where the mut helper comes in: it creates a wrapper for the passed in value, containing a (readonly?) value and a function to update it. The example on that page is for a simple button which increments a counter.
How does this concept work if I'm using the input helper inside a component? For example, let's say I'm building a form which consists of a bunch of special form components:
// templates/index.hbs
<form>
{{form-control value=(mut model.firstValue)}}
{{form-control value=(mut model.secondValue)}}
</form>
If the form-control component just has the task of wrapping the input control, how do we use the passed-in mut object correctly? Is it something like?
// templates/components/form-control.hbs
{{input type="text" value=attrs.value.value input=attrs.value.update}}
My thinking here: the value of the input element is set to the value of the mut object, and whenever the input value changes (HTML5 input event) the update method of the mut object is called to set the model property to the new value. It seems there's something wrong with my thinking though, because this doesn't work. What is the "standard" way of doing this now? I'm using Ember 1.13.8.

In classic components (as opposed to glimmer components), all bindings are mutable, so it is not generally necessary to use the mut helper. The following should work fine:
// templates/index.hbs
<form>
{{form-control value=model.firstValue}}
{{form-control value=model.secondValue}}
</form>
// templates/components/form-control.hbs
{{input type="text" value=value}}
The intended use of both the mut helper and of attrs is for glimmer components, also called angle bracket components, which are currently not released in Ember.js' stable releases.