Does anybody know of a method to pass variables to templates in Angular2?
Suppose I have the following code snippet:
<div *ngFor="foo in foos">
<ng-container *ngTemplateOutlet="inner"</ng-container>
</div>
---------------
<ng-template #inner>
{{ foo.name }}
</ng-template>
How can I modify the template so that it displays the name of the given foo item?
Here is a suggested approach:
<div *ngFor="item in items">
<ng-container *ngTemplateOutlet="content; context:item"></ng-container>
</div>
<ng-template #content let-data="data">
{{ data }}
</ng-template>
In my particular situation, it was essential for the object to remain unchanged due to a recursive scenario. The following approach proved to be effective:
<div *ngFor="bar in bars">
<ng-container *ngTemplateOutlet="internal; context: {bar : bar}"></ng-container>
</div>
<ng-template #internal let-bar="bar">
{{ bar.someAttribute }}
</ng-template>
However, if the template is situated in a different component, this method will not work effectively. How can a context object be passed in such a scenario?
I have included
@Input() itemTemplate: TemplateRef<any>;In the component where I intend to use it, I have written something like this within the template:
<ng-container *ngTemplateOutlet="itemTemplate; context: item"></ng-container>
The code for the external component's template is as follows:
<ng-template #dataRendererTpl let-data="data">
<div class="data">Hello, {{data.name}}</div>
To utilize this template, simply pass a reference to dataRendererTpl as an @Input() property to the component where it is needed.
If you're looking to pass the entire iterable object to the template, simply include the array in the context like this:
<ng-container *ngTemplateOutlet="inner; context:bars"></ng-container>
<ng-template #inner let-bars="values()">
<div *ngFor="bar in bars">
{{ bar.name }}
</div>
</ng-template>
Utilize the $implicit key within ngTemplateOutletContext or ngTemplateOutlet to set its value as the default option.
<div *ngFor="let item of items">
<ng-container *ngTemplateOutlet="inner; context: { $implicit: item}"></ng-container>
</div>
<ng-template #inner let-item>
{{ item.name }}
</ng-template>
<ng-template #inner let-user>
{{ user.name}}
</ng-template>
Assuming that ng-template and div with ng-container are located in the same component.
If the template is in another component, utilize the @input() decorator within the template component.ts file.
const user = {name : myUsername}; databaseRef.set(user, { merge: true }); An error is occurring which states: Invalid use of type "undefined" as a Firestore argument. Despite following the Firebase documentation here, and seeing others use it in online ...
At the moment, our application utilizes the ExtJS tree view. We now have a need for users to be able to select multiple nodes (which the tree view already supports through a pluggable selection model) and then drag these selections to another section of th ...
I have been following a tutorial and attempting to launch the node server, but I am unable to import these functions from the Apollo package const {graphqlExpress, graphiqlExpress} = require('apollo-server-express'); // importing functions here ...
In my application, I have a side navigation bar with icons that link to different routes. One of the icons should lead me to a route with a query parameter. For example- localhost:4200/test?t=1. I defined an interface for my navigation items like this. ex ...
My main goal is to dynamically change the type of a DOM element based on a scope variable. Imagine I have a scope variable like this: $scope.post = { title: 'Post title goes here!', slug: 'post-title-goes-here', category: ...
I'm attempting to activate the mouseEnter event when the mouse is over multiple elements simultaneously. The goal is for both mouseEnter events to be triggered when the mouse reaches the center, and ideally for both elements to change to a yellow col ...
Can an object created through a constructor function have its keys listed using the Object.keys() method? Let's consider an example with the following code: function Foo () {} Foo.prototype.bar = 'bar'; Foo.prototype.baz = 'baz'; ...
As a beginner in this realm, I must apologize if my query seems naive. I recently crafted a multiple-choice quiz using HTML, CSS, JavaScript (angular.js), and a JSON data file following a tutorial I stumbled upon. The outcome pleased me, but now I am face ...
I am looking to create a dynamic form that changes based on the selection of radio buttons. The form includes textfields Field A, Field B, ..., Field G, along with radio buttons Radio 1 and Radio 2. I need to update the form dynamically depending on which ...
Take a look at this demonstration: http://embed.plnkr.co/7fGsiuRjcF0M0Ffeoml2/ If I modify the data to be: data: [2000, 3000, 4000, 8000, 12000, 12850] Can I add thousand separators to the dataset label? For example: 5,000 10,000 15,000 ...
Using the Paypal zoid feature, I have a button that opens an iframe in the parent div when clicked. However, the iframe causes the other contents of the website to shift around, making it look messy. I'm wondering if there is a way to make the parent ...
My goal is to resize a file server-side using Jimp before uploading it to Cloudinary in a node.js environment. Here's the controller I'm using: exports.uploadImage = async (req, res) => { if (!req.files) { return res.status(400).json({ m ...
Can anyone help me understand how to import the user.json json file into my user.js? I want the json file to be displayed when typing /user but I'm struggling with the new version of Node. index.js import express from 'express'; import body ...
While running the development server on localhost:3000 using npm run start, everything functions as expected. I am utilizing react-scripts and have not ejected the react app. Currently, my goal is to configure the dev server behind a reverse proxy so that ...
I am attempting to dynamically remove a CSS stylesheet using JavaScript or jQuery. I am aware that the target stylesheet is located within the 'head' element and includes the text 'civicrm.css', however, I do not possess the full URL o ...
I have SenseNet 7.0.0 and ASP.NET 5.2.3 set up, with my Angular (Typescript) application running on localhost:4200 and the ASP.NET application running on localhost:55064. I followed this tutorial for installing Sensenet and used this tutorial for installin ...
Currently, I am in the process of developing a project — a website similar to AirBnB or Booking.com for booking rooms. The backend is built on Java Spring, while the frontend uses ReactJs. Although most of the code runs smoothly, I'm encountering s ...
I'm currently working on an angular application that consists of different modules, with lazy loading enabled. In one of the modules, let's call it module A, I have a service called userService that I need to access in a component located in anot ...
Upon reviewing the template, I noticed that there is code implemented to check if the client has the necessary version. This code performs certain actions based on whether or not the required version is available. Additionally, there seems to be an <obj ...
I am currently working on an Angular 2 rc.1 application and facing an issue with overriding the existing pager by nesting a ng-template with the directive kendoPagerTemplate inside the kendo-grid. Here is an example of what I am trying to achieve: <ke ...