Questions tagged [ng-zorro-antd]
Following the Ant Design specification, we developed a Angular UI library ng-zorro-antd that contains a set of high quality components and demos for building rich, interactive user interfaces.
258
questions
0
votes
0
answers
16
views
Angular nz-dropdown-menu dynamic parameters
I would like to have a dynamic parameter based on a dropdown list:
So this is my code:
<input
#file
type="file"
(change)="functionTest($event.target)&...
0
votes
1
answer
69
views
NG-ZORRO Tree component with dropdowns instead of checkboxes?
I'm trying to create a tree using a tree component from ng-zorro but instead of checkboxes for the leaves I want to have dropdowns. I tried using the ng-template but the checkbox is still rendered. ...
2
votes
1
answer
215
views
Ng-Zorro-antd failing to compile after adding "ng add ng-zorro-antd"
After adding ng-zorro-antd, project is not compiling and giving errors.
ng new PROJECT_NAME
cd PROJECT_NAME
ng add ng-zorro-antd
My configurations are:
Angular CLI: 16.2.6 Node: 18.18.2 Package ...
0
votes
1
answer
35
views
Ng-zorro popover closes when it's showed on hover and then hover the dropdown menu of a select component
Reproduction link
https://stackblitz.com/edit/angular-tru7hd-xqtrkw?file=src%2Fapp%2Fapp.component.ts,src%2Findex.html
Steps to reproduce
Hover the button
Click on the select
List item
List item
...
0
votes
1
answer
68
views
how to get prefix values in angular input field
I tried to add prefix on input field its perfectly ok but after submit form that value is not attached with input field value.
<form
nz-form
[formGroup]="invoiceForm"
(...
0
votes
0
answers
35
views
nz-virtual-scroll not display the tfoot when used?
I am trying to display the tfoot when using Virtual Scroll in nz-table, but when the interface is displayed, the tfoot completely disappears. I have used [nzFooter], but the tfoot is not in the same ...
0
votes
0
answers
36
views
Disabling Certain paths for Breadcrumbs of NgZorro
How can I change dynamically generated breadcrumbs? I have a breadcrumb lets say Settings/User/Profile but want to disable User from rediecting to a no-content page,which is generated using [...
3
votes
1
answer
251
views
NG-Zorro Datepicker Manual Input Mask not working
I need to mask the datepicker as MM/dd/yyyy and my users do not want to manually type out the /character. They want to be able to enter in just the numbers and the masking works on its own.
I have ...
0
votes
1
answer
39
views
Inherit another UI library selector properties in a component attribute selector
I have a buildable/publishable Angular library which I want to wrap ng-zorro button (and other components as well one-by-one) within to add my attribute selector instead of the ng-zorro selector and ...
0
votes
0
answers
38
views
ng zorro icon color changed problem after following official documentation
I'm using ng zorro with angular. and i want to change the icon color of ng zorro, i followed official documentation but icon can be color with span tag only but i'm not using span tag. here is my code:...
0
votes
1
answer
91
views
nz-switch is not working correctly due to update with value
<form [formGroup]="businessFoodHygieneForm">
<div class="box p-4 d-flex jc-between ai-center">
<span>
Food Hygiene Link
</span>
<...
0
votes
1
answer
24
views
Duplicate identifier 'ResizeObserverCallback'
I got this errors when I use some Antd libraries such as table component, I have a Resize-observer file that I did by myself and its conflicting with this files, are there any ways to exclude the ...
0
votes
0
answers
93
views
using single-spa-angular when i build the project my less transfer to js not css
i have angular project is child app using with single-spa-angular
using UI library ng zorro
and when i build the project with custom webpack my less will transfer js
but i need transfer to css
the ...
0
votes
1
answer
136
views
Disable auto focus in Ng Zorro(Angular) drawer
I would like to disable auto focus first input in Ng Zorro drawer. I know that Ng Zorro modal has a property for disabling the auto focus. But Drawer does not.
I have a very bad solution: I have put a ...
0
votes
0
answers
91
views
NG Zorro Grid component explicitly set nzSpan to auto
In NG Zorro, I would like to set the raster number of span to specific value when the screen size is smaller than 768px, if it is greater than 768px, I would like to set the width to auto, this is ...
0
votes
0
answers
39
views
How to make the first level pop-up window full screen, click a button, can display the second level pop-up window
<nz-modal>
<div id="ath-modal-id">
<div class="full-screen-icon">
<svg
class="iconfont icon"
aria-hidden="true"
...
2
votes
1
answer
233
views
can i use NG-zorro and angular material at the same time without conflicts
I am trying to use both the ng-zorro and standalone components libraries in my project simultaneously. However, when I run the command "ng add ng-zorro", it overrides all my CSS, which is ...
0
votes
0
answers
145
views
Storybook Angular - Error: cssText is undefined when loading component with LESS style
I'm getting the error above in a project that I have set up in the following manner:
Angular 16 (ng new myApp --style less --strict)
Added NG-Zorro (ng add ng-zorro-antd)
Added Storybook (npx ...
0
votes
0
answers
303
views
Using nz-select in forms and an object as a resource for nzOptions in Angular 15
I am using angular 15 and creating a form where I am using the following code
<nz-form-item nz-col nzSpan="12">
<nz-form-label [nzRequired]="true">Employee</nz-...
0
votes
1
answer
533
views
How to use ng zorro Upload model with formGroup
In the ng zorro Upload model, a required parameter is nzAction. It seems that he will upload the file directly to the server, but I hope to store the file in fromGroup (or FromArray) first, and ...
0
votes
0
answers
28
views
How can I prevent the NgZorro TreeSelect component from automatically sorting values in the tree select control?
When I choose an option from the tree select, the values in the input field automatically get sorted in alphabetical order. How can I disable this behavior in the NgZorro TreeSelect component?
I have ...
0
votes
0
answers
268
views
An Angular ng-zorro table should add specific columns to overflow-x: scroll
I have tried to make the Angular ng-zorro table's only columns 1 (Assignment Number) to 4 (Total) should be a fixed and adding scroll-x and the table header color red from columns 5 to 18 (let ...
0
votes
0
answers
126
views
nz-table [nzFooter] not updating on tableData changes
Im trying to display number of displayed rows in my nz-table footer:
<nz-table
#filterTable
[nzData]="tableData"
nzShowPagination="false"
[nzPageSize]="...
0
votes
0
answers
241
views
Angular TypeScript NG Zorro radio button event
Angular ng-zorro TypeScript initially disables two input fields and after clicking the first radio button, activates the first input field and disables the second input field, so once it same click ...
0
votes
0
answers
374
views
ng.ant.design - How to pass additional parameter to [nzExtra] within [nzCard]
I am using [nzExtra] to set additional action on my card.
<nz-card [nzExtra]="choiceaction" [nzHoverable]="true" *ngFor="let choice of choices; let i = index">
I ...
0
votes
2
answers
578
views
Change Dark Theme colors in NG-Zorro (Ant design for angular)
Navbar to be changed
I have been trying to change the color of this navbar using Tailwind (I use it instead of CSS). I did research and found that editing the theme.less allows changes to the theme. ...
0
votes
1
answer
43
views
Object alterable value not initiating initialValues={values} form.item antd form in react js
I've included a sample of code showing how I initiate the value in the form; were you able to spot any errors? I'm not sure why it's not initiating the value.
formValues = {
dummy:{
key:...
1
vote
3
answers
486
views
Angular NG Zorro thousand separators
I'm using NG ZORRO for my Angular Typescript web application. Does anyone know how to add number field to thousand separators, here is my code
<nz-form-item>
<nz-form-control nzErrorTip=&...
0
votes
1
answer
262
views
how to close NzNotificationService notification popup
I am using NG-ZORRO Notification
I have an angular code
this.notif = this.notification.create(
'success',
'Notification',
'test message'
);
I could not find any api like .close()
But the ...
0
votes
1
answer
409
views
How to change backgroud color of nz-range-picker?
New to web development, and new to using ng-zorro.
In my project, I'm using nz-range-picker of ng-zorro. I want to change the default color to my customed color.
HTML sample code:
<nz-range-...
-1
votes
1
answer
225
views
How can I create input element that takes multiple strings with NG-Zorro?
I would like to create NG-ZORRO input element that takes multiple string and create array object of it in JSON format
Thank you!
I tried to create NG-ZORRO. Component
0
votes
0
answers
282
views
Dynamically load Zg-Zorro icons in angular app with Content-Security-Policy enabled
I have enabled CSP in my "@angular/core": "^15.1.0" project and using Ng-Zorro "ng-zorro-antd": "^15.0.2" and have enabled Dynamic loading of the icons.
"...
0
votes
0
answers
334
views
Error: NG0204: Can't resolve all parameters for NzModalRef: (?, ?, ?)
I'm doing an angular project using the NZ-Zorro library and I'm having a hard time finding what are these parameters that aren't being solved from NzModalRef, when I try to run the test --code-...
0
votes
0
answers
20
views
Angular ng-zorror examples with conditional and paging queries
Are there Angular ng-zorror examples of conditional and paging queries?Please give me one.Thanks.
0
votes
2
answers
957
views
How to prevent nz-select from expanding width inside ng-zorro table?
I use nz-select inside the ng-zorro table. Initially, I set the 25% as the width for all column in the table. However, when I select the color, as the name of the color is too long, it expands the ...
0
votes
1
answer
413
views
How to implement nz-switch with NzPopConfirm
I'm trying to implement a nz-switch with NzPopConfirm, but it is not working. An practicle example would help a lot!
`
<nz-form-item>
<nz-switch formControlName="aso"
...
2
votes
1
answer
375
views
How to use NzMessageService in HttpInterceptor
When I use NzMessageService in HttpInterceptor in angular I get the following error:
login.component.ts:116 NullInjectorError: R3InjectorError(Y)[InjectionToken HTTP_INTERCEPTORS -> [object Object] ...
0
votes
1
answer
990
views
The customized nz-modal css still has an effect even the related component is destroyed
I am using nz-modal of ng-zorro in different components, every component will render a customized CSS effect(eg. different height, background, and color...), After switching to another component, ...
0
votes
1
answer
323
views
ng-zorro-mobile support for Angular 14 & Angular 15?
the latest version ng-zorro-mobile 6.0.0 does not work with Angular 14 & 15 because of:
./node_modules/ng-zorro-antd-mobile/fesm2020/ng-zorro-antd-mobile.mjs:4451:13-27 - Error: export '...
0
votes
1
answer
856
views
ng-zorro Error: Module not found when trying to run project
I'm using ng-zorro v14.1.1 for my angular 14.2.7. But when I try to run my angular application, I got errors when building the project looking for modules from ng-zorro and identifying it as not found ...
0
votes
1
answer
235
views
Angular Ng Xorro table col background change
I'm using my angular project for the antd NG-ZORRO Table, so dose any know know how to add table special col for the background color?
Image explain here
here is my code
html
<nz-table #basicTable ...
1
vote
1
answer
625
views
Nz TreeSelect. How to display parent node name in children?
I have tree select with options. When i click on Name, it displays Name, but I want it to be Item > Name, because this is children node. What should I do ? I found [nzDisplayWith], but it doesn't ...
-1
votes
1
answer
752
views
How to enable specific sorting on ng zorro table?
i have a Ng Zorro table with Angular and i have setup server sorting. Is there a way to disable null sorting on the table UI?
I wuold like to only sort the table 'descending' and 'ascending'. ...
1
vote
1
answer
991
views
ng zorro table column is not fixed even if there is nzLeft
I am using Angular to build a project. Inside a component i have a table with some data.
This table comes from ng-zorro table module.
My problem is that even after setting a table column or head with ...
0
votes
1
answer
653
views
How can i get the viewport height of my modal in angular?
i would like to know if there is a possibility to get the viewport height of my ng boostrap modal in my Angular app.
Here is what i have:
A modal with a css styling like this:
.modal-xxl {
width: ...
2
votes
1
answer
1k
views
How to access the nested element of a ElementRef.nativeElement in angular
I am using NG-ZORRO library and would like to customize it's DatePicker.
For example, I would like to highlight some of the days with different color like screenshot below, and the days that I would ...
0
votes
4
answers
3k
views
How can I add ng-zorro-antd?
I'm trying to create an ng-zorro project using Angular.
I have tried these commands:
npm install --location=global @angular/cli
ng new ng-zorro-demo
I have created an Angular project with routing.
cd ...
0
votes
1
answer
498
views
Select menu options don't stick to parent element when scrolling through an inner element
When scrolling through an inner element the select options menu does not scroll along with the page instead, it sticks in the same position
Basic HTML Layout
When Scrolling the inner div element
Here ...
0
votes
1
answer
5k
views
Ant - Can't bind to 'ngModel' since it isn't a known property of 'nz-switch'
I'm using Ant Design for Angular (ng-zorro-antd), and using the simple switch module to display a switch.
When I add the code per the docs:
<nz-switch [ngModel]="true"></nz-switch&...
3
votes
0
answers
505
views
nz-select dropdown doesn't connect itself in nz-modal
When using nz-select in a nz-modal that content is scrollable, you see the dropdown is not connected to itself after page scroll.
expect display
error dispaly
Here is an example to reproduce the ...