I have an angular app that creates dynamic components like checkbox ,radio button ,textbox etc from server configuration . here i have to show the checkboxes with column settings .Lets say, you have 6 checkboxes and its number of columns are 3 , I have to show it as 2 rows 3 columns .But is showing in all new lines . Means 1 column 6 row
checkbox.html
<div class="widgetcontainer form-group" [style.left.px]='position.X' [style.top.px]='position.Y'>
<div *ngFor="let chk of checkboxList;let i = index" class="checkbox">
<div *ngIf="(i+1)%3==0 else loading" style="color:red">
<div [ngClass]="'display-block'">
<label class="checkbox-inline">
<input type="checkbox" id="checkbox-{{i}}" name="checkbox-{{i}}" [value]="chk" (change)="onSelectionChange($event)">{{chk}}
</label>
</div>
</div>
<div>
<ng-template #loading>
<div class='inlline-flex-cls'>
<label class="checkbox-inline">
<input type="checkbox" id="checkbox-{{i}}" name="checkbox-{{i}}" [value]="chk" (change)="onSelectionChange($event)">{{chk}}
</label>
</div>
</ng-template>
</div>
</div>
</div>
app.css
.widgetcontainer{
position: absolute;
}
.inlline-flex-cls{
display: inline-flex;
}
.display-block{
display: inline-block;
}
#maincontainer {
position: relative;
}
app.component.html
<div id="maincontainer" #container></div>
app.component.ts
import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicComponent } from './dynamic/dynamic.component';
import { CheckboxComponent } from './dynamic/checkbox/checkbox.component';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
private _counter = 1;
constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
add(): void {
// create the component factory
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
// add the component to the view
const componentRef = this.container.createComponent(componentFactory);
// pass some data to the component
componentRef.instance.index = this._counter++;
}
ngOnInit(){
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(CheckboxComponent);
// add the component to the view
const componentRef:any = this.container.createComponent(componentFactory);
componentRef.instance.initialize();
}
}
