Before starting with the registration form, you should be aware of basic file rendering and server setup in AngularJS. If not then quickly glance over the blog – Creating First App In AngularJS With Basic File Setup & Configuration.


This blog will also be helpful for you to learn how to call a custom component in AngularJS.



Follow these steps to create a registration form with custom component –

1. Open your Visual Studio Code editor and establish connection with the local server.

2. Follow the flow, Explorer tab (left sidebar) → myproject → myapp → src → app.
In this app folder, create another folder named, registration (right click app and click on New Folder option).

3. In registration folder create three new files (right click registration and click on New File option) namely,
(i) registration.component.ts
(ii) registration.component.html
(iii) registration.component.css
Usually the custom files are named in predefined way – folder_name.component.file_type

4. In the file registration.component.html write the following HTML code to create a basic form

<div id=”registration”>
<form>
<label>Full Name</label>
<input type =”text” name=”fullname” /><br>
<label>Email</label>
<input type =”text” name=”demail” /><br>
<label>Password</label>
<input type =”password” name=”dpassword” /><br>
<button>Registration</button>
</form>
</div>

5. In the file, registration.component.css write your desired code for styling.
For ex –

form{
border: 1px solid gray;
}

6. In the file registration.component.ts type in the following code –

import { Component } from ‘@angular/core’;
@Component({
selector : ‘app-registration’,
templateUrl : ‘./registration.component.html’,
styleUrls : [‘./registration.component.css’]
})
export class RegistrationComponent{
}

Code line 7 indicates a custom component creation. Code lines 2-6 indicates component declaration and for the proper functioning of this component, we have to import its base library which is indicated by code line 1.

Tip: – Although we are allowed to name our components anything but in order to follow good programming practice, the component keyword is preceded with its purpose. In our case it’s RegistrationComponent.

7. In the predefined file app.module.ts (can be found on explorer left sidebar), write down/update the following code –

import { BrowserModule } from '@angular/platform-browser';
import { ngModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { RegistrationComponent } from './registration/registration.component';
@ngModule({
declarations: [
AppComponent,
RegistrationComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Notice how we have mentioned RegistrationComponent in the @ngModule’s declaration section (code line 9) so that this file knows what other files have to be read on starting up.
Since we also have to provide the file location of RegistrationComponent, we also have to import it (code line 5) in the top most section of app.module.ts file.

8. Notice the selector (‘app-registration’) in registration.component.ts file (code line 3), instead of putting it index.html file, we have to mention it in the app.component.html file like this –

<div style="text-align : center">
<h1>
Welcome to Angular {{title}}!!
</h1>
</div>
<app-registration></app-registration>

9. After saving and successfully compiling the files, you would be able to see your form generated on the app’s home screen (localhost:4200).


Pabbly Form Builder


Conclusion

Although the form created isn’t in a working state i.e. it won’t store any values in the database but it shows how to create, include in main files and call a custom component in AngularJS.

If you want to refresh your memory with the basics and installation of Angular 4, visit following blogs –