When a ListView item is clicked, a label will display text with text wrapping specific to the selected item in the list

Within the listview items, there is a label that should expand when clicked. For example, initially it only shows one line of text. Upon clicking on the label, it should expand to show 10 lines of text.

Current Issue:

At present, when I click on the first listview item label, it expands perfectly to display 10 lines using textWrap. However, it also automatically expands the label of the fourth list item.

Desired Outcome:

When clicking on the first listview item label, only that specific label should expand with textWrap. The expansion should not affect the label in the fourth list item.

Below is the relevant code snippet:

Typescript file:

onClickList(args: EventData, index: number): void {

  let labelArg = <Label>args.object;

  var listview: ListView = <ListView>this.page.getViewById("listviewId");

  listview.refresh();

  labelArg.textWrap = true;

  listview.refresh();  

}  

HTML file:

<ListView id="listviewId" [items]="_myFeedsList" class="list-group">
  <ng-template let-item="item" let-i="index">
    <StackLayout id="stackId">
      ....... .......
      <Label textWrap="false" id="labelID" [text]="item.data" (tap)="onClickList($event, i)"></Label>

    </StackLayout>
  </ng-template>
</ListView>

Answer №1

If you're looking to easily toggle the textWrap value of a tapped item, you can use a simple solution:

Typescript file :

toggle(event) {
    if (event.object.textWrap) {
      event.object.textWrap = false;
    } else {
      event.object.textWrap = true;
    }
}

HTML file, update the line with the following code :

<Label [textWrap]="false" [id]="'label' + i" [text]="item.data" (tap)="toggle($event)"></Label>

You'll notice that I've made the Label id dynamic, allowing for easier selection later on. While this change doesn't affect functionality, it does make the code cleaner compared to assigning the same id to each one.

Have a look at the working example here: https://github.com/mickaeleuranie/nativescript-stackoverflow-46910984

Answer №2

Although I don't consider myself a NativeScript 'guru', let me provide you with a simplified explanation. In your code, ensure you have a property or field dedicated to storing the index of the clicked label. Initialize this property with -1 as the default value. Upon each label click event, update this property with the index value (i in your context). Then, adjust the visibility or appearance of the label based on whether it matches the stored property value. I hope this clarifies things for you.

selected = -1;

<Label textWrap="false" id="labelID" [text]="item.data" (tap)="selected = i; onClickList($event, i)"></Label>

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

Create an observable array that contains both outer and inner response properties within an Angular application

How can I create an Observable array in Angular by making API calls based on the response of another API call, which returns an array of elements? For example: queryThatReturnsArray().pipe( switchMap((outerResponse) => { return forkJoin(out ...

Choosing between map and switchMap in RxJS can impact the outcome of

I've been diving into the documentation for both switchMap and map, but I'm struggling to grasp the distinction between the two. Can someone please explain any scenarios where their usage is interchangeable? ...

Troubleshooting: Angular universal 7 unable to initiate HTTP requests

Recently, I've embarked on the journey of converting my Angular 7.2.0 application into an Angular universal app. The process has been successful in rendering server-side and transferring state swiftly on high-performance PCs and fast internet connecti ...

Importing node_modules in Angular2 using TypeScript

My Angular2 app started off as a simple 'hello world' project. However, I made the questionable decision to use different directory structures for my development environment and the final deployment folder on my spring backend. This difference c ...

Utilize NgRx's dispatch method to pass a payload and update the store

Exploring the world of ngRx is a new journey for me. I am currently in the process of establishing a store that will receive updates triggered by actions from components. NgRx create methods are being utilized to craft actions and reducers for this purpose ...

Angular: Exploring the possibilities of condition-based click event implementation

In my component, there are two elements: 'order information' and a 'datepicker'. When clicking on the component, it will display the order information. However, I want to prevent the click event from being triggered if the user clicks ...

The mat dialog is displayed with a mat table below the title line

Is there a solution for the issue where the mat-table in a mat dialog displays a line below the heading? This is the code snippet: <h2 mat-dialog-title>dialog title</h2> <mat-dialog-content class="mat-typography"> <div c ...

A guide on refreshing the dependencies list within Angular's node modules and package.json files

A close friend sent me the angular src folder, which I used to create a new Angular project. However, when I replaced my newly created src folder with my friend's and tried running the application using npm start, I encountered errors related to missi ...

Utilizing session management in Angular while handling CORS origin requests

Everything was going smoothly with my session until I decided to enable CORS. Server: app.use(require('express-session')({ secret: 'some key', resave: true, saveUninitialized: true, proxy: true, cookie: { s ...

Reactjs Promise left hanging in limbo

How can I resolve the pending status of my promise? I have a modal with a form submit in it, where I am trying to retrieve the base64 string of a CSV file. While my code seems to be returning the desired result, it remains stuck in a pending state. c ...

Using TypeScript, add an observable to an array of observables using RxJS

Can someone explain how to include Observable<News> in an array of observables? newsArray: Observable<Array<any>>; addNews(newsId: number) { let news = this.newsService.getNewNews(newsId); // this results in an Observable<News> ...

Working with Arrays of Objects in Typescript with Angular

I am currently trying to define an array of objects in my Typescript code. However, I am encountering issues when accessing these objects. Below is the snippet of my code along with a screenshot showing the output of this.attachments. info: Info[]; if (t ...

Refreshing page in Angular after authentication

Question: I am facing an issue with my signInWithEmailAndPassword function where it reloads the same page instead of redirecting to the dashboard. I have verified that the credentials are correct and match my firebase test authentication, so I suspect ther ...

Guide to transitioning from Angular 4 to Angular 7: incorporating 'URLSearchParams' and 'RequestOptions'

I am in the process of updating my project from Angular 4 to Angular 7. I have successfully switched from using http to httpClient and changed to common/http as well. However, I am inexperienced with Angular and unsure how to convert urlSearchParams and ...

Experiencing issues while trying to render a component with dynamic content in Next.js

Currently, I am facing an issue while trying to display Leaflet maps in Next.js with Typescript. I came across the suggestion to disable server-side rendering (ssr) to prevent the 'window not defined' error. However, when implementing the followi ...

What is the process for configuring the directive to establish a drag-and-drop area within Angular?

I am currently working on implementing a file drag and drop zone in Angular. I have created the dropzone.directive and added it to the declarations in app.module.ts. While my code compiles and launches successfully, I am facing an issue where the HTML doe ...

An issue arises with the Angular 7 application specifically on Mac clients when the production release is deployed

I am facing an issue with my Angular 7 application developed in Visual Studio. The application utilizes Entity Framework for data access. Strangely, everything works perfectly when I connect a Windows laptop or a MacBook Air (using Chrome or Safari) to the ...

Angular 13's APP_INITIALIZER doesn't wait as expected

Recently, I have been in the process of upgrading from okta/okta-angular version 3.x to 5.x and encountered an unexpected bug. Upon startup of the application, we utilized APP_INITIALIZER to trigger appInitializerFactory(configService: ConfigService), whi ...

What are the best strategies for managing npm dependencies alongside other packages?

I am working on an Angular app that has the following dependencies: "dependencies": { "personalUiLibrary": "1.0.0" }, "devDependencies": { "tailwindcss": "^2.2.7" } In the personalUiLibrary p ...

I want to know the most effective way to showcase particular information on a separate page using Angular

Recently, I've been working with a mock json file that contains a list of products to be displayed on a Product page. My goal is to select a specific product, such as 'Product 1', and have only that product's information displayed on th ...