Creating Modal for New Person
We will create a Bootstrap Modal to create a new person. ASP.NET Zero uses ngx-bootstrap library to create modals (you can use another library, but we will use it in this sample too). Final modal will be like below:

First of all, we should use nswag/refresh.bat to re-generate service-proxies. This will generate the code that is needed to call PersonAppService.CreatePerson method from client side. Notice that you should rebuild & run the server side application before re-generating the proxy scripts.
We are starting from creating a new component, named create-person-modal.component.ts into client side phonebook folder:
Let me explain some parts of this class:
- It has a selector, createPersonModal, which will be used as like an HTML element in the person list page.
- It extends AppComponentBase to take advantage of it (defines this.l and this.notify in this sample).
- Defines an event, modalSave, which is triggered when we successfully save the modal. Thus, the main page will be informed and it can reload the person list.
- Declares two ViewChild members (modal and nameInput) to access some elements in the view.
- Injects PersonServiceProxy to call server side method while creating the person.
- It focuses to name input when modal is shown.
The code is simple and easy to understand except a small hack: an active flag is used to reset validation for Angular view (explained in angular's documentation).
As declared in the component, we are creating the create-person-modal.component.html file in the same folder as shown below:
Most of this code is similar for all modals. The important part is how we binded model to the view using the ngModel directive. As like all components, Angular requires to relate it to a module. We should add it to declarations array of phonebook.module.ts as like shown below:
We need to put a "Create new person" button to the 'people list page' to open the modal when clicked to the button. To do that, we made the following changes in phonebook.component.html:
Made some minor changes in the view; Added a button to open the modal and the createPersonModal component as like another HTML tag (which matches to the selector in the create-person-modal.component.ts).