CODEWITHSUNDEEP
htmlcssangular
Zoopy
Zoopy

Reputation: 77

Angular - display buttons in rows of two

I'm trying to display dynamically created buttons in rows of two and I'm a little unsure how to do so. So far I've got the following working, but it only works on my limited set of 4 buttons. What I want is for it to insert a linebreak after every second button. Here's my code:

HTML:

<div id="departmentButtonsDiv" *ngFor="let department of lstDepartments; let i 
= index">
   <span *ngIf="department.blnHiddenOnLandingPage == false">
     <button pButton type="button" class="departmentButton" 
           (click)="navigateToDepartment(department.strName)" label=
           {{department.strName}}></button>
   </span>
  <br *ngIf=" i == 3">
</div>

CSS:

.departmentButton {
 height: auto;
 width: 200px;
 margin-bottom: 2px;
}

#departmentButtonsDiv{
 position: relative;
 top: 10%;
 left: 45%;
 display: inline;
}

I initially thought that if I set ngIf to check if index is an even number it would do the trick, but some elements are not necessarily being displayed because their boolean values might exclude them meaning the index variable is incremented anyway. Is there any way to do this check on only the buttons that are being rendered, and if so, how would I go about that?

I'm not really a front-end developer so my HTML/CSS is a bit iffy and I've only been working in Angular for about a month so I'm rather inexperienced on that front too. I would appreciate any help or advice in this regard. I'm even open to better ways of doing this because I'm sure this is only one of many ways of doing it.

Upvotes: 1

Views: 2294

Answers (5)

snorkpete
snorkpete

Reputation: 14564

How dynamic is the value department.blnHiddenOnLandingPage? If it's something that doesn't change often, another approach can simply be to filter your list of departments in your component so that you don't have as much logic to deal with in your template.

So, for eg, you can have your component do something like:

ngOnInit() {
  .....
  this.filteredDepartments = this.lstDepartments.filter(dept => !dept. blnHiddenOnLandingPage);
}

And then, in your template:

 <div id="departmentButtonsDiv" *ngFor="let department of filteredDepartments; let i=index">
   <span>
     <button pButton type="button" class="departmentButton" 
          (click)="navigateToDepartment(department.strName)" label=
          {{department.strName}}></button>
   </span>
   <br *ngIf="i % 2 == 0">
</div>

If that hiddenOnLandingPage flag changes often, you can probably even move where you apply the filter to somewhere more appropriate. (For eg having the filtered list be the return value of a method on your class so that it responds to change detection)

Although, depending on the frequency of the changes, I might take a different approach at that point and try to use css (instead of the <br> tag) to get the wrapping effect that I want.

Upvotes: 1

Eld0w
Eld0w

Reputation: 904

In Angular2 and if you are using bootstrap, you could do so

<div *ngFor="let item of list; let i = index">
    <div class="col-md-6"><button type="button">Click me !</button></div>
    <div class="clearfix" *ngIf="(i+1)%2 == 0"></div>
</div>

It will basically append 2 cols and then apply clear:both to start a new row.

Upvotes: 1

brijmcq
brijmcq

Reputation: 3418

First, your way of checking for even or odd is wrong

 <br *ngIf=" i == 3">

It should be like this

For even

<div *ngIf="id%2 == 0">

For odd

<div *ngIf="id%2 == 1">

To have an inserted break for every even button try this

 <div *ngIf="department.blnHiddenOnLandingPage == false">
     <span>
         <button pButton type="button" class="departmentButton" 
               (click)="navigateToDepartment(department.strName)" label=
               {{department.strName}}></button>
       </span>
         <div *ngIf="id%2 == 0">
  </div>

I moved the *ngIf from the span to another div so that you can insert the br if there is a button.

Hope this helps

Upvotes: 0

Raphael Jenni
Raphael Jenni

Reputation: 318

You can use the new FlexBox. Tutorial

#departmentButtonsDiv {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}
#departmentButtonsDiv span {
  flex: 1 0 50%;
  box-sizing: border-box;
}

This would be more performant, as it is css.

Else you can try to work with modulo:

<br *ngIf="i % 2 == 0"/>

Upvotes: 0

nfproductions
nfproductions

Reputation: 94

Try using the modulus operator.

<br ng-if="$index % 2 == 0">

This essentially makes a BR every time $index is a factor of 2.

Upvotes: 0

Related Questions