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

How can I customize the styling of Autocomplete chips in MUI ReactJS?

Trying to customize the color of the MUI Autocomplete component based on specific conditions, but struggling to find a solution. Any ideas? https://i.stack.imgur.com/50Ppk.png ...

javascriptcssreactjsmaterial-ui

What is the best way to include additional columns in a multiselect dropdown using jQuery select2?

I have implemented a multiselect dropdown feature using the jQuery select2 JavaScript library. The list items in this dropdown pertain to various medical drugs. I am looking to enhance this feature by adding a new column next to each selected drug, where ...

javascriptjquerydropdownjquery-select2multi-select

The key to subscribing only once to an element from AsyncSubject in the consumer pattern

When working with rxjs5, I encountered a situation where I needed to subscribe to an AsyncSubject multiple times, but only one subscriber should be able to receive the next() event. Any additional subscribers (if still active) should automatically receive ...

javascripttypescriptecmascript-6producer-consumerrxjs5

Styled-components causing issues with conditional rendering

Within my React component, I have multiple properties and I want styles to only apply if a property has a value. I attempted the following code: export const Text = ({text, color, size, fontFamily}) => { const StyledParagraph = styled.p` m ...

javascriptreactjsstyled-components

Implementing AJAX in Rails for the new/create action can greatly enhance the user

I have a timeline with event sections on it that allow you to create, view, update, and delete events directly on the timeline page. Currently, the functionality for deleting an event is working smoothly as the delete section refreshes along with the timel ...

javascriptjqueryruby-on-railsajax

The Blueimp File Uploader seems to be sending numerous submissions at once

I've been tasked with fixing an issue on our site that I didn't originally build. The previous developer who worked on this project is now occupied with another task, leaving me to figure out what's going wrong. We are utilizing the basic bl ...

javascriptjqueryajaxjquery-file-uploadblueimp

In order to access the localStorage from a different component, a page refresh is required as it is

UPDATE: Just to clarify, this question is NOT duplicate of how to retrieve the value from localstorage. My scenario is unique and the issue lies with Angular itself rather than localStorage. I am currently developing an Angular7 application. In one of my ...

javascriptangulartypescriptlocal-storageangular7

What is the best approach for declaring helper functions and constants within nest.js?

Currently, I am delving into the world of nest.js and building an API using it. However, I have hit a roadblock when it comes to defining constants and helper functions. Like many APIs, some of my endpoints require pagination, and I want to set a default ...

node.jstypescriptdependency-injectionnestjshelper

An issue has arisen regarding the type definition for the random-string module

I am currently working on creating a .d.ts file for random-string. Here is the code I have so far: declare module "random-string" { export function randomString(opts?: Object): string; } When I try to import the module using: import randomString = ...

node.jsmoduletypescript

Is it possible to utilize the Node.JS PassThrough stream as a straightforward input buffer?

In my Node.js application, I am utilizing a subprocess referred to as the "generator" to produce data. The challenge arises when the generator occasionally outputs a large chunk of data at a speed of around 50MB/s, while generally operating at a much slowe ...

javascriptnode.jsasync-awaitnode-streams

Conceal Bootstrap Toast for a day following dismissal

I have implemented Bootstrap 5 toasts to showcase an advertisement on my website. The goal is to make the advertisement disappear for 24 hours once the user closes it. Here's the current code snippet: <div class="position-sticky bottom-0" ...

javascripttwitter-bootstraplocal-storagebootstrap-5

When the textfield mui is set to shrink, an additional space appears in the label when using a font size of 12px

Struggling to customize the appearance of the textField component, particularly with the label when it is minimized: import * as React from "react"; import TextField from "@mui/material/TextField"; import { createTheme } from "@mui ...

javascriptcssreactjsmaterial-ui

Align dropdown navigation menu/sorting dropdown in the same position as the button

Exploring the world of dropdown menus in CSS has led me to encounter some challenges. I am striving to ensure that the dropdown boxes appear on the same line as the button that triggers them. Below is the CSS code I have been working with: /* global style ...

javascriptjqueryhtmlcss

What are the potential causes of an asynchronous error in a WebGLRenderingContext?

While running an animation loop, I encountered a peculiar error message that reads... GL ERROR :GL_INVALID_OPERATION : glDrawElements: Source and destination textures of the draw are the same. This error seems to occur randomly after 2 or 3 animation fr ...

javascriptasynchronousthree.jswebgl

iOS devices featuring the scroll function allows for seamless navigation and effortless

Here is the code snippet that I am using: $(document).scroll(function() { thedistance(); }); I would like thedistance() to trigger while a user is scrolling on an iOS device, however, it currently only fires after the scrolling has stopped, rather t ...

javascriptjqueryiosjquery-mobilescroll

The journey of data starting from a PHP file, moving through JavaScript, and circling back to PHP

I've encountered an interesting challenge with my PHP file and Wordpress shortcode. It all starts when the shortcode is embedded in a webpage, triggering a php function from within the file. This function executes an SQL query to extract data, then s ...

javascriptphp

Sharing Variables with $(document).ready

I need help understanding why this code is not functioning and how I can fix it. Despite my efforts to use namespaces and IIFEs, I am still unable to make it work. $(document).ready(function() { alert (hi); }); $(document).ready(function() { var hi = ...

javascriptjqueryhtml

I'm puzzled as to why I am unable to invoke a class method within this callback function. The error message indicates a TypeError: 'this' is undefined

Currently, I am troubleshooting a challenge in my Angular application that involve TypeScript. The issue lies within a method in a TypeScript class: findArtistBidsAppliedByCurrentWall(bid):Observable<Bid[]> { console.log("findArtistBidsApplied ...

javascripttypescript

What is the most effective method for locating and modifying the initial instance of an element within a group?

In my Javascript/Typescript collection, I have the following items: [ {"order":1,"step":"abc:","status":true}, {"order":2,"step":"xyz","status":true}, {"order":3,"step":"dec","status":false}, {"order":4,"step":"pqr","status":false}, {"order":5,"step":" ...

javascriptarraysalgorithmtypescript

Issue: The initial parameter should be a File or Blob object

Hey there! I'm currently utilizing the compressorjs plugin for compressing images, but I'm encountering an issue when selecting images. You can find out more about the plugin here. Here is my code snippet: window.resolveLocalFileSystemURL( ...

javascriptnode.jsangularcordovaionic-framework