Setting a value in Ionic 3 HTML template

Attempting to assign a value in an Ionic 3 template from the ts file while also adding css properties but encountered an issue.

PROBLEM

Error: Uncaught (in promise): Error: No value accessor for form control with name: 'image' Error: No value accessor for form control with name: 'image'

Code snippet below:

HTML

<img name="image" [(ngModel)]="image" id="image" src="https://openclipart.org/image/2400px/svg_to_png/247149/dual-compass-rose.png" alt="">

TS

this.image.style.transform = 'rotate(' + this.magneticHeading + 'deg)';

Uncertain about the reason behind the malfunction, suspecting Angular's rejection towards the manipulation attempt in TS through .style.transform...

javascripttypescriptionic-frameworkangular-ngmodel

Answer №1

To reference an image tag from your DOM, use @ViewChild and [src] instead of ngModel:

Typescript:

  @ViewChild('myImage') myImage;
  magneticHeading = '100';
  image="https://openclipart.org/image/2400px/svg_to_png/247149/dual-compass-rose.png"
  ...
  ngAfterViewInit() {
    this.myImage.nativeElement.style.transform = 'rotate(' + this.magneticHeading + 'deg)';
  }

HTML:

  <img #myImage name="image" id="image" [src]="image" alt="">

DEMO

Alternatively, you can set it from HTML:

  <img #myImage [style.transform]="'rotate(' + magneticHeading + 'deg)'" name="image" id="image" [src]="image" alt="">

DEMO

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 assign a unique ID to every <td> element within a table using React Js?

Hello everyone. I am currently working on assigning unique ids to each td in a table based on data received through an API. This is what my code looks like so far. CodeSandbox const assignIdsToTableData = (data) => { var items = Object.values(data)[0 ...

javascriptreactjshtml-tablenormalization

Tips on managing ASP .NET API's HttpResponseMessage for file downloads

I came across a solution on how to download a file from an asp.net API at this link: As a result, I created an API handler with the following code: public HttpResponseMessage Post([FromBody]dynamic result) { var localFilePath = graph ...

javascriptasp.netangularjsajaxasp.net-web-api

What is the best way to utilize v-model with an array of strings in a Vuex store when using v-for

Encountered an issue while trying to set a value in an Array within the Vuex Store: VueCompilerError: v-model cannot be used on v-for or v-slot scope variables because they are not writable. Seeking alternatives to achieve this without creating a local co ...

typescriptvue.jsvuex

Type of flow: customizable prop types for React components that can be extended

In the scenario where a SelectOption component is present, with props defined as: type OptionType = { +id: string, +label: string, } type Props = {| +options: OptionType[], +onItemPress: OptionType => void |} I intentionally left the OptionType ...

javascriptreactjsflowtype

Can we avoid the error callback of an AJAX request from being triggered once we have aborted the request?

Initially, I encountered a challenge where I needed to find a way to halt an AJAX request automatically if the user decided to navigate away from the page during the request. After some research, I came across this helpful solution on Stack Overflow which ...

javascriptjqueryajaxasp.net-ajax

Issue: Module 'curl' is not located at Function.Module._resolveFilename (module.js:489:15)

After installing node.js using the Windows installer, I noticed that the folder structure created was C:\Program Files\nodejs\node_modules\npm\node_modules. It seems like all the module folders are in the last node_modules director ...

javascriptjquerynode.jsnpm

The Next.js app's API router has the ability to parse the incoming request body for post requests, however, it does not have the

In the process of developing an API using the next.js app router, I encountered an issue. Specifically, I was successful in parsing the data with const res = await request.json() when the HTTP request type was set to post. However, I am facing difficulties ...

javascripttypescriptnext.jsnext.js13

Transforming intricate JSON data into a structured table format

I'm struggling to transform the nested JSON data into an HTML table, but I keep encountering an error. I'm uncertain about where I may have made a mistake. Could it be related to how I am trying to access the array within the object? Here' ...

javascriptjson

Extending the declaration of JavaScript native methods is not possible when using TypeScript

When attempting to enhance the JS native String class by adding a new method, I encounter error TS2339. interface String { transl(): string; } String.prototype.transl = function() { // TS2339: Property 'transl' does not exist on type 'St ...

javascripttypescript

Tips for transferring the name field to a different page upon clicking

There are two pages in my project - the first one is called ItemMenuPage and the second one is called CartPage. The functionality I am trying to achieve is that when a user clicks on any item name on the ItemMenuPage, it should navigate to the CartPage, wi ...

javascriptangularjsionic-framework

Implementing the 'keepAlive' feature in Axios with NodeJS

I've scoured through numerous sources of documentation, Stack Overflow threads, and various blog posts but I'm still unable to make the 'keepAlive' functionality work. What could I be overlooking? Here's my server setup: import ex ...

javascriptnode.jstypescriptaxioskeep-alive

Utilizing the principles of object orientation in Javascript to enhance event management

After attempting to modularize my JavaScript and make it object oriented, I found myself struggling when dealing with components that have multiple instances. This is an example of how my code currently looks: The HTML file structure is as follows: & ...

javascriptjqueryoop

The promise catch method does not handle JSON parsing correctly

Utilizing Angular's Http to interact with my API has been successful for handling responses with a status of 200. The data is parsed correctly and outputted as expected within the first .then() block. However, when encountering an error with a status ...

javascriptjsonangularangular-http

strange issue encountered while utilizing JavaScript's async/await syntax

Recently, I encountered an issue while trying to retrieve a random user from the randomuser API using code in my Vue frontend. // Here is the structure of the API response { info: { // details omitted }, results: [ {//random user data} ] } // This snippet ...

javascriptvue.jsasync-await

Is there a built-in function in Firefox that can retrieve a list of all indexedDB names stored in the

When working in chrome, I utilized the window.indexedDB.databases() method to retrieve all indexedDb names. However, this same method does not seem to be functioning in firefox. In an attempt to resolve this issue, I will explore alternative methods such ...

javascriptfirefoxindexeddbpouchdbfirefox-developer-tools

"Master the art of using express and jade to loop through data and generate dynamic

Hey there! I have a question regarding node.js. When working with express, we typically have multiple files such as app.js, index.jade, index.js, and server.js where most of the server logic resides. Let's say we have two objects defined in server.js ...

javascriptjquerynode.jsexpresspug

Should we enable client-side validation and unobtrusive JavaScript in the Web.config file?

I'm currently working on an ASP MVC application, where all form and UI code is written in AngularJS for validation purposes. I didn't use any HTML helpers. Do I need to include the entries ClientValidationEnabled and UnobtrusiveJavaScriptEnabled ...

javascriptasp.net

Combine several dictionary values under a single dictionary key in JavaScript

I have a unique dictionary structure displayed below. My goal is to populate it with values in a specific way. It all begins here var animals = { flying : {}, underground : {}, aquatic : {}, desert : {} }; To illustrat ...

javascriptjsondictionary

How to Create a Custom Callback Function for jQuery's .html

I am currently working with the following code: $.ajax({ type: 'GET', url: 'index.php?route=checkout/onepagecheckout/getpaypaldata', dataType: 'json', success: function(json) { ...

javascriptjqueryajaxjson

Editing XHTML on the fly

Is there a tool available for non-technical individuals to edit hard-coded content in XHTML? I am interested in a solution similar to the integration of Pagelime with jEditable. Currently, my website is static and I am seeking a way for one person to log ...

javascriptjqueryxhtml