Trouble setting custom attribute tags in Ionic 4

Trying to apply custom attributes within a ngFor loop is proving challenging for me.

<ng-container *ngFor="let a of this.current_items?.areas; let i = index">
  ...

I've made several attempts:

<div class="productBatchArea" custom-data='{{ a.title }}'>
// ERROR: Cannot bind to 'custom-data' as it is not a recognized property of 'div'

<div class="productBatchArea" [data-teste]="a.title">
// ERROR: Cannot bind to 'data-teste' as it is not a recognized property of 'div'

<div class="productBatchArea" data-teste="{{ a.title }}">
// ERROR:  Cannot bind to 'teste' as it is not a recognized property of 'div'

Is there something I'm missing in my approach?

angulartypescriptionic-framework

Answer №1

Attempt it in this way

[attr.custom-data]="a.title"

Inform me if it does not function

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

Sending data between components in Angular can be achieved by using various methods. One common approach is to utilize

I am encountering an issue with a component named customers.component Below is the code from the customers.component.ts file: @Component({ selector: 'app-customer', templateUrl: './customer.component.html', styleUrls: ['./cu ...

htmlangulartypescript

Utilizing TypeScript typing with the Express Request object

Encountering an issue with Typescript typings involving the Express Request object. The project is comprised of 2 sub-projects, the user-service and a common project containing reusable Errors and Middlewares. The common folder is added as a dependency in ...

node.jstypescriptexpress

Unable to assign a value to an undefined property in TypeScript

I need to store data in an object and then add it to another object let globalSamples = {} as any; let sample = { } as ISamplesDetail []; sample = []; for (let i = 0 ; i<this.prelevementLingette.samplesDetail.length; i++) { sample [i].id= thi ...

typescript

How to manage Angular production site redirection

Having trouble with my application in a production environment. The routes are not working and causing 404 errors. What changes do I need to make in my project to ensure the routes work in this environment? Local: http://localhost:4200/test Production: h ...

angular

The Angular Node server is responding with the error message "You have entered 'undefined' instead of a stream."

Using angular 9 + universal has been smooth sailing until I encountered an issue after building the app with npm run build:ssr and attempting to run it using node: node dist/app/server/main.js. The error message that popped up in the terminal was: Node ...

javascriptnode.jsangulartypescriptrxjs

Receiving undefined when subscribing data to an observable in Angular

Currently, I am facing an issue in my Angular project where subscribing the data to an observable is returning undefined. I have a service method in place that retrieves data from an HTTP request. public fetchData(): Observable<Data[]> { const url = ...

javascriptangulartypescriptobservablesubscribe

Inquiry regarding the return value of 'async-lock' in nodejs

I am utilizing the async-lock module in my typescript project to handle concurrency. However, I am encountering difficulties with returning the result within lock.acquire(...) {...}. Any guidance on how to resolve this issue would be greatly appreciated. ...

node.jstypescriptconcurrency

What is the best way to extract ABC 12005 from strings like ABC000012005 and ABC0000012005?

My task involves parsing a string with values like ABC000012005,ABC0000012005. The desired output is to extract the prefix and numbers without leading zeros, formatted as ABC 12005, ABC 12005 ...

javascriptangular

Unable to retrieve local property when inside a Callback function in Ionic2

I am encountering an issue with my Ionic 2 app that utilizes Angular2. It is a basic problem, but it has been quite frustrating for me. Below is the component in question... import {Component} from "@angular/core"; @Component({ '<ion-content> ...

javascriptangularecmascript-6ionic2

Deducing the return type of asynchronously generated functions

My expectation is to automatically determine the return type of async functions when they are yielded as values from a generator. In the following example, the inference of the type of the yielded async functions appears to work correctly (detected as () ...

typescript

The function 'appendChild' is not recognized on the type 'unknown'.ts(2339)

I'm encountering an issue while trying to integrate the Utterances component into my articles. Upon attempting to build the site, I receive the following error message: "Property 'appendChild' does not exist on type 'unknown' ...

reactjstypescriptnext.js

I'm encountering difficulties utilizing ternary operators in TypeScript

I am struggling with ternary operators in TypeScript and need help understanding the issue. Please review the code below: const QuizQuestionContainer = ({ qa }: QuizQuestionContainerPropsType) => { const { question, option1, option2, option ...

htmlreactjstypescriptforms

Utilizing the <slot> feature in Angular 5 for increased functionality

Currently, I am working on a single page application (SPA) where Vue framework has been utilized for development purposes. Front-End: Vue Back-End: NodeJs Within my application, there are other sub-modules built in Angular 4. I am looking to replicate th ...

node.jsangularvue.js

Connecting Angular components to the Document Object Model (DOM)

In previous versions of AngularJS, you could create a directive and link it to an existing controller, allowing you to use the same controller for multiple directives with different templates. angular .module('App') .component('Name', ...

angularjsangular

Is it considered appropriate to return null in a didReceiveResponse callback function?

In my implementation, I have a callback called didReceiveResponse within a class that extends RESTDataSource. In this method, I return null when the response status is 404. However, due to the typing definition of RESTDataSource.didReceiveResponse, it seem ...

typescriptapolloapollo-serverapollo-datasource-rest

When utilizing a [ngSwitch] with the toolbar (md-toolbar) in Angular2, the buttons fail to load correctly

I am currently designing a toolbar that includes a menu button using the following code: <md-toolbar class="header"> <div class="header-wrapper m-x-30 clearfix"> <div class="logo-container"> <div class="logo-image align-middle" ...

angularangular2-material

Determining the total number of items in an array in Angular efficiently without causing any lag

Currently, I am using the function checkDevice(obj) to validate if a value is present or not. In addition to this functionality, I also require a separate method to determine the number of occurrences of Device in the Array. component.ts public checkDevi ...

angulartypescriptangular-ui-router

Error in backend request originating from an Angular 2 source

I have an email for user verification that includes a link to my angular 2 route localhost:4200/verify/{userId}. When the user clicks on this link, it directs them to the angular 2 route where I extract the userId from the URL and pass it into my service. ...

node.jsangularexpress

The interfaces being used in the Redux store reducers are not properly implemented

My Redux store has been set up with 2 distinct "Slice" components. The first one is the appSlice: appSlice.ts import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import type { RootState } from "./store"; export interface CounterState { value ...

javascriptreactjstypescriptreduxreact-redux

Guide on converting any object with keys of type string to a generic type

I'm grappling with a function that yields an Output generic type. In this function, I initiate an API request that responds with a json object. My aim is to have the function return this json object in the Output Generic type format Take a look at th ...

typescript