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.

Filter by
Sorted by
Tagged with
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)&...
Paul Hartmann's user avatar
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. ...
Daniel's user avatar
  • 293
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 ...
Sunil Kovalluri's user avatar
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 ...
The Coyoyote's user avatar
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" (...
Shawn's user avatar
  • 1,451
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 ...
vandat2311's user avatar
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 [...
sam's user avatar
  • 1
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 ...
CodeMan03's user avatar
  • 408
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 ...
Mahdi Zarei's user avatar
  • 6,047
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:...
Md Anwar's user avatar
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> <...
Shawn's user avatar
  • 1,451
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 ...
Omar Hisham's user avatar
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 ...
Ian Wang's user avatar
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 ...
Odilbek Utamuratov's user avatar
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 ...
Newbie's user avatar
  • 1,624
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" ...
LeoJiang1997's user avatar
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 ...
Redhewlett's user avatar
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 ...
cezarlamann's user avatar
  • 1,465
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-...
Aleh Serhiyenia's user avatar
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 ...
Finn's user avatar
  • 1,343
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 ...
hawk's user avatar
  • 1
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 ...
core114's user avatar
  • 5,205
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]="...
Frida's user avatar
  • 1
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 ...
core114's user avatar
  • 5,205
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 ...
user3384985's user avatar
  • 2,987
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. ...
Yehan Kapurubandara's user avatar
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:...
Rajesh Kumar's user avatar
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=&...
core114's user avatar
  • 5,205
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 ...
Dickens A S's user avatar
  • 3,884
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-...
terry's user avatar
  • 11
-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
syntaxerror1874's user avatar
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. "...
Muhammad Tayyab Asghar's user avatar
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-...
marlonsc's user avatar
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.
Daniel's user avatar
  • 21
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 ...
Foody's user avatar
  • 177
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" ...
leoagostinho's user avatar
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] ...
SSSH's user avatar
  • 111
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, ...
terry's user avatar
  • 11
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 '...
TimothyBrake's user avatar
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 ...
DawnBlaze's user avatar
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 ...
core114's user avatar
  • 5,205
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 ...
Vova's user avatar
  • 39
-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'. ...
ludovicoilgrande's user avatar
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 ...
ludovicoilgrande's user avatar
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: ...
ludovicoilgrande's user avatar
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 ...
Newbie's user avatar
  • 1,624
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 ...
Roman's user avatar
  • 21
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 ...
Saif's user avatar
  • 1
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&...
Tony Brasunas's user avatar
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 ...
杨亦昕's user avatar

1
2 3 4 5 6