Tips for sending a model as a string in Angular 2

Example (DOM):

<div *ngFor="let item of items">
    <span [innerHtml]="item"></span>
</div>

Example (Controller):

let items = [];
let timer = 60;
setInterval(() => timer--, 1000);
items.push("This is a dynamic selection WITH a countdown: {{timer}}");
items.push("This is a static selection WITHOUT a timer");

In this scenario, an array "items" is dynamically populated with strings, some containing countdown timers and others not. Is there a way to pass a model into the DOM via a string as demonstrated above and have the timer update accordingly? If so, how can this be achieved?

I truly hope this isn't one of those tricky situations that seems obvious in hindsight.

Thank you

Answer №1

CODEPEN

While this solution may seem unconventional, it is effective and eliminates the need for additional components.

To implement this approach, modify your template as shown below:

<div *ngFor="let item of items">
    {{item.replace('[placeholder]', value)}}
</div>

Next, define value and items as variables within the class:

export class YourComponent {
    value:number=100;
    items:string[];

    (...)
}

Finally, when updating the content of items, use [placeholder] instead of {{value}} whenever you wish to include the value.

Feel free to customize [placeholder] according to your requirements.

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

Count the occurrences of different fields in a document based on a specified condition

Seeking a way to extract specific values and calculate the frequency of those values in a collection based on a certain key's ID. Consider this example of a single document from a Game Logs collection: { "_id": "5af88940b73b2936dcb6dfdb", "da ...

Recommendations for a UI library specializing in displaying analytical graphs

Looking to create analytical graphs of tweets similar to the site found at the following link Website-Link Curious about the top open source options available for this task? I've heard good things about Raphael.js. Any other recommendations? ...

Trying to retrieve a CSS property using jQuery

Having trouble retrieving the correct CSS value for a background using a spectrum.js color picker. No matter which color is chosen, rgba(0,0,0,0) is always selected. Strangely enough, when checking the background in the console, it shows up correctly in th ...

Tips on invoking a factory method from a different service method in AngularJS

I have a factory method that goes like this.. (function (angular) { "use strict"; angular .module('app') .factory('UserService', ['$rootScope', '$q', function ($rootScope, $q) { ...

The React page fails to load on Ubuntu, yet it works perfectly on the local WSL

It's puzzling. The code that performs flawlessly on my personal computer, smoothly running without any hiccups, fails to operate as expected on an ubuntu server. Upon executing npm start, my local environment exclaims "Compiled successfully!" while t ...

Creating a unique directive to customize the height

I'm currently working on a directive called appHeaderResize, which is designed to calculate the height of both the <app-online-header> component and the <app-navigation> component. Below is the code snippet: <div class="sticky" appHe ...

Having trouble retrieving data from the table with AJAX and CodeIgniter

I am currently developing a comprehensive HRM+CRM system (Human Resource Management and Customer Relation Management). I have encountered an issue while trying to generate an invoice for each customer. I am struggling to resolve this problem and would appr ...

What's the best way to define the data types for a component that utilizes the set function?

This code snippet seems to be functional, but there are some issues with the types that need to be resolved before it can be compiled successfully. Here is the code in question: function SpotlightElement(props: JSX.IntrinsicElements['spotLight'] ...

Issue with loading Squarespace form when executing jQuery on Internet Explorer

One challenge I'm facing is that Squarespace builds their forms using JavaScript (YUI) and loads their code on document ready. How can I ensure that my code waits until their form is fully loaded? This issue seems to only occur in Internet Explorer. ...

Retrieving parameters from a class that is handed over from the constructor to a function by leveraging the rest parameter feature

I am encountering an issue where the Method is not reading the values in the arguments, despite my attempts to pass each argument through the constructor into the method for encryption. Could someone please point out what I might be doing wrong? class A ...

Steps to incorporate padding to a nested Angular Component by leveraging the CSS of its parent component

It is evident from the example at https://material.angular.io/components/expansion/examples that material components can be customized using the CSS of the component embedding them: .example-headers-align .mat-form-field + .mat-form-field { margin-left: ...

Tips for identifying when the back button is pressed on an Android or iOS device using React.js

I recently completed a responsive website project utilizing React js and now I am looking to implement a confirmation popup when users press the Back button on their Android/iOS mobile devices. Can anyone provide guidance on detecting the back button pre ...

Using Internet Explorer to watch full-screen HTML 5 videos

I am in the process of developing my own HTML 5 Browser Player. Everything seems to be working well, except for getting the full screen feature to function properly in IE 10. Chrome, Safari, and Firefox are all doing great with it. Unfortunately, my JavaS ...

Issues with Font Awesome fonts failing to load after compiling an Angular project using `ng build`

I've encountered an issue with Angular 8 and Font Awesome icons. I initially added the font-awesome path in the angular.json as follows: "./node_modules/font-awesome/css/font-awesome.css" However, all the icons were displaying as empty boxes (not lo ...

Do class bindings with variables need to be inline when using Vue 3?

Consider the following HTML: <template v-for="(child, index) in group"> <div :class="{'border-pink-700 bg-gray-100 ': selected === child.id}"> <div>Container Content</div> </div> & ...

Is there a way for me to determine if a domain has been registered by the client?

I'm interested in creating a Web app that allows users to enter a domain name and then uses JavaScript to check its availability. I'm wondering if there's a method to do this without relying on my own hosting server. Is it possible to send a ...

Creating unsightly class names using Node.js

Is it possible to automatically create random and unattractive class names? For example, is there a tool or plugin that can substitute the .top-header class with something like .a9ev within my CSS code? It would also be ideal if the class name in the HTML ...

Tips for validating nominal-typed identifiers

I recently started experimenting with the enum-based nominal typing technique explained in more detail at this link. enum PersonIdBrand {} export type PersonId = PersonIdBrand & string interface Person { id: PersonId firstName: string lastName: ...

Using Firebase Realtime Database, this React dropdown menu is populated with options in real-time. Combining the features

I'm currently facing an issue with a dropdown that is supposed to loop through data fetched from the Firebase realtime database. The goal is to assign a selected value to a Formik form for saving it to another object in the database. In my database, ...

Error: Unable to find axios module

screenshot of browser developer tool - network I have embedded the script in my base.pug file script(scr='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js') Upon loading the page and inspecting the browser developer tool > n ...