Line break in ngFor loop

Question

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>

Solution 1

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

Solution 2

Just add a css class with display: block to your button. Or add it inline like the next example:

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

I don't have idea if the pButton directive adds styles to the button that can override the display value.