Angular 6 and the intricacies of nested ternary conditions

I need help with a ternary condition in an HTML template file:

<div
*ngFor="let $m of $layer.child; let $childIndex=index"
[Latitude]="$m.latitude"
[Longitude]="$m.longitude"
[IconInfo]="$childIndex== 0 ? _iconInfo1:$childIndex== 1 ? _iconInfo 
:$childIndex== 2 ? _iconInfo2:$childIndex== 3 ? 
_trunkLocMarker1:_trunkLocMarker"></div>

Now, I want to modify the value of a particular property in IconInfo based on a condition like this:

if($m.propertyValue > 1000){
  _iconInfo1.property = 'someValue';
}

However, when I tried to incorporate this into the existing ternary condition, I encountered an error:

[IconInfo] = "$childIndex== 0 ? _iconInfo1:$childIndex== 1 ? _iconInfo :$childIndex == 2 ? _iconInfo2 : ($m.totalMou > '1000' ?_iconInfo2.fontSize = '48' : _iconInfo2.fontSize = '48'): $childIndex == 3 ? _trunkLocMarker1 : _trunkLocMarker "

The error message stated:

Uncaught Error: Template parse errors:
Parser Error: Bindings cannot contain assignments

If anyone could provide a solution or suggestion, it would be greatly appreciated.

Thank you!

Answer №1

The issue here is with assignments in your code. There are two of them (remember, `=` denotes assignment).

$m.totalMou > '1000' ? _iconInfo2.fontSize = '48' : _iconInfo2.fontSize = '48'

Just a heads up: It's not advisable to have multiple nested ternary conditions, especially within the template. This can make the code difficult to understand. I recommend moving that logic to the TypeScript file for better organization.

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

extracting the value of an option from a form control to utilize in the component's model

I'm currently facing an issue where I am unable to retrieve the value of an option selection in my component class for further processing. Despite setting the value as [value]="unit" in the view, it still shows up as undefined when passed through onMo ...

JavaScript animation is not functioning as expected

I created a div with the id of "cen" and gave it a height and width of 50px. $(document).ready(function() { $("#cen").animate({ height: 500px, width: "500px", }, 5000, function() { // Animation complete. }); }); Unfort ...

Best practices for alerting using React and Redux

As I delve into Redux for the first time and work on revamping a fairly intricate ReactJS application using Redux, I've decided to create a "feature" for handling notifications. This feature will involve managing a slice of state with various properti ...

Deploying an Angular application on AWS EC2 without using nginx as a reverse proxy

Our team has been tackling the challenge of hosting an Angular application on AWS. A question has emerged: can we deploy the Angular application without relying on nginx? This inquiry arose when we successfully deployed a node.js application without any ...

What is the method to select a hyperlink that includes a variable in the "href" attribute and click on it?

Currently, I am in the process of creating acceptance tests utilizing Selenium and WebdriverIO. However, I have encountered a problem where I am unable to successfully click on a specific link. client.click('a[href=#admin/'+ transactionId + &apo ...

Display the contents in a textarea with modal, not as a string

I'm currently working on implementing a modal overlay window with simplemodal that will display the contents of a text area. My goal is to show the rendered output rather than just the string value. For example, if a user enters HTML or includes an im ...

Issues with the functionality of the asynchronous socket.io JavaScript callback are being experienced

I am facing an issue with my JavaScript code that involves querying data from a database using Node.js and Socket.io. Currently, I have implemented setTimeout() functions to make it work, but I want to switch to using callbacks for better reliability. Howe ...

Exploring Angular5 Testing Utilizing Jasmine: A Component Found in Both the AppModule and DynamicTestModule's Declarations

Currently, I'm working on writing my initial test and facing a specific error: An error stating that Type SearchComponent is part of the declarations of 2 modules – AppModule and DynamicTestModule. The suggestion is to consider moving SearchCompo ...

What is the best way to save the values of all the input fields in a datatable, excluding any fields that are empty?

$('form').on('submit', function(e){ var form = this; // Encoding a set of form elements from all pages as an array of names and values var params = table.$('input').serializeArray(); // Iterating over all form ...

It is impossible for me to invoke a method within a function

I am new to working with typescript and I have encountered an issue while trying to call the drawMarker() method from locateMe(). The problem seems to be arising because I am calling drawMarker from inside the .on('locationfound', function(e: any ...

An issue arises with Autocomplete when attempting an ajax request and an error is

I'm struggling to implement jQuery Autocomplete on a text box, but it's not functioning properly. Below is my script for retrieving autocomplete list from the database. However, I encounter an error that displays an alert with an error message. ...

Clicking on "li" to activate and deactivate

Currently utilizing: $('#btnEmpresarial').attr('onclick','').unbind('click'); In order to deactivate a read using javascript.. However, I now require enabling the onclick after the function has completed. Is ther ...

Is it possible to transfer a massive number of files using node.js?

I need to asynchronously copy a large number of files, about 25000 in total. I am currently using the library found at this link: https://github.com/stephenmathieson/node-cp. Below is the code snippet I am using: for(var i = 0; i < 25000; i++ ...

Navigating with Buttons using React Router

Header: I need help figuring out how to properly redirect to a new page when clicking on a Material UI button using the onClick method. Specifically, I am unsure of what to include in my handleClickSignIn function. Here is a snippet of code from my Header ...

Comparing the functions of useMemo and the combination of useEffect with useState

Is there a benefit in utilizing the useMemo hook instead of using a combination of useEffect and useState for a complex function call? Here are two custom hooks that seem to function similarly, with the only difference being that useMemo initially returns ...

What are the signs that an element was visible on screen prior to navigation?

Recently, I incorporated SlideUp and SlideDown jquery animations into my website. You can check it out by visiting (click the >>>). However, I noticed a small issue where when users navigate to a new page, they have to re-SlideUp the element that was sl ...

Steps for creating a jasmine test suite

I'm currently creating a unit test for Angular2 using Jasmine. Below is the code snippet I am working with: component.ts toggleSelect() { this.checked = event.target.checked this.tree.forEach(t => { t.checked = this.checked }) ...

Is there a way to get an iframe to mimic the behavior of other media elements within a horizontal scrolling container?

Take a look at this code snippet: $(document).ready(function() { $('.scrollable-area').on('wheel', function(e) { var scrollLeft = $(this).scrollLeft(); var width = $(this).get(0).scrollWidth - $(this).width(); var delta ...

Building a custom onChange event handler in Formik allows for greater

I want to modify the onChange function in formik input so that it converts the value from a string to a number. However, I'm unable to change the behavior as expected and the console.log doesn't show up on the screen. It seems like Formik's ...

Utilizing the map() method for iterating through a nested property within a React component

Currently, my React setup involves rendering a prop named area which has the following structure: [{ "id": 1, "name": "Europe", "Countries": [{ "id": 1, "name": "Iceland", "Cities": [{ "id": 1, " ...