I'm encountering difficulty accessing the Index value within the template's Ref

I'm having trouble accessing the index value inside the templateRef. It shows as undefined in the console.

  <ng-container *ngFor="let notification of notifications; let i = index">
    <ng-template 
      *ngTemplateOutlet="notificationPageContent; context: { notification: notification, index: i  }">
    </ng-template>
  </ng-container>

  <ng-template #notificationPageContent let-notification=notification let-index=i>

While I can access the notification value without any issues, I am not able to access the index value. Can someone please assist me with this?

****Update**

<ng-template #notificationPageContent let-notification=notification let-index=i>
          <notification
          (notificationClosed)="notificationCloseHandler($event, i)"
          >

Even after making these changes and clicking the button triggering the notificationClosed function, the i value still remains undefined. What could be causing this issue?

javascriptangulartypescript

Answer №1

Give this a try: It seems that we are currently using the index value incorrectly, please review line #1 for the correct syntax. You should receive 'i' as the index now that we are passing o TemplateOutlet as the index in your ng-template.

<ng-container *ngFor="let notification of notifications;index as i">
    <ng-template 
      *ngTemplateOutlet="notificationPageContent; context: { notification: notification, index: i }">
    </ng-template>
  </ng-container>

  <ng-template #notificationPageContent let-notification=notification let-index=i>

I hope this clears things up... Happy coding :)

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

The NetSuite https.post() method is throwing an error that reads "Encountered unexpected character while parsing value: S. Path '', line 0, position 0"

I'm currently facing an issue when trying to send the JSON data request below to a 3rd party system using the "N/https" modules https.post() method. Upon sending the request, I receive a Response Code of "200" along with the Error Message "Unexpected ...

javascriptjsonhttpsnetsuitesuitescript2.0

How do I repeatedly invoke a function in JQuery that accepts two different arguments each time?

I have a collection of folders, each containing various images. The number of pictures in each folder ranges from 8 to 200. Folders are numbered from 1 to 20 and the images within them are also labeled numerically. My goal is to aggregate all these images ...

javascriptjqueryhtml

developing a deferred commitment by utilizing promise objects

Hi everyone, I've encountered an issue with a JavaScript promise question that's throwing errors function delay(n) { return new Promise((resolve) => setTimeout(resolve, n*1000)); } The expected output should be "It is now 2 seconds later" ...

javascript

What tool can be used for formatting and syntax highlighting when working with ejs (embedded javascript) templates?

When working on my project, I utilize EJS as the express templating engine. While it is user-friendly and efficient, I have encountered difficulties when it comes to editing files - the text highlighting could be better, and I have not been able to find an ...

javascriptnode.jsexpresstemplatesejs

Creating Awesome Icons in Kendo Grid with Code In this tutorial, we will learn how to programm

Looking to have a Kendo grid display a green fas-fa-clock icon if isActive is true, and a grey far-fa-clock icon if false. Clicking on the icon should toggle between true and false. Currently, the grid just shows the word true or false in the column. Cod ...

javascripthtmlcssangularkendo-ui

Retrieve select options only upon clicking

Essentially, I have a default value that needs to be loaded into a select element and then make an API call to load the rest only when the select is clicked. <select (click)="getSubevents(market_uri)"> <option *ngFor="let subeven ...

angular

In what way can you reach an unfamiliar form within a controller?

I am working with multiple dynamically generated forms, each associated with a different model. In my controller, I need to iterate through all the errors within the forms. I assign form names based on the models. <form name="{{myForm}}" novalidate> ...

javascriptjqueryangularjshtml

I'm seeking guidance on how to delete a specific ul li element by its id after making an ajax request to delete a corresponding row in MySQL database. I'm unsure about the correct placement for the jQuery

I have created an app that displays a list of income items. Each item is contained within an li element with a unique id, along with the item description and a small trash icon. Currently, I have implemented code that triggers an AJAX call when the user cl ...

javascriptphphtmlcssajax

Encountering a 500 internal server error after deploying due to utilizing getServerSideProps in Next.js

When trying to redeploy my website on Vercel, I added getServerSideProps to my index.js file. However, I encountered an error that I am not familiar with. The program works perfectly on localhost. This is the getServerSideProps code that I added: export a ...

javascriptreactjsnext.js

Adding Currency Symbol to Tooltip Data in Material-UI Sparklinechart

Below is a SparklineChart example using MUI library: import * as React from 'react'; import Stack from '@mui/material/Stack'; import Box from '@mui/material/Box'; import { SparkLineChart } from '@mui/x-charts/SparkLineCha ...

javascriptreactjsmaterial-uimui-x-charts

"Extracting information from the axios header and passing it to a Vue component: A step-by-step

I am working with an axios apiClient and trying to retrieve the email stored in localStorage to use in the header of my component. I attempted to access the email by using response.headers['email'] and storing it in a variable called email, but ...

javascriptvue.jsvuejs2axiosvue-component

Error: The module you are trying to import from the package is not found. Please check the package path and make sure that

I encountered an issue when trying to compile a code in Reactjs. As a beginner in Reactjs, I'm struggling with this. Module not found: Error: Package path ./cjs/react.development is not exported from package /Users/mansi/letsgrowmore/to-do-list/my-rea ...

javascripthtmlcssnode.jsreactjs

Is there a way to transfer parameters from a Vue function to a component?

I am struggling to find the right solution for passing parameters to a function. I need to use NavigateTo to send a String value to my index in order to switch components without using Vue Router. Home.js Vue.component('Home', { props: [&apo ...

javascriptfunctionvue.jsfunction-parameter

Updating/Timer feature for a single feed out of two -- Combining data with $q.all()

I'm revisiting a question I previously asked here. The approach I took involved using the $q.all() method to resolve multiple http calls and then filtering and merging the data. Everything was working fine, but now I want to refresh one of the feeds ...

javascriptangularjstimeoutq

What is preventing me from utilizing require in vue-router's routes.js file?

Vue-router typically requires the standard setup as outlined below: In main.js, the routes.js file is required and it usually contains code similar to this: //routes.js import Register from './components/Register' import Login from './comp ...

javascriptvue.jsimportvue-routerrequire

Is there a way to invoke a method in Jest Enzyme without using .simulate()?

During my unit testing for a React flight seat selection application using Jest/Enzyme, I encountered a scenario where I need to test a method within my class-based component that runs after a button is clicked. However, the button in question resides deep ...

javascriptreactjsjestjsenzyme

How to stop parent event propagation in jQuery

I am facing a frustrating issue with my code. Every time I toggle a checkbox, the parent element's click event also triggers. I have experimented with various solutions like: event.stopImmediatePropagation(); event.stopPropagation(); event.preventD ...

javascripthtmljquerydomjquery-events

Is there a way to ensure that the table headers are printed on every page when using Google Chrome

When printing documents in Chrome browser, the table header (thead) does not appear on every page. I want to ensure that the table header is displayed on each printed page, just like it is done with IE and Firefox. However, Chrome does not support this fea ...

javascriptjqueryhtmlcssgoogle-chrome

Issues with reactivity are present in certain items within Vue.js cards

Can someone please assist me with this issue that has been causing me trouble for days? I am working on updating the quantity and total price in a checkout card: The parent component: <template> <div> <upsell-checkout-product ...

javascriptvue.jsvue-reactivity

The AudioContext feature is functioning properly on Google Chrome but experiencing issues on Safari

In Safari, I understand that audio context needs to be created after user interaction. Despite this knowledge, the code below still didn't produce the desired result. HTML <button onclick="play">Play</button> Javascript functio ...

javascripthtmlsafariaudiocontext