I am using swimlane/ngx-datatable component and I developed a wrapper for ngx-datatable.
Wrapper:
<div class="wrapper">
<ngx-datatable [rows]="rows">
<ng-content></ng-content>
</ngx-datatable>
</div>
Use:
<app-wrapper>
<ngx-datatable-column name="Name">
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
<span>{{ value }}</span>
</ng-template>
</ngx-datatable-column>
</app-wrapper>
This does not work, custom html that I wrote inside app-wrapper is not passed to the component. How would someone go through this if the component already uses ng-template?
This is not directly related to ngx-datatable. Angular doesn't currently support content projection with ng-content more that 2 levels of components deep. No, using ng-content inside ngx-datatable inside app-wrapper will not work.
Related
I'm trying to build a dynamic component, I need to create an ng-content for each language :
<div *ngFor="let locale of locales" [hidden]="selected!=locale.code" class="filed-content">
<ng-content #select="{{'[locale-'+locale.code+']'}}"></ng-content>
</div>
But they are created within a div:
Stackblitz
I am new to angular and ngx-datatable and before asking this questions on SO. I've already gone through the answers with same problem which I'm facing related to adding custom buttons in each row in ngx-datatable of angular.
My HTML template looks like this:
<ngx-datatable [rows]="rows" [loadingIndicator]="loadingIndicator" class="bootstrap"
[selected]="selected" (activate)="onActivate($event, NewEventContent)">
<ngx-datatable-column *ngFor="let column of columns; let i = index;"
name="{{column.name}}" prop="{{column.prop}}">
<ngx-datatable-column name="Actions" prop="skuCode"></ngx-datatable-column>
<ng-template let-value="value" let-row="row" let-rowIndex="rowIndex"
*ngIf="column.name==='Actions'" ngx-datatable-cell-template>
<button type="button" class="btn btn-outline-success">Success {{rowIndex}}</button>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
My .ts file look like this
columns = [{name: 'Actions', prop: 'Id' }...];
I have no idea what I'm doing wrong it this and I've seen a similar type of approach in other answers of similar type of question but none of them worked for me.
Kindly help.
I've found an alternative way to solve this problem and successfully implemented custom button in each row. So I thought to answer the question so that it could be helpful for anyone.
After the change, my HTML template look like this.
<ngx-datatable [rows]="rows" class="material" [loadingIndicator]="loadingIndicator"
[columnMode]="'force'"
[selected]="selected" (activate)="onActivate($event, NewEventContent)"
[headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [columns]="columns">
<ngx-datatable-column *ngFor="let column of columns;
let i = index;" name="{{column.name}}"
prop="{{column.prop}}">
</ngx-datatable-column>
<ngx-datatable-column name="Actions" sortable="false" prop="Id">
<ng-template let-row="row" let-value="value" let-rowIndex="rowIndex"
ngx-datatable-cell-template>
<button class="btn btn-dark" (click)="onSelect(row)">
Edit{{rowIndex + 1}}
</button>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
kindly pay attention to the ng-template part and onSelect(row) function. The above solution works very well in my case.
Original answer
https://github.com/swimlane/ngx-datatable/issues/489#issuecomment-356765048
I'm trying to clone the ng-content items of a component along with any functionality added on the HTML of that content. For example, the markup using the component might look like this:
<custom-component>
<button (click)="doAThing();">A button</button>
</custom-component>
Then I set up my template for custom-component like so:
<ng-template #content>
<ng-conent></ng-content>
</ng-template>
<ng-template *ngTemplateOutlet="content"></ng-template>
<div class="second-area>
<ng-template *ngTemplateOutlet="content"></ng-template>
</div>
My expectation would be that the ng-content would get duplicated into both ngTemplateOutlet areas. What happens is that it pushes to the last outlet and ignores the first. This markup will duplicate normal markup just fine, but ng-content only move to one outlet.
Is this not possible with this technique, am I missing something obvious, or it there another way to clone the contents of ng-content along with any events attached to it?
I found this solution that worked for me. First the HTML, you'll need a directive to wrap the content in so you can reference it. You'll need to use asterisk with directive so it can be duplicated.
<custom-component>
<ng-container *customDirective>
<button (click)="doAThing();">A button</button>
</ng-container>
</custom-component>
The directive doesn't require any extra code. We just need it for a reference.
In your custom-component, you'll need to create a reference to the diretive via #ContentChild like so:
#ContentChild(CustomDirective, { read: TemplateRef }) transcludeTemplate;
Then we use the following for our custom-component HTML avoiding using ng-content tags all together:
<ng-template *ngTemplateOutlet="transcludeTemplate"></ng-template>
<div class="second-area>
<ng-template *ngTemplateOutlet="transcludeTemplate"></ng-template>
</div>
So this isn't really the same as duplicating <ng-content>, but it gives us a similar function. Apparently ng-content not multiplying is intended behavior. So this might be the best way to achieve a similar goal.
I have this html code
<empty-list [hidden]="!emptylist" text="There is currently No User"</empty-list>
<div *ngFor="let userObser of userObservables">
<ion-item #emptylist *ngIf="userObser | async as user">
<h2>{{user.displayName}}</h2>
<h3>{{user.email}}</h3>
</ion-item>
</div>
I want to show the empty list if there is no user & hide it if there is at least one.
I know I can do it using a subscribe method,but I want to use async pipe also I need to unsubscribe each time I use a subscribe which is really not efficient.
My question is there a way I could create a local variable inside the ion-item the ntest test if it exists outside & therefore use it in the hidden input ? It's just a suggestion I can't really seem to make it work.
You can use a simple else inside the ngIf to display another template if the condition doesn't match:
<ng-container *ngIf="userObservables.length > 0; else emptyList">
<ng-container *ngFor="let user of userObservables">
<ion-item *ngIf="user | async as user">…</ion-item>
</ng-container>
</ng-container>
<ng-template #emptyList>
<empty-list>…</empty-list>
</ng-template>
Note that I also replaced your seemingly unnecessary div with a ng-container to avoid unnecessary DOM nodes.
As a side note to your own suggestion: template references cannot be accessed from outside the template boundary. Structural directives like *ngIf and *ngFor create their own template, so this becomes a boundary. That's why
<h2>{{ ref.innerText }}</h2>
<ng-container>
<span #ref>Hello, World</span>
</ng-container>
will work, but
<h2>{{ ref.innerText }}</h2>
<ng-container *ngIf="true">
<span #ref>Hello, World</span>
</ng-container>
won't work.
I'm using the td-data-table from the teradata/covalent framework but independet from the framework I'd like to use *ngFor in an like this:
<ng-template *ngFor="let column of columns" tdDataTableTemplate="{{column.name}}" let-value="value">
<div>
<span>{{value.content}}</span>
<br>
<span *ngIf="enabler">{{value.subContent}}</span>
</div>
</ng-template>
I've read that the syntax for using *ngFor with an is different, so I've tried this:
<ng-template ngFor let-column [ngForOf]="columns" tdDataTableTemplate="{{column.name}}" let-value="value">
<div>
<span>{{value.content}}</span>
<br>
<span *ngIf="enabler">{{value.subContent}}</span>
</div>
</ng-template>
Is it the framework which is preventing the code to work or have I written something wrong?