ng-template

来源： https://stackoverflow.com/questions/56591546/ngx-datatable-custom-columns-with-action-buttons

问题 In below sample, I have used ng-template like below and it is working fine. Sample link: click here <ng-template #template let-dataSource=""> <span *ngIf="dataSource.iconCss" class="e-menu-icon {{dataSource.iconCss}}"></span> {{dataSource.header}} {{dataSource.text}} <span *ngIf="dataSource.templateHeader" class="e-login-content"> <button ejs-button cssClass="e-info">Sign In</button> </span> </ng-template> But I want to create a new file for ng-template content and I want to use it in another

问题 In below sample, I have used ng-template like below and it is working fine. Sample link: click here <ng-template #template let-dataSource=""> <span *ngIf="dataSource.iconCss" class="e-menu-icon {{dataSource.iconCss}}"></span> {{dataSource.header}} {{dataSource.text}} <span *ngIf="dataSource.templateHeader" class="e-login-content"> <button ejs-button cssClass="e-info">Sign In</button> </span> </ng-template> But I want to create a new file for ng-template content and I want to use it in another

问题 I am using a meta-data object to dynamically create a very large form (~400 inputs, though a small sample is shown in stackblitz example). I need to use the meta-data structure to carry input-specific information to the inputs (i.e. type of input, select options, step size, etc). When my html ng-template gets called recursively inside of a and subsequently , the parent form is not recognized. When I get past the initial recursion level, the ReactiveForm cannot trace to the desired formGroup.

问题 I have created a structural directive that displays a tooltip based on what is inside an ng-template, when I hover over the text "see tooltip" the tooltip is displayed correctly, but it is displayed in the top: 0px left: 0px position of the screen, I want it to be displayed just above the text "see tooltip", I have achieved the dimensions of the elementRef with the method "getBoundingClientRect()" but I do not know how to apply them in the tooltip. Any idea? tooltip.directive.ts import {

问题 I have an issue when trying to use ng-template with Kendo Grid in Angular. The html I have is valid and compiles and functions properly when launched, but then Visual Studio Code shows this error: The template context does not define a member called column Here is my code: <kendo-grid-column field="countryID" title="{{ 'location.country' | translate }}" width="10"> <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column" let-formGroup="formGroup"> <app-dropdown-single

问题 I have an issue when trying to use ng-template with Kendo Grid in Angular. The html I have is valid and compiles and functions properly when launched, but then Visual Studio Code shows this error: The template context does not define a member called column Here is my code: <kendo-grid-column field="countryID" title="{{ 'location.country' | translate }}" width="10"> <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column" let-formGroup="formGroup"> <app-dropdown-single

问题 I am building an angular web app and am trying to incorporate ngCart. I installed it using bower install ngcart --save , incorporated the bower file in my index.html file and injected it as a dependency into the app. When I try to use the <ngcart-addtocart> directive (only incorporating the ngcart-addtocart tag in the view file) I get the following error - Error: [$compile:tpload] Failed to load template: template/ngCart/addtocart.html (HTTP status: 404 Not Found) I suspect it is something

问题 I am looking for a way to repeat the same markup on multiple spots in my component. I know I could just use a new component but im looking for something a little less serious. The html <nav class="pages"> <ul class="inline"> <li *ngFor="let p of pages; let i = index;" [ngClass]="{'active': page.current_page == i+1}" (click)="onPageChange(i+1, $event)" >{{i+1}}</li> </ul> </nav> Is there a way to use ng-template to repeat this same mark up in multiple places within the same component...

问题 I'm trying to build a simple tabs-menu in my Angular app. parant.component.html: <div> <button (click)="selectTab(1)">Tab1</button> <button (click)="selectTab(2)">Tab2</button> <ng-container *ngTemplateOutlet="(selected == 1) ? template1 : template2"> </ng-container> <ng-template #template1>I'm page 1</ng-template> <ng-template #template2>I'm page 2</ng-template> </div> parant.component.ts: public selected = 1; public selectTab(tabName) { this.selected = tabName; } This is working fine, as