Sending ngFor variable to Child Component

In the parent component known as Property-page.component.html, I am looping through a variable called propertiesArray and trying to display a list of property-card components based on it.

<property-card
    *ngFor="let propertiesItem of propertiesArray"
    [propertiesItem] = "propertiesItem"
></property-card>

Property-card.component.ts:

export class PropertyCardComponent implements OnInit {
    @Input() propertiesItem: any;
    constructor() {}
    ngOnInit() {}
}

Property-card.component.html:

<div class="upload-card-content">
    <mat-card-header>
        <mat-card-title>{{ propertiesItem.id }}</mat-card-title>
    </mat-card-header>
    <mat-card-content>{{ propertiesItem.designation }}</mat-card-content>
        <mat-card-footer>
            <span class="icon-icon_calendar"></span>
            Period:
            <span class="period">{{ propertiesItem.period }}</span>
        </mat-card-footer>
</div>

Question

I'm facing an issue where the propertiesItem in the child component is coming up as undefined. Can someone help me figure out what I might be overlooking?

javascriptangulartypescriptngfor

Answer №1

One way to handle this is by incorporating the *ngIf directive within the child component code. Here is an example:

<div class="upload-card-content" *ngIf="propertiesItem">
      <mat-card-header>
          <mat-card-title>{{ propertiesItem.id }}</mat-card-title>
      </mat-card-header>
      <mat-card-content>{{ propertiesItem.designation }}</mat-card-content>
      <mat-card-footer>
          <span class="icon-icon_calendar"></span>
          Period:
          <span class="period">{{ propertiesItem.period }}</span>
      </mat-card-footer>
</div>

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

Unexpected box-shadow issue with Material UI's Box component

During the development of my application, I encountered an issue with rendering a list of items. The state consists of a simple array containing elements with a name, an identifier, and a selected key that determines whether special styles should be applie ...

javascriptreactjsmaterial-ui

JavaScript Discord bot encounters an issue: .sendMessage function is not recognized

Currently, I am developing a bot and testing its messaging functionality using .sendMessage method. (I prefer the bot not to send messages upon receiving any input, hence avoiding the use of: bot.on("message", function(message) {}); However, I am encoun ...

javascriptnpmbotsnpm-installdiscord

Removing duplicate values in Vue after sorting

Explore <div v-for="todo in sortedArray"> <b-button block pill variant="outline-info" id="fetchButtonGap" v-model:value="todo.items[0].arrivalTime"> {{fromMilTime(todo.items[0].arrivalTime)}} < ...

javascriptvue.jsmomentjs

Steps to trigger a dialog to appear automatically within an Icon Menu with React Material UI

In my application, I have an icon menu implemented along with an array that contains the possible values for the items in the menu. Here is an example of how the array looks: listItems = { [ { label: 'ZERO', t ...

javascriptreactjsdialogmaterial-ui

Sending the content of a textBox to a JavaScript function

Although my question may be somewhat outdated, after exhausting all possible solutions, I am still unable to find a resolution. I am trying to create a function for verifying input fields: This particular function is functioning correctly: function myFu ...

javascriptasp.net

Tips for enhancing the presentation of JSON information

I recently ventured into the world of JSON and JS, managing to create a JSON file to showcase data using .onclick event. While I have successfully generated and displayed the JSON data on screen, my next goal is to present it in a table format for better c ...

javascriptjquerycssjsonstyling

Obtain the model value using Yii jQuery and then proceed to submit the form

Within the _form.php view, there is a presence of $model and a CActiveForm $form. I implemented JavaScript code to compare the value of $model->publication_date with the current date. If they are identical, the form will be submitted automatically. Othe ...

javascriptphpjqueryyiimodel

Validation data not being transmitted in AJAX request

My PHP code is almost working perfectly, but I'm facing an issue with receiving the output of the validate function through AJAX. Can someone help me troubleshoot this problem? $(document).ready(function(){ $("#d").click(function(){ valid ...

javascriptphpjqueryajax

Determine whether the user has scrolled past a specific threshold

Is there a way to display the button with the id backtotop only when the user has scrolled more than 250 pixels? This is my code: <template> <div> <button v-if="checkScroll" class="goTop" @click="backToT ...

javascriptvue.js

Updating Select Options with Multiple Values using Javascript

My goal is to update the selected value of multiple select elements simultaneously using JavaScript. However, I am facing an issue where my script only updates one select element instead of all of them on the page. Unfortunately, I cannot modify the id att ...

javascriptjqueryhtml

Saving extensive JSON pipelining requests for future use

I am facing the challenge of retrieving a large amount of data in my view using JavaScript from a server. The JSON data is approximately 30,000,000 characters long. To give you an idea, it looks something like this (just an example): [{x:1000,y:1000,t:15 ...

javascriptphpmysqljson

Struggling with setting up a reducer in TypeScript?

I am currently working through a Microsoft tutorial on using Redux with TypeScript. Although I have been following the steps outlined in the tutorial at https://github.com/Microsoft/TypeScript-React-Starter, I have encountered a problem in the final stage: ...

javascriptreactjstypescriptredux

Add a CSS class to the main document via an iframe

Is there a simple method to apply a CSS class that is specifically defined in the head of an iframe to an element located in the main document? Can this be done without having to resort to using JavaScript to copy the class from the iframe's head to ...

javascriptjquerycssiframe

Ways to obtain every image placed onto an element

Using the img tag within div.image-block sets a background. Images can be added to .block3 through drag and drop. Is there a way to create a container that includes all elements from .image-block? <style> .image-block { position: relat ...

javascriptjquery

When the browser back button is clicked, conceal the current div and reveal the previously hidden div

I'm faced with a situation where my website consists of multiple pages which I've achieved by displaying and hiding divs within a single html file. The issue I'm encountering is that the browser's back and forward buttons aren't fu ...

javascriptjqueryhtmlcss

What could be causing the error "SyntaxError: Expected token ']' to appear" to pop up?

Recently, I have been working on implementing a 'night mode' feature for a website. However, every time I attempt to execute the script, an error message pops up: "SyntaxError: Expected token ']'" on line 9. The problematic line in ...

javascript

Mastering Angular Service Calls in TypeScript: A Comprehensive Guide

In the midst of my TypeScript angular project, I am aiming to revamp it by incorporating services. However, I have encountered an issue where when calling a function within the service, the runtime does not recognize it as the service class but rather the ...

angularjstypescriptthisangular-services

Issue with MathJax rendering within an Angular5 Div that's being observed

I am trying to figure out how to enable MathJax to convert TeX to HTML for elements nested within my div. Here is the current content of app.component.html: <p> When \(a \ne\) It works baby </p> <div class="topnav"> ...

angulartypescriptobservableangular5mathjax

When I click on the icon, I wish for it to revert back to its original state by spinning

Is there a way to revert the icons back to their original state when clicked again, without losing any of the current functionalities? When an icon is clicked for the first time, it rotates 180 degrees. The icon rotates back if another icon is clicke ...

javascripthtmlcssrotationicons

Effective implementation of Ts.ED BullMQ during server initialization

Recently, I started using Tsed(newb) and wanted to incorporate the BullMQ plugin into my project. I needed to run a job immediately after the server starts, but I struggled with implementing it correctly. I referred to this helpful guide here and attempte ...

typescriptbullmq