Line break in ngFor loop

html angular ngfor
Roka545 picture Roka545 · Jan 30, 2017 · Viewed 12.9k times · Source

I have an ngFor that creates several PrimeNG buttons. Right now, the buttons appear directly after each other on the same row - I would like each button to display on its on line vertically. How do you go about doing that? Here is my ngFor code:

<button pButton type="button" 
            *ngFor="let atrConfig of atrConfigs; let i = index" 
            (click)="selectConfiguration(atrConfig)" label = "">
        Name: {{atrConfig.name}} <br />
</button>

Answer

Christopher Moore picture Christopher Moore · Jan 30, 2017

You should use a ng-container tag which groups elements but doesn't get rendered in the DOM tree as a node.

<ng-container *ngFor="let atrConfig of atrConfigs; let i = index" >
    <button pButton type="button" 
        (click)="selectConfiguration(atrConfig)" label = ""> Name: {{atrConfig.name}}
    </button>
    <br />
</ng-container>

In this example, it may be just as simple to use CSS, but ng-container can be very useful if you don't want a surrounding div e.g. populating a table

Related questions

Remove object from array typescript(Angular 2)

I just try to delete object from array in typescript, in angular 2.4.0, let me show the code, its my html file: button type="submit" (click)="addAnotherLanguague()" >Add non native languague</button> <li *ngFor="let languague of …

Read More
Angular dynamic table using ngFor

I would like to know if it is possible to create a dynamic HTML table from JSON data. The amount of columns and headers should change according to the keys in the JSON. For example this JSON should create this …

Read More
How to loop through array upto only some objects using ngFor in angular 2

I'm looping through an array which has 6 objects and using ngFor where I want to loop only up to 4 elements .. How Can I do that?? <div class="item active" *ngFor="#data of lengthArray"> content </div> In …

Read More