Issue
I'm trying to build an HTML where objects of an array will be put out using Angular. Also I want the output not so show objects of the array which are empty. I managed that the content of the object does not show up. However the boxes in which this content is are still showing up. Hopefully someone can help me to resolve this issue.
HTML:
<div class=content>
<div class=data-item *ngFor="let item of dataSource">
<div *ngIf="item.Value != ''" >
<div>{{item.Header}}</div>
<div>{{item.Value}}</div>
</div>
</div>
</div>
CSS:
.content {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.data-item{
flex: 0 0 21%;
border-style: solid;
}
TS:
import { Component, VERSION } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
dataSource: items[] = [
{Header: 'Header A1', Value: 123},
{Header: 'Header B2', Value: 234},
{Header: 'Header C3', Value: ''},
{Header: 'Header D4', Value: 456},
{Header: 'Header E5', Value: ''},
{Header: 'Header F6', Value: 678},
{Header: 'Header G7', Value: 789},
]
}
export interface items{
Header: string;
Value: any;
}
Here's a picture of the rendered HTML: Rendered HTML
Solution
Use ng-container
to avoid extra div and assign CSS
class to the div which you used for *ngIf
HTML file
<div class=content>
<ng-container *ngFor="let item of dataSource">
<div *ngIf="item.Value != ''" class=data-item>
<div>{{item.Header}}</div>
<div>{{item.Value}}</div>
</div>
</ng-container>
</div>
Answered By - Exception
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.