Truncate HTML elements in Angular

Question

Image you had a div with maybe 20 <button> elements:

Sometimes, this can get extremely high. I am wondering what would be the right approach with Angular to "truncate" these to the first "4" buttons and a "More/less" <p> tag toggle, which will show or hide the extra buttons on demand.

I understand what I need to do, I know how to do it with jQuery or "primitive HTML", but there must be an angular way I am not seeing (I was thinking on integrating a pipe, which can truncate based on boolean, but not so sure)

Current Code:

<div fxLayout="column">
  <ng-container *ngFor="let color of car['style']?.colors">
     <div fxFlex="30" *ngIf="color.category ==='Exterior'">
         <md-card-subtitle>
             {{ color.category }} Colors {{display.exterior}}
          </md-card-subtitle>
          <md-card-content>
             <ng-container *ngFor="let option of color?.options">
                <button *ngIf="option.colorChips !== undefined" type="button" (mouseover)="display.exterior = option.name"  (mouseleave)="display.exterior = colors.exterior.name" (click)="setSelectedColor(x)" [ngStyle]="{'background-color': '#' + option.colorChips.primary.hex}"> </button>
              </ng-container>
           </md-card-content>
         </div>
       </ng-container>
     </div>

Why not bind your buttons to data in your class (e.g. via NgFor) and let the add/remove buttons chage that data? — salmore
– salmore, Commented Aug 17, 2017 at 5:32
@salmore thanks for suggestion. I added my code to show that I am indeed using ngFor to populate the buttons, however I need a way to just get 4 buttons for example, and be able to pull the rest.. thinking it can be done with a pipe just need more direction — Moshe
– Moshe, Commented Aug 17, 2017 at 5:43
If I'm understanding your question correctly, there are several ways to do it, 1. The easiest but not likely the best is to bind the pagination to a property of your class perPage = 5, then change your template to something like <div *ngFor="let color of car['style']?.colors; let i = index"> <ng-container *ngIf="i+1 <= perPage"> </ng-container> </div> — salmore
– salmore, Commented Aug 17, 2017 at 5:59

Kamal · Accepted Answer · 2017-08-17 06:57:49Z

There are several ways to solve this. I'll describe below only one of the solutions that I've used recently. Please see this link the section of poplar categories.

You can use ngFor directive to iterate over the collection and then use ngIf directive to conditionally show and hide the desired sections of the buttons.
In your component class declare a boolean variable and attach it to the button to set it true and false

Please see below code

  <ng-container *ngFor="let featuredCategory of featuredCategories; let i=index">
        <div class="col-sm-3 mb-5 mt-4  mr-auto ml-auto" *ngIf="i<=7">
           show this div if array index is less than 7th item          
        </div>
        <div class="col-sm-3 mb-5 mt-4  mr-auto ml-auto" *ngIf="showAllCategories && i>=8">
           show this div if array index is more than 7th item          
        </div>
        </div>
      </ng-container>
      <button class="btn btn-primary btn-lg" (click)="showAllCategories = !showAllCategories">
          <span *ngIf="showAllCategories"> View Less Categories 
             <i class="icon-arrow-right icons mt-5"></i>
           </span>
          <span *ngIf="!showAllCategories"> View All Categories 
             <i class="icon-arrow-right icons mt-5"></i>
           </span>
        </button>

Himanshu · Accepted Answer · 2017-08-17 06:17:56Z

You can use Pagination to solve his. You can limit the number of buttons to be displayed on each page using pagination.

You can use ngx-pagination for this => NGX_PAGINATION

1) Install ngx-pagination npm install ngx-pagination --save

2) Add to app.module.ts @NgModule({ imports: [BrowserModule, NgxPaginationModule]

3) In your HTML

        <ng-container *ngFor="let option of color?.options | paginate: { itemsPerPage: this.linesperpage, currentPage: p }">

    <label class="sr-only" for="inlineFormInput">Lines Per Page</label>
    <select class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput"  [(ngModel)]="linesperpage">
      <option>4</option>
      <option>10</option>
      <option>20</option>
    </select>
<pagination-controls (pageChange)="p = $event" class="my-pagination" ></pagination-controls>

4) In your Component:-

    export class RideSuccessComponent  {

  p = 1;
  linesperpage = 4;
}

By just adding in select class you can easily modify number of displayed buttons on each page. Hope this helps.

Collectives™ on Stack Overflow

Truncate HTML elements in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related