Trouble with incorporating ellipses across multiple lines in Angular 7

I am attempting to display ellipses in a multi-line block using Angular, but I am encountering the following problem.

component.html

<div class="test" [innerHtml]="anchor1.length >= 200 ? anchor1.substring(0,242) + '...' : anchor"></div>

component.ts

anchor1 = 'Lorem ipsum dolor sit amet, id nam probo vidisse feugait.Lorem ipsum dolor sit amet, id nam probo vidisse feugait. Liber invenire expetendis eu duo, constituto assueverit ex mei. Mea ea quot mundi. <a href="abcdefghi.com">Test</a> <a href="#">test 2</a>';

stackblitz: https://stackblitz.com/edit/angular-ksgxdj

The desired output should be "Test..." but instead it is displaying as "Test" at the end of the line.

Given that the anchor tags can appear anywhere in the text, I have used substring and hardcoded values to simulate the scenario.

In this situation, Angular is rendering:

Lorem ipsum dolor etc etc <a href="abcdefghi.com">Test</a> <a href="#"...

Which is then truncated to:

Lorem ipsum dolor etc etc <a href="abcdefghi.com">Test</a>
cssangularangular6angular7

Answer №1

Utilizing the ng-truncate library is my preferred method for achieving this functionality, as it avoids unnecessary duplication of effort. Check out the ng2-truncate library on GitHub

Here's an example:

First, import the TruncateModule into your module 

import { TruncateModule } from "@yellowspot/ng-truncate";

@NgModule({
  declarations: [
  ...
  ],
  imports: [
     TruncateModule,
  ]
});

Next, in your view you can use the following syntax 

<div class="test" [innerHtml]="anchor | truncate:200"></div>

Answer №2

One way to shorten text is by utilizing the slice pipe method like so:

{{ (str.length>6)? (str | slice:0:6)+'..':(str) }}

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

Ionic Error: spawn UNKNOWN_PROCESS

Upon attempting to execute the following command: ionic serve --cordova --platform browser An error message was displayed: Error: spawn UNKNOWN at ChildProcess.spawn (internal/child_process.js:403:11) at Object.spawn (child_process.js:553:9) at spawn ( ...

angularionic-frameworkserve

The husky error occurred: pre-commit hook failure (use --no-verify to ignore)

Out of the blue, I started encountering the error message "husky > pre-commit hook failed (add --no-verify to bypass)" when attempting to execute git commit. (C:\Windows\System32\cmd.exe) > git commit husky > npm run -s precommit (n ...

angulargitpre-commit-hookhuskygit-husky

Fade in and out list items while adjusting the height of the container

Check out this code snippet I put together in Codepen: <div class="slider"> <ul> <li id="S1"> <div class="txt"><p>First slogan</p></div> <div class="img"><img src="http://placehold.it/80 ...

jqueryhtmlcss

Is it possible to redirect the client to a different HTML file after they input a number?

Following a submission of numerical input, I am looking to navigate from the index.html file to another HTML file or similar destination. Could someone provide assistance? Below is the code I have written: <!DOCTYPE html> <html lang="en&quo ...

javascripthtmlcss

How to implement div scrolling on button click using Angular 4

Is there a way to make the contents of a div scroll to the left when one button is clicked and to the right when another button is clicked? I've tried using ScrollLeft, but it doesn't seem to be working... Here's the HTML code: <button ...

javascripthtmlcssangular

Tips for effectively segregating various elements within an ng-repeat loop

I'm in the process of creating a website that utilizes ng-repeat to showcase two directives and an element. The second directive and the element are displayed after a certain number of "repeats" (determined by index). These directives appear as rectan ...

htmlcssangularjs

What is the method for retrieving the font size of elements in the native view using appium?

Can the font size of text in the native view be retrieved using appium? I am aware of using driver.findElement(By.id("by-id")).getCssValue("font-size"); for web views. Is there a similar method for native views? ...

javacssseleniumappium

I'm trying to understand why this code isn't running properly. Can someone explain why my CSS is not being executed?

For some reason, using button .order{} to select elements inside the button is not applying the CSS codes as expected. The text color remains unchanged. However, when using just `.order` to select the elements, the CSS code works perfectly fine. Can someon ...

htmlcss

It appears that the ChangeDetectionStrategy.OnPush is not functioning properly in the case of receiving a destructured object from a service

Implementing the OnPush strategy, a service is utilized to update some data. However, upon receiving the data in the component, it requires a click on the screen to reflect the changes. Parent.ts // Click initiates the logic click() { this. ...

angulartypescriptangular-changedetection

The CSS div mysteriously vanishes right before I can trigger the click event

My CSS code looks like this: #searchbar-wrapper input#header-searchbar:focus + #search-dropdown-wrapper { display: block; } The purpose of this code is to make a dropdown visible when a user focuses on a textbox. The default behavior should be th ...

css

Add an image to a directory with Angular 7

I am having trouble uploading an Image to the assets/ folder using Angular 7. Below is my attempted solution: HTML: <form [formGroup]="form" (ngSubmit)="postData()" class="intro-form-css"> <div class="form-row"> ...

angulartypescriptangular7image-uploading

Add-on Group for Form Inputs - Is a style element missing? (Bootstrap 4)

I am looking for a way to incorporate a Bootstrap4 input group label between two input fields. While there are "prepend" and "append" styles available, in this scenario, I require a "center" style which seems to be missing. Does anyone have a solution for ...

htmlcssformsbootstrap-4

Guide to effectively utilizing the ng-bootstrap Typeahead component within a Reactive Form

I've been attempting to implement the ng-bootstrap Typeahead component on a Reactive Form in Angular 2, but despite referencing the example code provided in Typeahead's documentation, I can't seem to get it working. Here is what my current ...

angulartwitter-bootstrap-4ng-bootstrap

Ways to stop Ajax long-poll from refreshing div on Chrome?

Update: Upon further investigation, I believe I am getting closer to a solution, but I still require assistance. It seems that my PHP script is returning empty responses when it queries the MySQL database and finds nothing. Instead of holding the request o ...

javascriptphpcssajax

Using Angular to Generate a File from Form Input and Delivering it to the User

I am attempting to develop a feature in Angular 9 that takes user input from a textarea, processes it, and then presents it back to the user as a downloadable (txt) file. The structure of the form in app.component.html is as follows: <form (ngSubmit)= ...

angulartypescriptangular-forms

Activate Span element when image is clicked

To show and hide different span tags when clicking on specific images, you can use the following jQuery script: $("#img1").on('click', function() { $("#div1").fadeIn(); $("#div2,#div3").fadeOut(); }); $("#img2").on('click', functio ...

javascriptjquerycss

Adjust the floating menu to match the height of the content div

I'm facing an issue with the layout of my website - I have a main content div and a sidebar. The height of the content div adjusts based on the content being loaded, but I want the sidebar to always extend all the way down matching the maximum size of ...

htmlcss-floatsidebarcss

Discovering the specific value within an array of various objects through Angular

Within a list of objects, I am specifically looking to extract the name "sample 4" from the second set of objects with an ID of 2. How can this value be retrieved using JavaScript or Angular? {Id: 1, name: sample 1, code: "type", order: 1} {Id: 1, name: ...

javascriptangulartypescriptangular7

CSS/ Javascript - emulate the appearance of the image using CSS3 or Javascript (sticker-like design)

Hi, I need help figuring out how to recreate this image using only CSS for the font and style. I attempted it with this code on JSFIDDLE: JSFIDDLE CSS *{ font-family: 'Asap', sans-serif; font-size:130px; color:#444; ...

javascriptjquerycss

Guide on incorporating a dropdown menu within a Jssor slider

I am facing an issue with trying to include a dropdown menu inside the Jssor slider. The menu does not drop down when placed inside it. Here is the code snippet: <head> <script src="jquery.js"></script> <script src="jssor.slider.min. ...

javascriptjqueryhtmlcssjssor