Different ways to insert spaces among variables in an angular component

Question

Different ways to insert spaces among variables in an angular component

I have a function below that I want to use to return a slice of characters with a count as shown in the example below.

Example - abcd,test,red,blue,green,yellow

Expected output -

abcd,test,red,blue,g.........................(11)

My code works correctly but instead of using "------" I would like to have spaces between the count numbers.

viewMore(text) {
    if (text.tag_value_constraint && text.tag_value_constraint.values) {
      const enumText = text.tag_value_constraint.values[0];
      const count = 30;
      return enumText.slice(0, count) + (enumText.length > count ? " ("+(enumText.length - enumText.slice(0, count).length)+")" : "");
    }  
  }

javascript angular typescript

Answer 1

Answer №1

This code snippet is effective

viewMore(text) {
  if (text.tag_value_constraint && text.tag_value_constraint.values) {
    const enumText = text.tag_value_constraint.values[0];
    const count = 30;
    return enumText.slice(0, count) + (enumText.length > count ? " (" + (enumText.length - enumText.slice(0, count).length) + ")" : "");
  }
}

A more concise alternative using template literals:

viewMore(text) {
  if (text.tag_value_constraint && text.tag_value_constraint.values) {
    const enumText = text.tag_value_constraint.values[0];
    const count = 30;
    const additionalText = (enumText.length > count) ? ` (${(enumText.length - enumText.slice(0, count).length)})` : "";
    return enumText.slice(0, count) + additionalText;
  }
}

Answer 2

This code snippet is effective

viewMore(text) {
  if (text.tag_value_constraint && text.tag_value_constraint.values) {
    const enumText = text.tag_value_constraint.values[0];
    const count = 30;
    return enumText.slice(0, count) + (enumText.length > count ? " (" + (enumText.length - enumText.slice(0, count).length) + ")" : "");
  }
}

A more concise alternative using template literals:

viewMore(text) {
  if (text.tag_value_constraint && text.tag_value_constraint.values) {
    const enumText = text.tag_value_constraint.values[0];
    const count = 30;
    const additionalText = (enumText.length > count) ? ` (${(enumText.length - enumText.slice(0, count).length)})` : "";
    return enumText.slice(0, count) + additionalText;
  }
}

Answer 3

Answer №2

 expandView(text) {
      if (text.constraints && text.constraints.values) {
         const selectedText = text.constraints.values[0];
         const limit = 30;
          return selectedText.slice(0, limit) + (selectedText.length > limit ? "      ("+ 
        (selectedText.length - selectedText.slice(0, limit).length)+")" : "");
       `enter code here`}  
   }

Answer 4

 expandView(text) {
      if (text.constraints && text.constraints.values) {
         const selectedText = text.constraints.values[0];
         const limit = 30;
          return selectedText.slice(0, limit) + (selectedText.length > limit ? "      ("+ 
        (selectedText.length - selectedText.slice(0, limit).length)+")" : "");
       `enter code here`}  
   }

Answer 5

Answer №3

Here is another approach you can try:

    const phrase = 'abcd,test,red,blue,green,yellow';

    function truncatePhrase(phrase) {
      if (phrase) {
        const initialChar = phrase[0];
        const limit = 20;
        return phrase.slice(0, limit) + ' '.repeat(phrase.length - limit) + (phrase.length - limit);
      }  
    }
    
    console.log(truncatePhrase(phrase));

Answer 6

Here is another approach you can try:

    const phrase = 'abcd,test,red,blue,green,yellow';

    function truncatePhrase(phrase) {
      if (phrase) {
        const initialChar = phrase[0];
        const limit = 20;
        return phrase.slice(0, limit) + ' '.repeat(phrase.length - limit) + (phrase.length - limit);
      }  
    }
    
    console.log(truncatePhrase(phrase));

Answer 7

Answer №4

When replacing "------(" with " (" make sure to let me know if you need single or multiple spaces.
There is a question about why the calculation of enumText.slice(0, count).length is necessary when enumText.length > count always results in a length of count.

Take a look at the code snippet below -

viewMore(text) {
if (text.tag_value_constraint && text.tag_value_constraint.values) {
  const enumText = text.tag_value_constraint.values[0];
  const count = 30;
  return enumText.slice(0, count) + (enumText.length > count ? " ("+(enumText.length - count)+")" : "");
}

}

For handling multiple spaces in interpolation binding {{}}, it won't work - Instead, use the binding in your HTML file as

<p [innerHTML]="enumText"> </p>

using the relevant variable name holding the value.

In the TS file, adjust the code like this -

viewMore(text) {
if (text.tag_value_constraint && text.tag_value_constraint.values) {
  const enumText = text.tag_value_constraint.values[0];
  const count = 30;
  return enumText.slice(0, count) + (enumText.length > count ? " &#160; &#160; &#160; ("+(enumText.length - count)+")" : "");
}

}

Hoping this solution helps resolve your issue.

Answer 8

When replacing "------(" with " (" make sure to let me know if you need single or multiple spaces.
There is a question about why the calculation of enumText.slice(0, count).length is necessary when enumText.length > count always results in a length of count.

Take a look at the code snippet below -

viewMore(text) {
if (text.tag_value_constraint && text.tag_value_constraint.values) {
  const enumText = text.tag_value_constraint.values[0];
  const count = 30;
  return enumText.slice(0, count) + (enumText.length > count ? " ("+(enumText.length - count)+")" : "");
}

}

For handling multiple spaces in interpolation binding {{}}, it won't work - Instead, use the binding in your HTML file as

<p [innerHTML]="enumText"> </p>

using the relevant variable name holding the value.

In the TS file, adjust the code like this -

viewMore(text) {
if (text.tag_value_constraint && text.tag_value_constraint.values) {
  const enumText = text.tag_value_constraint.values[0];
  const count = 30;
  return enumText.slice(0, count) + (enumText.length > count ? " &#160; &#160; &#160; ("+(enumText.length - count)+")" : "");
}

}

Hoping this solution helps resolve your issue.

Different ways to insert spaces among variables in an angular component

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Iterate through buttons using jQuery and apply an active class when clicked

Adding new elements dynamically to an array in JavaScript while updating values in a ReactJS component

What is the process of creating conditional content projection in Angular?

How to alter the HTML view in Angular 2 after it has been processed

A guide on retrieving TypeScript mongoose/typegoose schema

Addressing Memory Leakage Issues in a Basic Node.js Application

Is there a way to automatically launch a new tab upon arriving from another website?

Exploring ways to add various field values to a single variable in JavaScript

Ensure that all divs have the same height and padding when resizing

Implement the callback-console.log feature from the epic-games-api into an Express.js application

Restrict user input to only numerical values in an input field using jQuery

"Endless Cycle Dilemma" Enigma

An AJAX function nested within another AJAX function

Having difficulty achieving the desired style with columns and four divs per column as the styling is not coming together as expected

Comparing Objects in an Array to Eliminate Duplicates and Make Updates in Javascript

Searching for a document in mongoDB using the `findOne` method

"Subscription in Angular2 allows for conditional return of true or false values

Protractor: encountering difficulty retrieving all elements with Protractor

What is the reason for the transparency of the angular material modal?

Crafting intricate designs using AngularJS