2

Lets say I have a element tree and I want to wrap it in different div based on a condition eg.

//condition == 1
<div class="condition1" condition1Directive>
   <div> ... </div>   //same content
</div>

//condition == 2
<div class="condition2">
   <div> ... </div>   //same content
</div>

I would like to find the most elegant and efficient way to do this in angular. Thanks

kk-at-cbx
  • 329
  • 3
  • 10
  • Is the just the class attribute changing for the wrapping div or it could be any other element? – Nikhil Walvekar Jul 17 '20 at 03:13
  • No. I have updated my question. I want to have some directives in particular div. – kk-at-cbx Jul 17 '20 at 03:22
  • Are you talking about using one directive if `condition1` and the other directive if `condition2`? Slightly confused about your end goal. I think `*ngIf` is what you want, but I don't quite know what you're trying to achieve. – DrZoo Jul 17 '20 at 03:24
  • My actual case is using directive in condition1 and no directive in condition2 – kk-at-cbx Jul 17 '20 at 03:26
  • It is an interesting question. Can you please explain in detail, what are the two conditions ? Why only through directive ? What is your end exact result ? – abhay tripathi Jul 17 '20 at 05:18
  • Actually I have a view that will be presented in mobile and desktop. In desktop I would like it can be drag and drop so I use angular drag and drop and it requires directive. While in mobile, I don't support the drag and drop. This is the real case I am facing. – kk-at-cbx Jul 17 '20 at 08:33

3 Answers3

2

If you are looking to just enclose divs with different styling properties you can use ngClass

<div [ngClass]="{'condition1': condition === 1, 'condition2': condition === 2}"> 


<div> ... </div>   //same content

</div>

For using conditional directive you can do something like this:

 <ng-container *ngTemplateOutlet="condition1 === true ? template1 : template2">

<ng-template #template1 directive> <ng-template>

<ng-template #template2></ng-template>
Navitas28
  • 745
  • 4
  • 13
  • sorry that I should be more clear on my question. I have updated it and actually I want to have some directives in particular div. – kk-at-cbx Jul 17 '20 at 03:23
2

You can do like this ways ..

CASE 1

<div *ngIf="condition1" class="condition1" condition1Directive>
   <div> ... </div>   //same content
</div>

<div *ngIf="condition2" class="condition2">
   <div> ... </div>   //same content
</div>

CASE 2

<div [ngClass]="condition1 == true ? 'condition1' : 'condition2'" condition1Directive>
   <div> ... </div>   //same content
</div>
Rohit Tagadiya
  • 3,373
  • 1
  • 25
  • 25
1

Use *ngIf for the parent div, extract the same content div to a ng-template or component if necessary.

You can check this thread for more detail:

Apply a directive conditionally

<div *ngIf="isCondition1" condition1Directive>
  <sameContentComponent></sameContentComponent>
</ng-container>

<div *ngIf="!isCondition1">
  <sameContentComponent></sameContentComponent>
</ng-container>
huan feng
  • 7,307
  • 2
  • 32
  • 56