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

Best practices for correctly parsing a date in UTC format using the date-fns library

My log file contains timestamps in a non-ISO format: 2020-12-03 08:30:00 2020-12-03 08:40:00 ... The timestamps are in UTC, as per the log provider's documentation. I am attempting to parse them using date-fns: const toParse = "2020-12-03 08:40 ...

javascripttypescriptdatetimezonedate-fns

Tips for relocating a div panel below all other div panels when a button is clicked with JQuery and CSS

There are several panels stacked below each other. Each panel has a button that, when clicked by the user, should move the panel to the bottom of the stack. For example: If there are 10 panels aligned sequentially and the user wants to remove Panel 2 by ...

javascriptjqueryhtmlcss

Conceal the message "Table does not contain any data" if data exists in the table

This table is populated with data retrieved via JSON. Here is the structure: <table id="tblClaimSearch" class="display responsive nowrap" cellspacing="0" width="100%"> <thead> <tr> <th><input type="checkbox" ...

javascriptjqueryhtml

The value of a select box cannot be retrieved until it has been clicked on

I am working with a selectBox element in my code: <select class="span2" name="filterYear" id="filterYear" style="margin-right:10px;"> <% for (var i = 0; i < years.length; i++) { %> <% if (years[i] == selectedYear) { %> ...

javascriptjquerynode.jsjquery-selectbox

Loop through each div using jQuery and dynamically add or remove a class to

I am looking to create an infinite loop that adds a class to each div with a timeout in between. Currently, I have implemented it like this: $(document).ready(function() { $('.small-bordered-box').each(function(i) { var $t = $(this); ...

javascriptjqueryhtmlcss

Tips on using Jquery to animate an element to a specific pixel measurement

My expertise lies in executing the following code: $("#nurseView").animate({"left": "+=100px"}, "slow"); However, I am facing a dilemma. How can I animate an object to exactly 1576px on the X-axis regardless of its current position? The code snippet abov ...

javascriptjqueryhtml

Make sure to close any existing Featherlight windows before trying to open another one

I'm setting up multiple featherlight instances when the page loads jQuery('.feedback').featherlight(jQuery( "#feedback-box" ), { closeIcon: 'close'}); jQuery('#imprint').featherlight(jQuery( "#imprint-box" ), { closeIcon ...

javascriptjqueryfeatherlight.js

Invoke a Python function from JavaScript

As I ask this question, I acknowledge that it may have been asked many times before. If I missed the answers due to my ignorance, I apologize. I have a hosting plan that restricts me from installing Django, which provided a convenient way to set up a REST ...

javascriptpythonangularjsclient-server

Attempting to employ jQuery to generate a text input that allows for inputting multiple incorrect answers

I am putting together a webpage for a friend who has allergies. The idea is that users can input a food item, and the page will indicate whether or not my friend is allergic to it. I have compiled an array of his food allergies, and the goal is for the pag ...

javascriptjqueryarrayssubmit

The IP validation feature in the textbox is not performing as anticipated

My goal is to have a textbox that receives an IP address and validates it before submission. To achieve this, I've developed a JavaScript class called `validityCheck`. In my main Vue.js component, I aim to utilize this class to validate the input&apo ...

javascriptvue.js

Tips on updating TypeScript to a higher major version

Despite upgrading all packages, deleting node_modules and package-lock.json, and reinstalling with npm install, the typescript runtime in my git repo is still showing version 4.9.5. How can I update the tsc version to be higher than 5.0? $ npx tsc --versi ...

typescriptnpm

Setting the current date as the default in an input box using ng-it: a step-by-step guide

How do I automatically set today's date as the default in the input box using ng-it? Here is my Plunker I am simply looking to set today's date as the default in the input field using ng-it. Would appreciate it if you could check out my P ...

javascriptangularjs

What steps should I follow to set up a dynamic theme in an Angular Material application?

I have spent countless hours trying to find clear documentation on setting up an Angular Material app with a theme, including changing the theme dynamically. Despite searching through numerous search results and visiting various pages, I have not been able ...

angularangular-material

Mapping objects in an array with Javascript

This code snippet is intended for a React Native Chat app. The structure of my data should look something like this: const chatData = [ { id: 1, name: 'John Doe', messages: [ {text: 'Hello', sentAt: 'time here' ...

javascriptreactjsreact-native

After receiving a BehaviorSubject, the application was paused to handle multiple outcomes

I am trying to implement BehaviorSubject for handling my login user. I have a user BehaviorSubject that returns an observable. get IsAuthenticated() { return this.user.asObservable().pipe(switchMap(res => { if (res != null) { return of(true); } ...

angularionic-frameworkrxjsrxjs-observables

The column is not properly aligned

I am facing a challenge in aligning 3 elements using bootstrap while working with Angular 8. To include only the necessary CSS from Bootstrap (such as col-md and col classes), I have added the following to my styles array: "styles": [ "src/ ...

cssangularsassbootstrap-4

Development of Chrome Extensions, JavaScript dilemma

Hey there, I'm new to JavaScript and I've been diving into the world of creating Chrome extensions. I'm trying to set up a content script and browser action, but I'm struggling to get it up and running. I know I'm probably making a ...

javascriptgoogle-chrome

Tips for displaying an alert after a successful form submission and ensuring user input validation

I created a form with PHP code to send emails, but I'm struggling to add an alert without page refresh upon submission. The alert needs to display in green or red text below the button. Validation for email input is needed, as well as protection again ...

javascriptphphtmlformsvalidation

The Vue.js application is experiencing issues with the v-for functionality

I am working on a Vue.js application where I am fetching a list using ajax: $.ajax({ method: 'POST', dataType: 'json', url: this.base_info.url + 'getavailability?token=' + this.token, data: this.search_inf ...

javascriptjqueryajaxvue.js

How to prevent VueJS observer from monitoring a temporary variable

My VueJS and Observer objects are causing me trouble. I am encountering an issue where I assign a part of my object to a temporary variable for later use, update the original part with new data, and then revert it back to its original state after 8 seconds ...

javascriptvue.jsvuejs2observers