angular-directive

I have a table in which I want to display a table row, which is a component. And also I want to pass data to that component: <table> <th> <td>col 1</td> <td>col 2</td> <td>col 3</td> </th> <tr> <my-component [data1]="data1" [data2]="data2"></my-component> </tr> <tr *ngFor="let item of list"> {{item}} </tr> </table> In my-component , the HTML is a few <td></td> with data rendered from data1 and data2 . But after rendering it, because of <my-component></my-component> my CSS is breaking resulting in all my-component HTML (whole table row) displaying in 1st column. Result of above: <table> <th>

I know that in ng2 we have ComponentFactoryResolver that can resolve factories that we can apply to a ViewContainerRef . But, is there something similar for directives? a way to instantiate them and apply them to the projected content from a component? No, directives can't be added or removed dynamically. They are only applied to HTML statically added to component templates. What you could do is to enable/disable the directive by passing a parameter ( @Input() ) to the directive to notify it to do something or not. 来源： https://stackoverflow.com/questions/39563547/how-to-instantiate-and-apply

I have the following code: angular .module('myApp') .directive('layout', function () { return { restrict: 'E', template: '<div ng-include="layoutCtrl.pageLayout"></div>', controller: 'LayoutController', controllerAs: 'layoutCtrl', bindToController: true, scope: { pageLayout: '=', pageConfiguration: '=', isPreview: '=' } }; }); angular .module('myApp') .controller('LayoutController', LayoutController); function LayoutController($scope, LayoutDTO, LayoutPreviewDTO) { var self = this; self.layoutDTO = LayoutDTO; self.layoutPreviewDTO = LayoutPreviewDTO; var test = $scope; if(self.isPreview) self