Error in strict mode: Undefined variable in Angular 2 inline template

My Angular 2 application has been throwing an error message stating "Error: Error in ./SampleComponent class SampleComponent - inline template caused by: Variable undefined in strict mode". Strangely, this error only occurs in IE 10.

<input type="text" class="form-control" name="name" formControlName="name" placeholder="Name" [nameFormatter]="selected">

The issue seems to stem from the "selected" value that is being passed to the attribute directive nameFormatter. This variable is initially set within the component. Interestingly, if I replace the selected variable with a static value, everything works fine. It's only when attaching it to the selected variable that the problem arises.

export class NameComponent implements OnInit {
   public selected : string;

    someFunction(){
         this.selected="some value"; //The value changes depending on certain conditions
    }
}

I have tried adding polyfills to index.html in an attempt to resolve this issue, but without success. Here are the polyfills I added:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
  <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
  <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

If anyone could provide guidance on how to tackle this problem, I would greatly appreciate it.

javascriptangulartypescriptangular-cli

Answer №1

this within the function someFunction is not referencing the NameComponent object; it resides in a separate closure.

If your objective is to invoke the function from the view (in the html file), follow these steps:

export class NameComponent implements OnInit {
   public selected : string;

   someFunction(){
     this.selected="some value" //The value will vary based on certain conditions
   }
}

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

Explanation of TypeScript typings for JavaScript libraries API

Currently, I am in the process of building an Express.js application using TypeScript. By installing @types and referring to various resources, I managed to create a functional program. However, my main query revolves around locating comprehensive document ...

javascriptexpresstypescript

Using jQuery to submit an array within a form - a comprehensive guide

My goal is to accumulate form data each time the user clicks add_accommodation and add it to an array that will be sent to the endpoint http://server/end/point. <form action="http://localhost:3000/a/b/c" method="post"> <div> <input ...

javascriptjqueryhtmlarrays

Having trouble with Angular 2 forms even after ensuring all validations are in place?

In my component, I have three input fields that are all required. I have added the 'required' attribute to each input element and placed them all within a form tag. When the button is clicked, I need to send the values of these 3 fields to a web ...

angular

Stop MatDialog from closing automatically when clicked outside while there are unsaved changes

Is there a way to prevent closing when there are pending changes without success? this.dialogRef.beforeClosed().subscribe(() => { this.dialogRef.close(false); //some code logic //... }); The setting disableClose on MatDialog must remain as false ...

javascriptangulartypescriptangular-materialdialog

Interactive image map with hover effects and external image swapping placed beyond the container

I've encountered a problem with a responsive image map and rollovers. Using Matt Stow's responsive image jQuery plugin ensures that coordinates are responsive, and clicking on an area brings up Lightview as expected. However, the issue arises whe ...

phpjavascriptjqueryresponsive-design

What is the best way to convert an HTML table into an array of objects?

In my Angular Protractor end-to-end (e2e) tests, I need to perform assertions on an HTML fragment similar to the following: <table> <thead> <tr> <th>Name</th> <th>Age</th> ...

javascriptangulartypescriptprotractorend-to-end

Is Selenium suitable for testing single page JavaScript applications?

As a newcomer to UI testing, I'm wondering if Selenium is capable of handling UI testing for single-page JavaScript applications. These apps involve async AJAX/Web Socket requests and have already been tested on the service end points, but now I need ...

javascripttestingselenium

What is the best way to send an observable with parameters through @Input?

The objective is to transfer an http request from Component 1 to Component 2 and initialize its parameters on Component 2. Here is a pseudo code representation of my approach: Component 1 HTML <app-component-2 [obs]="obs"></app-component-1> ...

htmlangulartypescriptparametersobservable

Having trouble with the rendering of the Stripe Element Quickstart example

Currently, I am diving into the world of Stripe's Element Quickstart. Take a look at this fiddle that I have been working on. It seems to be quite different from the example provided. Although I have included the file, I can't seem to figure out ...

javascripthtmlcssstripe-payments

What is the best approach for testing a component that makes use of React.cloneElement?

My main component fetches children using react-router in the following manner: class MainComponent extends Component { render() { return ( <div> {React.cloneElement(children, this.props.data)} </div> ) } } I a ...

javascriptreactjsjestjs

Executing Javascript functions using a variable string name

Seeking advice on the most effective approach for calling functions with variable names that adhere to a specific rule. I am exploring alternatives to using eval() due to the numerous concerns raised about its usage online. In my current setup, each group ...

javascriptreactjs

Navigation buttons that move the user either up or down the page

I am a beginner in programming and I wanted to create two buttons for my webpage. One button should appear when the page is scrolled more than 300px and take the user to the top, while the other button should be displayed immediately and scroll the user to ...

javascripthtmlcssscrollonclick

Is it possible to blend javascript with server-side javascript code in a single project?

At the moment, I find myself in a peculiar situation where I need to combine JavaScript with server-side code. Here's how it looks: function PerformGlobalCallback(sender, value) { var index = hfCurrentTabIndex.Get("activeIndex")); wi ...

javascriptasp.netdevexpressclient-side

"Implementing class names with hash function in Next.js version 14

What is the updated method to hash CSS class names for nextJS v14? The previous approach used to involve: const path = require("path"); const loaderUtils = require("loader-utils"); const hashOnlyIdent = (context, _, exportName) => ...

javascriptreactjsnext.jshash

Instructions for implementing an inline toolbar in a contenteditable="true" feature

I am currently developing a page that allows users to edit its content directly on the page. To achieve this, I have set the attribute contenteditable="true" for all the elements within the page. My goal is to show an inline toolbar with basic editing op ...

javascriptphphtmljquerycss

Is there a way for me to provide the product ID based on the selected product?

Is there a way to store the IDs of selected products in a dynamic form with multiple product options? I am able to see the saved products in the console.log(fields, "fields");, but how can I also save the selected product IDs? Any guidance on th ...

javascriptreactjsmaterial-uireact-hook-form

Verify whether the value is considered false, true, or null

When dealing with variables in JavaScript, I often need to determine if a variable is false, true, or null. If the variable is null or undefined, I want to assign an array to it by default. While this syntax works well in other languages, in JS assigning a ...

javascript

Challenges Encountered when Making Multiple API Requests

I've encountered a puzzling issue with an ngrx effect I developed to fetch data from multiple API calls. Strangely, while some calls return data successfully, others are returning null for no apparent reason. Effect: @Effect() loadMoveList$: Obse ...

javascriptangulartypescriptngrx-effects

Interested in integrating Mockjax with QUnit for testing?

I recently came across this example in the Mockjax documentation: $.mockjax({ url: "/rest", data: function ( json ) { assert.deepEqual( JSON.parse(json), expected ); // QUnit example. return true; } }); However, I'm a bit confused abou ...

javascriptjqueryajaxqunitmockjax

Ways to activate the onclick function of a div element with JavaScript

I am trying to trigger the onclick event of my div using a click event in javascript. However, I am only able to trigger the onclick event using jquery. Here is the code snippet: html += '<div id="add_redirect" class="row pl_filter_v ...

javascriptjqueryonclickonload