How to disable part of component definition in Template-CodePudding

I am trying to use a component from Telerik (TreeView) and want to be able to enable or disable a section of the config in my Template to remove some functions. If it would be a regular code i could use a *ngIf but not sure how to. Or is the only wat to do a <dif *ngIf="enableDragDrop"> and have to dedicated fulle templates for this component.

<kendo-treeview
    #treeView
        [nodes]="data"
        textField="text"
        formControlName="permission"
        kendoTreeViewHierarchyBinding
        childrenField="child"
        [filterable]="true"
        kendoTreeViewExpandable
        [expandedKeys]="expandedKeys"
        [expandBy]="'text'"
        [kendoTreeViewCheckable]="checkableSettings"
        (checkedChange)="handleChecking($event)"
        [(checkedKeys)]="checkedKeys"
        checkBy="guid"
        
       <--- Section to enable or disable based on value enableDragDrop --->
        kendoTreeViewDragAndDrop
        kendoTreeViewDragAndDropEditing
        (nodeDragStart)="log('nodeDragStart', $event)"
        (nodeDrag)="log('nodeDrag', $event)"
        (nodeDrop)="handleDrop($event)"
        (addItem)="log('addItem', $event)"
        (removeItem)="log('removeItem', $event)"
        (nodeDragEnd)="log('nodeDragEnd', $event)"
        (nodeClick)="log3('nodeClick', $event)"
       <--- End of Section to enable --->
        
        >
    </kendo-treeview>

CodePudding user response：

you can use a boolean property within the event binding execution.

for example :

let enableDragDrop = false;

this is the property to use in your component.ts

in your template, in the tag of kendo-treeview:

(nodeDragStart)="enableDragDrop && log('nodeDragStart', $event)"

we use && to make sure that the log() function will not be executed until enableDragDrop is true.

the same goes for the property binding

[kendoTreeViewDragAndDrop]="enableDragDrop"

it is as easy as this, I hope this is what you are looking for.

CodePudding user response：

Though, a bit repetitive code, simply turning a boolean with *ngIf should be appropriate for this case.

In ts.

enableDragDrop: boolean = true;

In html

<ng-container *ngIf="enableDragDrop; else noDragAndDrop"
   <kendo-treeview
        #treeView
        [nodes]="data"
        textField="text"
        formControlName="permission"
        kendoTreeViewHierarchyBinding
        childrenField="child"
        [filterable]="true"
        kendoTreeViewExpandable
        [expandedKeys]="expandedKeys"
        [expandBy]="'text'"
        [kendoTreeViewCheckable]="checkableSettings"
        (checkedChange)="handleChecking($event)"
        [(checkedKeys)]="checkedKeys"
        checkBy="guid"
        
        kendoTreeViewDragAndDrop
        kendoTreeViewDragAndDropEditing
        (nodeDragStart)="log('nodeDragStart', $event)"
        (nodeDrag)="log('nodeDrag', $event)"
        (nodeDrop)="handleDrop($event)"
        (addItem)="log('addItem', $event)"
        (removeItem)="log('removeItem', $event)"
        (nodeDragEnd)="log('nodeDragEnd', $event)"
        (nodeClick)="log3('nodeClick', $event)">
   </kendo-treeview>
</ng-container>

<ng-template #noDragAndDrop>
   <kendo-treeview
        #treeView
        [nodes]="data"
        textField="text"
        formControlName="permission"
        kendoTreeViewHierarchyBinding
        childrenField="child"
        [filterable]="true"
        kendoTreeViewExpandable
        [expandedKeys]="expandedKeys"
        [expandBy]="'text'"
        [kendoTreeViewCheckable]="checkableSettings"
        (checkedChange)="handleChecking($event)"
        [(checkedKeys)]="checkedKeys"
        checkBy="guid"
   </kendo-treeview>
</ng-template>