Is there any way to add or remove directive using condition in angular framework?

Question

I am using directive selector on click event which give asc and desc but i want to remove this directive while my reactive form is dirty. appSortable is directive selector

<div class="bank-name sort" appSortable sortDirection="asc" (sorted)="onSortedBankName($event)" (click)="sortColumnBy(bankConstants.sortBy.name)"  #Sortable>

Possible duplicate of [Apply a directive conditionally](https://stackoverflow.com/questions/44597077/apply-a-directive-conditionally) — Vega, Apr 19 '19 at 02:37

eess · Answer 1 · 2019-04-19T03:43:37.183

2

Why not using *ngIf in your template?

<div *ngIf="myForm.dirty" class="bank-name sort">
<div *ngIf="!myForm.dirty" class="bank-name sort" appSortable sortDirection="asc" (sorted)="onSortedBankName($event)" (click)="sortColumnBy(bankConstants.sortBy.name)"  #Sortable>

edited Apr 19 '19 at 03:43

answered Apr 19 '19 at 03:38

eess

21
3

1

in click event i need to check form is dirty or not then warning model will pupup what if user Click 'YES" how to store previous sortDirection = (asc or desc) and sortBy – prabin shrestha Apr 19 '19 at 05:11

score 0 · Answer 2 · answered Apr 19 '19 at 02:20

0

Can you not update your directive to accept an enabled property and then set it to the state of the form?

[isEnabled]="!myForm.dirty"

Have your directive do nothing if this value is false.

answered Apr 19 '19 at 02:20

Sachin Gupta · Answer 3 · 2019-04-19T05:13:42.053

Having two similar codes is fine only if the code is 1-liner. If it spans multiple rows, the code can get too ugly too soon.

You can have an input parameter to your directive. You can pass the value of form.dirty to the directive and apply whatever logic you want there. It also saves you from duplicating the code.

See example here

Edit: Made the solution more generic, Each component can have its own function and sort accordingly.

score 0 · Answer 4 · edited Apr 19 '19 at 06:54

0

You can use below code to hide your content if form is dirty

<div *ngIf="!YourFormName.dirty" class="bank-name sort" appSortable sortDirection="asc" (sorted)="onSortedBankName($event)" (click)="sortColumnBy(bankConstants.sortBy.name)"  #Sortable>

edited Apr 19 '19 at 06:54

Bill Tür stands with Ukraine

3,425
30
38
48

answered Apr 19 '19 at 06:45

Ashish Mishra

1
3

Is there any way to add or remove directive using condition in angular framework?

4 Answers4