Can you explain the functionality of templates in the Primeng grid for Angular 6?

In my project, I am incorporating the use of primeng TurboTable which utilizes a pTemplate directive for templates. I am attempting to replicate this approach in order to create a reusable (DUMB) component. Despite my efforts to find a solution, I have not been successful thus far. One idea I had was to use an ng-container, but when attempting to pass an ng-template from a Smart component to a child component, nothing happens. Please see below for a sample of the solution I attempted:

Smart Component Template

<dumb-component>
  <ng-template #content> Content is placed here .... </ng-template>
</dumb-component>

Dumb Component Template

<ng-container *ngTemplateOutlet="content">
</ng-container>

For more information, you can refer to the primeng documentation here: primeng docs

javascriptangulartypescriptprimeng-datatableng-template

Answer №1

When your component called Dumb Component receives a template, it must use @ContentChild to access the template.

The Dumb Component should look like this:

<ng-container *ngTemplateOutlet="content">
</ng-container>
@ContentChild(TemplateRef) content: TemplateRef<any>;

For an example, you can check out: https://stackblitz.com/edit/angular-ephusu

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

Emptying the AnyChart (Javascript) container prior to generating new charts

I have been utilizing the anychart JavaScript library to generate a pie-chart from my data, which is dynamically pulled whenever a user modifies a dropdown selection. Below is the code snippet I am employing for this purpose: var stage = anychart.graph ...

javascripthtmlvue.jswebanychart

The 'exhaustive-deps' warning constantly insists on requiring the complete 'props' object instead of accepting individual 'props' methods as dependencies

This particular issue is regarding the eslint-plugin-react-hooks. While working in CodeSanbox with a React Sandbox, I noticed that I can use individual properties of the props object as dependencies for the useEffect hook: For instance, consider Example ...

javascriptreactjsreact-hookseslint-plugin-react-hooks

What exactly is the data type of setInterval in TypeScript?

If I want to define the type of a variable that will be used with setInterval in the following code snippet: this.autoSaveInterval = setInterval(function(){ if(this.car.id){ this.save(); } else{ this.create(); } ...

javascriptangulartypescripttypescript2.0

Tips for effectively locating code within a web browser's code base

Struggling as a new programmer in a new job with a fresh codebase, I am finding it difficult to connect the code to the webpage I am currently on. What methods can I use to locate the relevant HTML in the codebase that is being rendered in the web browser? ...

c#htmlangularvisual-studiowebapi

Incorporating a complex React (Typescript) component into an HTML page: A Step-by

I used to have an old website that was originally built with Vanilia Javascript. Now, I am in the process of converting it to React and encountering some issues. I am trying to render a compound React(Typescript) component on an HTML page, but unfortunatel ...

javascripthtmlreactjstypescript

The SDK directory for TypeScript 1.3 in Visual Studio 2013 does not include the necessary tsc.exe file

Exciting news! Typescript v1.3 has been officially announced today. To fully utilize this update, I quickly installed the power tools update for VS2013. Upon completion of the installation, my Visual Studio environment now recognizes the "protected" keywo ...

visual-studio-2013typescripttscvisual-studio-power-tools

Enhance your Syncfusion experience by incorporating tooltips into circle gauge pointers

I have been exploring the Syncfusion documentation but have not been able to figure out how to add tooltips to the pointers of the Syncfusion Circle gauge. Since the gauge utilizes a canvas for drawing and the Syncfusion library is quite complex, I haven ...

javascriptasp.net-mvcsyncfusion

Error: The mongoose initialization is preventing access to the 'User' variable

this issue arises in mongoose Cannot access 'User' before initialization at order.model.js:6:52 even though User is already defined order.js import mongoose from 'mongoose'; import Product from './product.model.js'; import U ...

javascriptnode.jsmongodbexpressmongoose

Angular JS Tutorial: How to Nest ng-views

When merging two separate Angular apps into one, I encountered the need to nest ng-views. The structure of my sample code (index.html) looks like this: <!doctype html> <html lang="en" ng-app="myApp"> <head> <meta ch ...

javascriptangularjs

Tips for integrating Twitter sharing functionality in React JS

I am looking for a way to enable users to easily share images from my website on Twitter. Although I tried using the react-share module, it does not provide an option to directly share images. This is the snippet of code I currently have: import { Sh ...

javascriptreactjstwittertwitter-sharereact-share

Tips for displaying the initial slide when a tab is loaded on a multi-tab webpage

I have a total of four tabs, with the first tab containing a slideshow. On page load, I am successfully triggering the first tab, but for some reason, the first slide in the slideshow within that tab is displaying a blank image. I'm struggling to find ...

javascriptphphtmlajax

Could converting a 47-byte JSON string into 340 MB be possible through JSON stringification?

var keys = [7925181,"68113227"]; var vals = {"7925181":["68113227"],"68113227":["7925181"]}; var temp = []; for (var i = 0; i < keys.length; i++) { temp[keys[i]] = vals[keys[i]]; } //alert(JSON.stringify(vals).length); alert(JSON.stringify(temp).le ...

javascriptjson

Having trouble importing .task files in a Next.js project with TypeScript?

I encountered an issue when trying to import a model.task file into my App.tsx file. After training a hand gesture recognition model in Python, I exported it to a model.task file. Now, I am attempting to import this file into my Next.js + Typescript proje ...

typescriptnext.jstsxmediapipe

What is the proper way to specify the type for the `clean-element` higher-order-component in React?

Error message: 'typeof TextareaAutosize' argument cannot be assigned to a type 'Component<{}, {}, any>'. Error: Property 'setState' is not found in 'typeof TextareaAutosize'. Here is the code snippet causin ...

reactjstypescript

What could be causing this issue of the Angular Material table not displaying properly?

I have been developing a Contacts application using Angular 9 and Angular Material. The goal is to display contact information and an image for each contact in a table row within the list component. Within my app.module.ts, I have imported various modules ...

javascriptangularangular-material

I'm just starting to explore async programming. Can someone explain how to ensure proper sequencing of events across multiple objects?

Currently, I am in the process of revamping my program. Initially, I managed to make it function by using synchronous AJAX calls, but I now wish to do things the correct way. The issue arises when the headline is supposed to be created with a new headline ...

javascriptajaxjqueryasynchronous

Error Message in Angular 6 When Importing JQVMap - No Such 'vectorMap' Property on Type 'JQuery<HTMLElement>'

I'm currently facing some challenges trying to integrate a clickable map, JQVMap and JQuery into my Angular 6 project. Issue: error TS2339: Property 'vectorMap' does not exist on type 'JQuery'. Here is the component in question: ...

jqueryangularangular6jqvmapexternal-js

Is there a way to remove array elements once in order to replace them with new ones using a for loop?

My objective is to achieve the following: Assign an array value (list) to another array (options). If the user input (searchVal) matches a value in the list, remove existing options and add this match. Subsequently continue adding any additional matches w ...

javascriptarraysfor-loop

The some() method in Javascript with an extra argument

I want to validate if at least one element in an array satisfies a certain condition. The condition is based on a variable. Here's an example of how I'm currently attempting this: function checkCondition(previousValue, index, array) { retur ...

javascriptjqueryarrays

Key-based user retrieval is unavailable in Express, "findAll" can only be done through email

I've created a straightforward Express/Pug application designed for searching users in a database by "email" or by "key". In this setup, each user is assigned a unique string as their key. The structure of my user model and index model files can be se ...

javascriptnode.jspostgresqlexpresssequelize.js