Is there a way for me to indicate to my custom component the specific location within an input message where a value should be displayed

I'm currently developing a value selector component in ionic/angular and I've encountered an issue with the message/title that I want to pass to the component. I want to be able to specify where the selected value should appear within the message.

One solution I considered is to include a marker like %value% inside the message string for the component to process. However, I'm wondering if there's a more standard approach to handling this?

In the screenshot below, I want the 

<ion-badge> {{Value}} </ion-badge>
to be displayed where the X is located.

<div class="ValueSelector_Container">
    <div class="Message">
        <ion-label>{{Message}} <ion-badge> {{Value}} </ion-badge> </ion-label>
    </div>
    
    ...

https://i.sstatic.net/vo98Y.png

This is how I am using/hosting the current component. I will eventually handle the output of the selected value

 <ValueSelectorComp Message="Play X minutes before switching to bla bla" ></ValueSelectorComp>

I have provided a code reproduction on stackblitz, here's the link

https://i.sstatic.net/xq8s7.png

If you have a working fix or suggestion, please fork and share the link. Thank you.

https://stackblitz.com/edit/ionic-fx1ktl?file=pages%2Fhome%2Fhome.ts

Ionic:

   Ionic CLI          : 6.13.1 (C:\Users\AXM\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.4

Cordova:

   Cordova CLI       : 9.0.0 (<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf8f4e9fff4edfab6f7f2f9dba2b5abb5aa">[email protected]</a>)
   Cordova Platforms : android 7.0.0, browser 5.0.3
   Cordova Plugins   : cordova-plugin-ionic-webview 1.1.1, (and 13 other plugins)

Utility:

   cordova-res : 0.15.3
   native-run  : not installed

System:

   NodeJS : v10.16.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

npm show ionic version
5.4.16
npm show cordova version
11.0.0
npm show angular version
1.8.2
show @angular/core version
13.1.1
angulartypescriptionic3

Answer №1

one way to transfer information is through content projection

<div class="ValueSelector_Container">
<div class="Message">
    <ng-content> <ng-content>
</div>

within the main component

<ValueSelectorComp >
 <ion-label>Initiate <ion-badge> {{Value}} </ion-badge> seconds before 
  shifting to something else </ion-label>
 
</ValueSelectorComp>

Answer №2

This solution has proven effective for me

landing.html

<ValueSelectorComponent
    Message="Display message for {{Value}} minutes before transitioning to another option"
    (MessageValue)="handleValue($event)"
  ></ValueSelectorComponent>

landing.js

Value: number;
handleValue(val: number) {
    this.Value = val;
  }

ValueSelectorComponent.html

<div class="ValueSelector_Container">
  <div class="Message">
    <ion-label>{{Message}}</ion-label>
  </div>
</div>

ValueSelectorComponent.ts

ngOnInit() {
    this.MessageValue.emit(this.Value);
  }
 @Output() MessageValue: EventEmitter<number> = new EventEmitter();

link: stackblitz.com/edit/ionic-dvsqjg?file=pages/home/home.ts

Answer №3

Although not explicitly mentioned as a requirement in the initial post, my mind was gravitating towards a solution where

  1. the client component selects the placement of the value within a displayed message,

  2. however, ultimately the component controls the choice of layout and tags for displaying the message and value.

  3. The message and value are provided by the client, and the final value is returned by the component.

I have come up with the following "solution" based on this idea

https://i.sstatic.net/hJ1bY.png

https://i.sstatic.net/N5fuW.png

You can view a working example here: https://stackblitz.com/edit/ionic-xzdgyb?file=pages%2Fhome%2FValueSelectorComp.html

In @Dindayal's solution, the position is determined by the client component, but the component has limited control over the layout of the value within the message.

On the other hand, in @Mohammad's solution, both the position and layout are dictated by the client component.

I am aware of DOM/template injection techniques using domsanitizer that may play a role in the solution, although it's not something I can easily code on my own :)

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

Troubleshooting Issue with Chrome/chromium/Selenium Integration

Encountered an issue while attempting to build and start the application using "yarn start": ERROR:process_singleton_win.cc(465) Lock file cannot be created! Error code: 3 Discovered this error while working on a cloned electron project on a Windows x64 m ...

typescriptgoogle-chromevisual-studio-codebuildelectron

Encountered an error loading resource: server returned a 404 status code while utilizing Angular framework and deploying via GitHub Pages

Currently facing an issue with my Angular website deployment on Github Pages, receiving a console error "Failed to load resource: the server responded with a status of 404 ()" at "home: 1". This error specifically seems to be related to the app.component ...

cssangulartypescriptdeploymentgithub-pages

Navigating the NextJS App Directory: Tips for Sending Middleware Data to a page.tsx File

These are the repositories linked to this question. Client - https://github.com/Phillip-England/plank-steady Server - https://github.com/Phillip-England/squid-tank Firstly, thank you for taking the time. Your help is much appreciated. Here's what I ...

javascriptnode.jsreactjstypescriptnext.js

React JS hosted externally along with just plain Javascript and HTML page

We are looking to implement a common widget on multiple services using ReactJS. The goal is to write client-side code for this widget as an external hosted JavaScript file that can be included in pages across different frameworks such as Angular, Inferno, ...

reactjstypescript

Issue with Jhipster4 when trying to generate an Angular 2 app

After utilizing jhipster4 to create my application, I noticed it consists of a client side and a server side. However, when running ./mvnw from the application's root directory, only the server is built, without the client. Here is the structure of my ...

javaangularwebjhipster

tips for sending types as properties in a versatile component

I am facing a challenge with passing types as props to a reusable component. I have a component where I pass rows and headings as props, but I need to find a way to pass types as props as well. Below is the code for my reusable component: import { TableCe ...

javascriptreactjstypescript

Leverage the power of Typescript to flatten a JSON model with the help of Class

Currently, I'm exploring how to utilize the class transformer in TypeScript within a Node.js environment. You can find more information about it here: https://github.com/typestack/class-transformer My goal is to flatten a JSON structure using just on ...

node.jstypescriptclass-transformer

What is the reason behind Jest's failure with the error message "component is a part of the declaration of 2 modules"?

While running a test in an Angular (NX) project, I encountered the following exception: Error: Type FooComponent is part of the declarations of 2 modules: FooComponentModule and FooComponentModule! Please consider moving FooComponent to a higher module tha ...

angularjestjsnrwl-nx

Tips for creating a tailored Express.js request interface using Typescript efficiently

I have been working on designing a custom Express request interface for my API. To achieve this, I created a custom interface named AuthRequest, which extends Request from Express. However, when attempting to import my interface and define req to utilize t ...

node.jstypescriptexpresstypescript-typings

Error message: "Uncaught TypeError in NextJS caused by issues with UseStates and Array

For quite some time now, I've been facing an issue while attempting to map an array in my NextJS project. The particular error that keeps popping up is: ⨯ src\app\delivery\cart\page.tsx (30:9) @ map ⨯ TypeError: Cannot read pr ...

javascriptreactjsarraystypescriptnext.js

Unexpected error arises in Typescript despite code functioning properly

As part of a practice project where I'm focusing on using webpack, ES6, npm and Typescript implementation, I have successfully set up loaders for 'awesome-typescript-loader' and 'babel-loader', which are bundling the code properly. ...

javascripttypescriptwebpackbabeljs

"I am experiencing an issue with the PrimeNG year picker as it is unable

My goal was to set up a simple PrimeNG calendar with just a year picker. I followed the implementation instructions from the documentation: <p-calendar inputId="year" [(ngModel)]="date1" view="year" dateFormat=" ...

angularprimeng

Angular 7's Singleton Service Feature

My service setup looks like this: export abstract class ILoggingService { // abstract functions here } export class LoggingService implements ILoggingService { // service implementation } export class MockLoggingService implements ILoggingServic ...

angulartypescriptsingleton

What is the process for importing a TypeScript module exclusively through typings without having to download it separately?

Currently, I am working on a widget for a website that is already utilizing jQuery and I am using TypeScript. The goal is to embed my output into the host website while taking advantage of the existing jQuery library loaded by the host site. In order to r ...

typescript

I'm encountering an issue with my array in JavaScript while using // @ts-check in VS Code. Why am I receiving an error stating that property 'find' does not exist on my array? (typescript 2.7

** update console.log(Array.isArray(primaryNumberFemales)); // true and I export it with: export { primaryNumberFemales, }; ** end update I possess an array (which is indeed a type of object) that is structured in the following manner: const primar ...

javascripttypescriptvisual-studio-code

Using :global() and custom data attributes to apply styles to dynamically added classes

Currently, I am working on creating a typing game that is reminiscent of monkeytype.com. In this game, every letter is linked to classes that change dynamically from an empty string to either 'correct' or 'incorrect', depending on wheth ...

typescriptsasssvelte

Angular 5: experiencing issues with HttpClient when using REST API

Currently, I am in the process of developing a REST API using Spring to perform CRUD operations based on a tutorial I found. However, I have encountered an issue with the HTTP client not retrieving data, and upon inspection, I discovered the following erro ...

angulartypescriptspring-bootjparest

Dynamic Angular components and their content projection

Can content projection be utilized in Angular 2 components that are dynamically loaded and created at runtime, rather than being known at compilation time? ...

angular

The Process of Deploying Angular 4 Applications to Production

My colleague and I recently had a thorough discussion about the best approach to deploy our Angular 4 app on a production server. I would greatly appreciate practical advice and guidance from the community regarding this issue. Thank you in advance! Prem ...

node.jsangularnpmwebpackangular-cli

The information in Vuex Store and Vue Component is not aligning and syncing properly

I am encountering an issue with a specific component in my Quasar project. I am currently utilizing a Q-table to display data pulled from a data field, which is supposed to sync automatically with the Vuex store. However, I am noticing that the data does ...

typescriptvue.jsvuexquasar