1

I am trying to dynamically create an element in angular that has a directive. the directive in question is nbButton and applies certain classes to the element. the button is rendered at runtime by dataTable, but unfortunately the classes are not applied and I am not finding a way to force the element to be updated.

datatable configurations are as follows:

const conf: any = {
      paging: true,
      ...
      buttons: [
        {
            text: 'filter',
            action:() => {
                sidebarService.toggle();
            },
            attr:  {
              nbButton: '',
            }
        },
        ...
      ]
  }

this.categoryTable.DataTable(conf);

the attribute is inserted correctly into the element, but the directive is not executed not even by running change ChangeDetectorRef.detectChanges() or similar.

enter image description here

in the example above, "foo" is a button built outside of dataTable with directive, "Filtra e cerca" is a datatable's button to which I manually added the first classes, "Aggiungi nuovo" and "Azioni" are elements with the directive applied but without classes

some idea?

gaspx
  • 36
  • 4
  • Does this answer your question? [How to instantiate and apply directives programmatically?](https://stackoverflow.com/questions/39563547/how-to-instantiate-and-apply-directives-programmatically) – TotallyNewb Aug 12 '21 at 18:23
  • As per above link, directives can't be applied outside of html templates. You can dynamically create components using factory, but for directives that's not possible. – TotallyNewb Aug 12 '21 at 18:25
  • @HostBinding? https://angular.io/api/core/HostBinding – Eliseo Aug 12 '21 at 18:36

0 Answers0