Angular & NG-Zorro, Step Step Select Component

Hello, today I will create a project using Angular and Ng-Zorro. And after creating, we will try the Select component. We will proceed by starting from the basic select component and finally creating the select component with the object and looking at it.

---

Firstly, we will create an Angular project with CLI;

ng new angular-zorro-project

You can define your own decision on the command line for the project. After installation, open the project folder in the command line and paste this code and again you can define your own decision on the command line for the ng zorro. I chose a blank project for en.

ng add ng-zorro-antd

Everything is okay. Open the project with your IDE and start with ng serve.

---

We can start creating components in the app folder. You can create angular features like this (Web Storm);

Firstly, I want to show the select component using ng-zorro select. You can visit this page. I created select-component

Open app.component.htmlfile, and delete everything. And write created component names like;

<app-select-component></app-select-component>

First, let’s start with “single select” as a basic and simple example, we will create a string list and use it. In the component file;

singleSelectModel: string = '';
singleSelect: string[] = ['Select 1', 'Select 2', 'Select 3', 'Select 4'];

In HTML file;

<div class="wrapper">  
	<nz-select [ngModel]="singleSelectModel" nzPlaceHolder="Selectone">    
		<nz-option *ngFor="let item of singleSelect"  [nzValue]="item" 					[nzLabel]="item"></nz-option>
	</nz-select>
</div>

Now that we’ve done our basic example, let’s “multi-select” and try to show the selected ones as well.

multiSelectModel: string[] = [];  
multiSelect: string[] = ['Select 1', 'Select 2', 'Select 3', 'Select 4', 'Select 5', 'Select 6', 'Select 7', 'test', 'book'];

For multi-select, our model should be an array.

<nz-select    
[(ngModel)]="multiSelectModel"    
nzPlaceHolder="Select"    
[nzMaxTagCount]="4"    
[nzMaxTagPlaceholder]="tagPlaceHolder"    
nzMode="multiple">   
	<nz-option *ngFor="let item of multiSelect" [nzValue]="item" 	[nzLabel]="item">
	</nz-option>
</nz-select><ng-template #tagPlaceHolder let-selectedList>and {{ selectedList.length }} ...</ng-template>

When we use multi-select, used nzMaxTagPlaceholder property, because we can select lots of items, and don’t want to show this. At this point, we can use it.

When we select, we can search inside of items.

And I want to show other properties if you want to show all of the selected items;

multiSelectModelShowAll: string[] = [];  
multiSelectShowAll: string[] = ['Select 1', 'Select 2', 'Select 3', 'Select 4', 'Select 5', 'Select 6', 'Select 7', 'Select 8', 'Select 9', 'test', 'book'];

<nz-select    
[(ngModel)]="multiSelectModelShowAll"    
nzPlaceHolder="Select"    
nzMode="multiple">    
	<nz-option *ngFor="let item of multiSelectShowAll" [nzValue]="item" 	[nzLabel]="item">
	</nz-option>  
</nz-select>

*If you can click the X, the item will remove the selected items list.

We can try the disabled item for the item list. I want to be disabled if the item is equal to ‘test’. How can do this?

At this time we can use nzDisabled

<nz-select    
[(ngModel)]="multiSelectModelShowAll"    
nzPlaceHolder="Select"    
nzMode="multiple">    
	<nz-option *ngFor="let item of multiSelectShowAll" [nzValue]="item" 	[nzLabel]="item" [nzDisabled]="item === 'test'">
	</nz-option>  
</nz-select>

Using Object for Select

If you will use an object in a select component;

objectSelectModel: string[] = [];  
objectSelect: {
name: string,    
disabled: boolean  }[] = [
{name: 'Select 1', disabled: true},    
{name: 'Select 2', disabled: true},    
{name: 'Select 3', disabled: false},    
{name: 'Select 4', disabled: true},    
{name: 'Select 5', disabled: true},    
{name: 'Select 6', disabled: false},    
{name: 'Select 7', disabled: true},    
{name: 'Select 7', disabled: false},  
];

You can do like this;

objectSelectModel: string[] = [];  
objectSelect: SelectedObject[] = [    
{name: 'Select 1', disabled: true},    
{name: 'Select 2', disabled: true},    
{name: 'Select 3', disabled: false},    
{name: 'Select 4', disabled: true},    
{name: 'Select 5', disabled: true},    
{name: 'Select 6', disabled: false},    
{name: 'Select 7', disabled: true},    
{name: 'Select 7', disabled: false},  
];

SelectedObject is interface you can create a file like;

export interface SelectedObject {  name: string,  disabled: boolean}

After this, open HTML;

<nz-select    
[(ngModel)]="objectSelectModel"    
nzPlaceHolder="Select"    
nzMode="multiple">    
<nz-option *ngFor="let item of objectSelect" [nzValue]="item.name"       [nzLabel]="item.name" [nzDisabled]="item.disabled">
</nz-option>  
</nz-select>

The difference here is that since we are using an object, our label and value values ​​will receive item.nameor we cannot read it.

For disable, if item.disabled is true, the item will be disabled.

Thank you for reading.

From Bestte…