CODEWITHSUNDEEP
htmlangulartypescriptgo
Kalyanam Rajashree
Kalyanam Rajashree

Reputation: 712

Dynamic UI using Angular

I have some JSON data using which UI has to be displayed with Angular. The JSON data is very dynamic. It can have multiple new fields, can be n times nested etc. Basically, it can be very dynamic. Is there a way to draw dynamic UI accordingly?

In general, is this advisable or is it better if some backend layer does this data processing and sends the processed data to Angular?

UPDATE 1

Thanks all for the suggestions. But I think the second part of the question is not addressed by anyone. Let me ask that again. Angular will anyways have to draw UI dynamically. But before that, we need to process the JSON data. So, my question here is who would be the best entity to do that data processing? The backend layer or Angular? So basically, my doubt is what should be input to Angular? JSON data as it is or the processed data? Which approach is better?

Upvotes: 0

Views: 1896

Answers (3)

balajivaishnav
balajivaishnav

Reputation: 2893

Create a FormGroup and create a FormArray using FormBuilder and then you can create separate set of form builder array

for example

private _formBuilder: FormBuilder
private _fromGroup: FormGroup

this._formBuilder.group({
InputText:this._formBuilder.array([]),
CheckBox:this._formBuilder.array([])
})

ngOnInIt(){
//create a object for your Observable API service and then get the desired JSON from your API 

   this.apiservice.authHttpPost("url",param).subscribe(res=>{
     return this._fb.group({
    textVals:res.textbox //assign your JSON API result
     });
    })   
    }

HTML

 <ul>
    <li *ngFor="let inptxt of _fromGroup.controls.InputText.controls;let i=index">
      <div[formGroupName]="i">
     <label>{{inptxt.name}}  </label>                                                                                            
     <input formControlName="textVals" type="text"/>
    </div>
    </li>
    </ul>

this is just an idea for you to achieve it, I dont know how is your JSON result would be, Happy Coding

Upvotes: 0

Kraken
Kraken

Reputation: 1955

Yes it is possible, your question is very broad, but i'll try to explain you basic approach. You can create any data model you want with fields that are not actually there like 

name?: string;

same with that all you need is to get what is the worst example that may came from a backend.

Upvotes: 0

Padmapriya Vishnuvardhan
Padmapriya Vishnuvardhan

Reputation: 2166

Yes it is possible.

For each data node you need to come up with the directive (component) and need to insert it accordingly on iterating the object.

Upvotes: 0

Related Questions