Angular: Using directives with *ngIf

Question

Is it somehow possible to say if i >= 2 then [cdkDropListConnectedTo]="[one, two]", otherwise [cdkDropListConnectedTo]="[three, four]"?

*ngIf didn't work for me. I also searched for "Angular ngif directives". However, the answers I was looking for did not come out.

<div *ngFor="let task of this.tasks; let i = index">
    <div>
        <div
            cdkDropList
            id="task-container-{{i}}"
            #ref{{i}}="cdkDropList"
            [cdkDropListData]="task.getDropListData()"
            [cdkDropListConnectedTo]= "[]"
            (cdkDropListDropped)="drop($event)">
            <div>
                <p>{{task.getHeadline()}}</p>
            </div>
        </div>
    </div>
</div>

If I understand what you try to do, you are assigning the value based on condition. [cdkDropListConnectedTo]="i >= 2 ? [one, two] : [three, four]". *ngIf is used for rendering the element by condition. — Yong Shun
– Yong Shun, Commented Dec 10, 2022 at 13:06
what is one, two in [one, two] ? Is this array of strings? — Hirdesh Vishwdewa
– Hirdesh Vishwdewa, Commented Dec 10, 2022 at 13:15

Yong Shun · Accepted Answer · 2022-12-10 13:41:03Z

3

From your question, you are assigning the value based on the condition. You can achieve with:

[cdkDropListConnectedTo]="i >= 2 ? [one, two] : [three, four]"

*ngIf is used to render the element or not by the condition. Hence *ngIf is not suitable in your scenario.

Unless you are attempting with *ngIf with else template as:

<div *ngIf="i > 2; else elseTemplate"
  cdkDropList
  id="task-container-{{i}}"
  #ref{{i}}="cdkDropList"
  [cdkDropListData]="task.getDropListData()"  
  [cdkDropListConnectedTo]="[one, two]"
  (cdkDropListDropped)="drop($event)">
  ...
</div>

<ng-template #elseTemplate
  cdkDropList
  id="task-container-{{i}}"
  #ref{{i}}="cdkDropList"
  [cdkDropListData]="task.getDropListData()"
  [cdkDropListConnectedTo]="[three, four]"
  (cdkDropListDropped)="drop($event)">
  ...
</ng-template>

edited Dec 10, 2022 at 13:41

answered Dec 10, 2022 at 13:08

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

coder Over a year ago

I get a parse error when using task-container-{{i}} in the ngIf. [cdkDropListConnectedTo]= "i >= 2 ? [task-container-{{i}}] : [three, four]"

Yong Shun Over a year ago

No, that is not the correct way. [cdkDropListConnectedTo]="i >= 2 ? [one, two] : [three, four]"

Hirdesh Vishwdewa · Accepted Answer · 2022-12-10 13:17:52Z

1

Bind a function like this:

[cdkDropListConnectedTo]= "getDropList(i)"

Now inside your ts file, create the callback:

getDropList (i) {
 return i >= 2 ? [one, two] : [three, four];
}

answered Dec 10, 2022 at 13:17

Hirdesh Vishwdewa

2,3721 gold badge19 silver badges34 bronze badges

Collectives™ on Stack Overflow

Angular: Using directives with *ngIf

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related