How to efficiently utilize the `find` method of `QueryList` within an Angular HTML template

Can methods be utilized on QueryList within the HTML template?

For example, in the TypeScript file I can use:

@ContentChildren(DonneeEntiteDirective) content!: QueryList<DonneeEntiteDirective>
let test = this.content.find(e => e.name === 'surface');

However, attempting the same thing inside the HTML template does not yield the desired result:

<ng-container [ngTemplateOutlet]="content.find(e => e.name === 'surface')"></ng-container>

The only workaround I found is by doing the following:

<ng-container *ngFor="let template of content">
          <ng-container *ngIf="template.name === column" [ngTemplateOutlet]="template.templateRef"></ng-container>
</ng-container>

Is there a more efficient way to achieve this?

Answer №1

Absolutely, arrow functions are not permitted in templates.

To access the desired ContentChild, you can monitor the changes of your QueryList by subscribing to QueryList.changes(). This allows you to have a component property that represents the specific ContentChild you need!

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

Trouble with Jest when trying to use route alias in Next.js with Typescript

Currently, I am developing a Next.js App (v13.2.3) using Typescript and have set up a path alias in the tsconfig.json. Does anyone know how I can configure the jest environment to recognize this path alias? // tsconfig.json { "compilerOptions": ...

Adding a dynamic form to each row in a table: A step-by-step guide

https://i.sstatic.net/HctnU.jpg Hey there! I'm facing a challenge with dynamically generated rows in a form. I want to send only the inputs from the selected row when a checkbox is clicked. Can you help me figure this out? I tried using let rowForm ...

Debugging NodeJs: The occasional success and Async.map troubles

Below is the structure of my config json file. "constraints": { "input": "input", "output": "output" } I want to read this file and generate directories for input and output along with their subdirectories. var fs = require("fs"); var async = ...

EasyWaySaveArchive in ninja training - mastering the art of retrieving components

Recently started learning about dojo and JavaScript in general. I am currently working on a code snippet that requires a button to change based on the result of a php database query. The PHP script is already complete, and the code I am using so far looks ...

There is a chance that the object could be null. Error code TS2531 occurring in React with TypeScript

I'm currently working on an application using React and TypeScript. However, I encountered an error when trying to use .innerHTML or innerText: An error stating 'Object is possibly null' with the code TS2531 appeared. I am new to TypeScript ...

Ways to authenticate custom kinds in JSON schema?

When working with JSON Schema, one of the challenges I have faced is the limitation on supporting ‘double’ and ‘float’ types for numeric values. While using AJV in JavaScript to validate a schema, it fails due to this restriction. Is there a way to ...

What is the reason behind webpack attempting to interpret my readme.md files?

When using Webpack, I encountered the errors below. Despite the build appearing to be successful, I am still puzzled as to why these errors are occurring. WARNING in ./{snip}/readme.md Module parse failed: C:{snip}\readme.md Unexpected token (1:7) Y ...

Creating an onchange event in CodeIgniter for dynamically generated select boxes within a view script

As a beginner with codeigniter, I am seeking some assistance. Within my controller, I retrieve data for both options and suboptions, then load the respective view using the code below. The view essentially generates a table consisting of select boxes passe ...

Organizing Checkbox Groups for Validation in Bootstrap

My form consists of 2 checkboxes and I only want to submit the form if at least one checkbox is checked. The current code requires both checkboxes to be checked, but I tried grouping them using the name attribute without success. How can I group checkbox ...

What is the best location to create the content for a sidebar?

Currently in the process of building my new website using express. The layout consists of various "sections" such as a blog, project information, and more. I want to have a unique sidebar next to the main content for each section. For instance, in the "blo ...

Validating Forms and Files with jQuery and C# in ASP.NET

I'm facing some uncertainty on how to effectively combine jquery/javascript with C#. My task is to incorporate a javascript confirm popup into a file upload form, but the confirm prompt should only appear if specific criteria are not met. There are 4 ...

A step-by-step guide on reversing options in the Ant Design Cascader component

By default, the Cascader component's options are nested from left to right. I am looking to have them go from right to left instead. However, I could not find anything in the component's API that allows for this customization. Is it even possibl ...

IntelliJ IDEA mistakenly believes that the MouseEvent interface has already been declared

Can someone help explain the error TS2687:All declarations of 'x' must have identical modifiers.? I'm diving into the documentation for TypeScript to grasp the language better. The code snippet from the Function Parameter Bivariance section ...

Is it possible to save round items within a session?

While utilizing Blocktrail's API for bitcoin wallet management, I encountered an issue with circular references within the returned wallet object. The goal is to store the decrypted wallet in the user's session to avoid password re-entry. Howeve ...

Getting just the main nodes from Firebase using Angularfire

I'm having trouble figuring out how to print just the parent element names from the structure of my database. The image provided shows the layout, but I can't seem to isolate the parent elements successfully. ...

CSS navbar issue: The positioning of the text selection rectangle and drop-down menu is causing problems

While working on creating a navbar, I encountered an issue when hovering over an item (such as "Company") to display the dropdown menu below. https://i.sstatic.net/KbuwLPGy.png The problem lies in the positioning of the green selection rectangle, which i ...

Implementing Image Data in AngularJS: A Guide to Binding Images to IMG Tags

Allow me to explain the problem further. I am retrieving a user's profile picture by calling an API that returns image data, as shown in the screenshot below https://i.stack.imgur.com/t8Jtz.jpg https://i.stack.imgur.com/pxTUS.png The reason I canno ...

Transmitting HTML content via JSON with AJAX

Currently, I am integrating with the Mercado Livre API. Due to the fact that users can input HTML in the description field, it is necessary for me to accommodate this feature. My approach involves utilizing AJAX to interact with Mercado Livre. However, I ...

Retrieve the rightmost selected input from each row by using only one jQuery(Sizzle) selector

This scenario is quite intriguing, and I stumbled upon it in my project today. We have a table of checkboxes, with one type being hierarchical - meaning if one is checked, all preceding checkboxes of the same type magically get checked as well. The challe ...

Displaying a Div Element using jQuery based on a PHP list

After researching how to toggle a div using jQuery based on dropdown selection made with "select" and options, I am facing a challenge. The dropdown selection code I am working with is as follows: <?php echo $this->lists['catid']; ?> T ...