Angular 2 Create nested objects

I have 2 Components a ExpressionBuilderComponent:

@Component({
    selector: 'expression-builder',
    directives: [ExpressionComponent],
    template: `
        <div class="container">
           <expression *ngFor="#expression of expressions" [prototypes]="prototypes" [expression]="expression" [expressions]="expressions"></expression>
           <a class="btn btn-primary" (click)="addExpression()"><i class="glyphicon glyphicon-plus"></i></a>
        </div>
    `
})

And the ExpressionComponent:

@Component({
    selector: 'expression',
    directives: [ExpressionComponent],
    template: `
    <div class="row">

    <!-- First Select -->
        <div class="col-xs-3">
            <select class="form-control" [(ngModel)]="selectedPrototypeSelector" (ngModelChange)="onPrototypeChange()">
                <option *ngFor="#p of prototypes" [value]="p.selector">
                    {{ p.selectorName }}
                </option>
            </select>
        </div>

    <!-- Second Select -->
        <div [ngClass]="{'col-xs-3': prototype?.valueType !== 'Set', 'col-xs-2': prototype?.valueType === 'Set'}" *ngIf="prototype">
            <select class="form-control" [(ngModel)]="expression.constraint">
                <option *ngFor="#constraint of prototype.constraints" [value]="constraint">
                    {{ constraint }}
                </option>
            </select>
        </div>

    <!-- Third Select -->
        <div [ngClass]="{'col-xs-3': prototype?.valueType !== 'Set', 'col-xs-2': prototype?.valueType === 'Set'}">
            <input *ngIf="expression && prototype?.valueType === 'Integer'" class="form-control" [(ngModel)]="expression.value" />
        </div>

        <div class="col-xs-1">
            <a class="btn btn-danger pull-right" (click)="deleteExpression()"><i class="glyphicon glyphicon-remove"></i></a>
        </div>

        <!-- Expression Set selector -->
        <div *ngIf="prototype?.valueType === 'Set'">
           <expression [prototypes]="prototypes" [expression]="expression"></expression>
               <a class="btn btn-primary" (click)="addExpression()"><i class="glyphicon glyphicon-plus"></i></a>
            </div>
       </div>
   })

export class ExpressionComponent implements OnInit {
   @Input() expression:Expression;
   @Input() expressions:any[];
   @Input() prototype:ExpressionPrototype;
   @Input() prototypes:ExpressionPrototype[];
    ngOnInit() {

        if(this.expression.selector === 'conditionSet'){
            //this.prototypes = this.prototype.children;
            console.log(this.prototypes);
        }
    }

 addExpression() {
        this.expressions.push(new Expression());
        console.log(this.expressions);
    }

And These are the Objects:

export class Expression {
    selector: string;
    constraint: string;
    value: string;
    children: Expression[];
}

export class ExpressionPrototype {
    selector: string;
    selectorName: string;
    constraints: any[] = [];
    valueType: string;
}

How do I move all the prototypes to the expression.children, so that it becomes nested content now it will override each other when I select something because they have the same variable to bind data. And the same for the addExpression it must be in the nested content. I will show you in screenshot what I mean maybe its bit vague:enter image description here

I’ll hope you have enough information 🙂

Here is a PLUNKER

Leave a Reply

avatar
  Subscribe  
Notify of