Is there a way on how to use the same code for the confirmation message but the message is different? I just want to reuse the existing code and change only the message instead of creating another function. Is it possible?
<p-dialog [(visible)]="openDialogBox1" [style]="{ width: '50vw' }" modal="true" [closable]="false">
<ng-template pTemplate="header">
<h3>Confirm ABC?</h3>
</ng-template>
<p>Are you sure you want to tag as ABC?</p>
</p-dialog>
<p-dialog [(visible)]="openDialogBox2" [style]="{ width: '50vw' }" modal="true" [closable]="false">
<ng-template pTemplate="header">
<h3>Confirm include the company?</h3>
</ng-template>
<p>Are you sure you want to inlcude the company? This will include the sub unit.</p>
</p-dialog>
Make the Dialogbox as Reusable component.
<p-dialog [(visible)]="openDialogBox" [style]="{ width: '50vw' }"
modal="true" [closable]="false">
<ng-template pTemplate="header">
<h3>{{ messageHeader }}</h3>
</ng-template>
<p>{{ messageBody }}</p>
</p-dialog>
Add the following variables in your ts file of the corresponding component.
#Input() messageHeader!: string;
#Input() messageBody!: string;
Use the component as below where ever you need.
<app-component-name [messageHeader] = "content" [messageBody] = "content"></app-component-name>
Related
Is it possible to somehow put the condition for changing the icon in one line?
Example #1
<ng-template [ngIf]="isMenuCollapsed" [ngIfThen]="open" [ngIfElse]="close">
</ng-template>
<ng-template #open>
<fa-icon [icon]='["fas", "bars"]'></fa-icon>
</ng-template>
<ng-template #close>
<fa-icon [icon]='["fas", "times"]'></fa-icon>
</ng-template>
Example #2
<fa-icon [icon]='["fas", "bars"]' *ngIf="isMenuCollapsed"></fa-icon>
<fa-icon [icon]='["fas", "times"]' *ngIf="!isMenuCollapsed"></fa-icon>
Yes, with method for example:
<fa-icon [icon]='getIcon()'></fa-icon>
In TS something like:
getIcon = () => isMenuCollapsed ? ["fas", "bars"] : ["fas", "times"];
I want to create a custom Date Picker component with Vue version 2 and VeeValidate. I am using vuetify and v-menu component from there: https://vuetifyjs.com/en/components/menus/ . The problem is that ValidationProvider which is responsible for validating fields accepts only one v-model inside of it and I have two: one for triggering v-menu and second for gathering value to v-text-field from v-date-picker. When I remove this v-model from v-menu validation works but I cannot close menu after I choose some values in date-picker.
<ValidationProvider v-slot="{ validate, errors }">
<label>...</label>
<v-menu v-model="menu">
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-bind="attrs"
:value="formatDate"
readonly
v-on="on"
#input="$emit('input', $event) || validate($event)"
/>
</template>
<v-date-picker
:value="value"
no-title
#input="$emit('input', $event) || validate($event)"
#change="menu = false"
/>
</v-menu>
<span
v-if="errors.length > 0"
>{{ errors[0] }}</span>
</ValidationProvider>
bindings={
“ng-reflect-ng-if”: “false”
}
<ng-template class=“no-result-product” [ngIf]=“products” [ngIfElse]=“noproducts”>
<div class=“list-product” fxLayout=“row wrap” fxLayoutAlign=“center stretch” *ngIf=“products”>
<app-template-product *ngFor=“let product of products”
class=“list-product__item”
[product]=“product”>
</app-template-product>
</div>
</ng-template>
<ng-template #noproducts>
<div> <img src=“./assets/img/shop/not-found-product.svg” alt=“”>
<div >{{ ‘not.found.product.message’ | translate }}</div>
</div>
</ng-template>
{{ ‘not.found.product.message’ | translate }}
the content is not displayed !!
here you are using ngIf directive, and passing your 2nd template inside of ngIfElse property
<ng-template class=“no-result-product” [ngIf]=“products” [ngIfElse]=“noproducts”>
that means that your "else template" will appear if products value is falsy.
I'm a intern, and I need some help.
I've a ngx-datatable, and I want to display row when condition are met. How can I do it? For example, if country covered is America, I display, if not, I didn't.
<ngx-datatable class="table-zenmoov" [columnMode]="'force'" [rows]="rows" [rowHeight]="'auto'"
[headerHeight]="'auto'" [footerHeight]="'auto'" [externalPaging]="true" [count]="paginationInfo.totalElements"
[loadingIndicator]="loadingIndicator"
[offset]="paginationInfo.currentPage" [limit]="paginationInfo.pageSize" (page)="setTablePage($event)"
(sort)="onSort($event)">
<ngx-datatable-column name="Name" [prop]="'first_name'" [sortable]="true">
<ng-template let-row="row" ngx-datatable-cell-template>
<div class="user-wrap">
<div class="zenmoov-vendor" [style.background]="row.company_id?'#f0ad4e':'#5bc0de'"></div>
<div class="img-circle img-wrapper vendor-avatar">
<img *ngIf="row.avatar_url" [src]="row?.avatar_url " alt="logo">
</div>
<ng-container *ngIf="auth.userRID=='admin'">
<a [routerLink]="['../../vendor/',row._id]">{{ row?.first_name }} {{ row?.last_name }}</a>
</ng-container>
<ng-container *ngIf="auth.userRID=='hr'">
<a [routerLink]="['../../../vendor/',row._id]">{{ row?.first_name }} {{ row?.last_name }}</a>
</ng-container>
<ng-container *ngIf="auth.userRID=='talent'">
<a [routerLink]="['/talent/vendor/',row._id]">{{ row?.first_name }} {{ row?.last_name }}</a>
</ng-container>
</div>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Company" [sortable]="false">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.company_name }}
</ng-template>
</ngx-datatable-column>
</ngx-datable class>
You can use *ngIf on html element and it will be displayed only if the conditions are met.
I have never used ngx-datatable however, from a quick look into the documentation and your code I think I got it. I suppose that this bit [rows]="rows" is where you feed your data to the datatable, what you need to do is filter out the objects you don't want to be in the datatable, something like this in your TypeScript file:
TypeScript File
// Array of strings that contains all countries in America
const americaCountries = [...];
// Iterate over each row and verify if the country of that row is in the array americaCountries
// If it is, that row is added to a new array named americaRows
this.americaRows = this.rows.filter(row => americaCountries.includes(row.country));
HTML File
[rows]="americaRows"
Bear in mind that this is pseudo code because I don't know your TypeScript code and the rows object structure.
Not able to display the ngx datatable default footer properly.
Its showing the footer like this
My code
<ngx-datatable
#table
[columnMode]="'force'"
[headerHeight]="50"
[rowHeight]="'auto'"
[footerHeight]="50"
[count]="true"
[limit]="4"
[rows]="data"
>
<ngx-datatable-column [width]=10>
<ng-template let-row="row" ngx-datatable-cell-template>
<span class="circle" [ngClass]="{'red': row.alertCat == 'HIGH','yellow': row.alertCat == 'MEDIUM', 'green': row.alertCat == 'LOW'}"></span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="ID" [width]=10>
<ng-template let-column="column" ngx-datatable-header-template>
<strong class="text-uppercase alertHeading">ID</strong>
</ng-template>
<ng-template let-row="row">
{{row.id}}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
use node_modules/#swimlane/ngx-datatable/release/assets/icons.css in your main .scss file:
"styles": [
// ...
"node_modules/#swimlane/ngx-datatable/release/assets/icons.css"
],
If I am not wrong, your footer classes are being overridden by other classes. Inspect them and you will know or provide your icons like from font-awesome.
For ex
.datatable-icon-left {
content: #fa-var-chevron-left;
}