Post
Ask Question

Generating Your First Components And Modules In Angular 5 App

Table of contents

  • Introduction
  • Developing an Angular 5 App series
  • Source Code
  • Background
  • Let's Develop Our Application
    • Creating your first component
    • Creating a registration form
    • Creating a route for our new component
      • Make sure that you have one base element in your src/index.html file
      • Now go to your app.module.ts file and import the RouterModule there
      • Create our Route Array
      • Configure the route in imports
      • Set our router outlet
    • Style registration page using material design
    • Create Home and Navigation Components
  • Conclusion
  • Your turn. What do you think?
Introduction

This post is in continuation of the course Developing an Angular 5 App series if you haven’t gone through the previous posts yet, I strongly recommend you to do that. You can find the links to the previous posts below. In our previous posts, we saw about the Angular 5 updates, an overview of the project and how to set up your first application in Angular 5. In this post, we are going to create a few components and modules like routing, navigation, registration forms etc. So, at the end of this article, you will have a registration application with navigation and routing enabled. I hope you will like this article.

You can always see this article on my blog here.

Developing an Angular 5 App series

These are the previous posts in this series. Please go ahead and have a look.

  1. What Is New and How to Set Up our First Angular 5 Application
  2. Angular 5 Basic Demo Project Overview
Source Code

You can clone or download the source code here.

Background

As I mentioned, here, we are going to create an Angular 5 application which contains Registration form, Navigation, Routing etc.

Let’s Develop Our Application

We will be creating our application in a step by step manner so that you can easily follow up. No more talking now and let’s code it.

Creating your first component

As we discussed in our previous posts, a component is a set of combined functionality. In our case, we are going to create a component called Registration that has a purpose is to serve all the codes for Registration.

You can create your components in two ways -

  1. Manually create a file called registration.component.ts. If you opt for this method, you will have to register this component in app.module.ts yourself and also creating the template.
  2. Using a command in NPM command prompt. This is an easy method as it does all the background work for us.

I am going to opt for the second method. To create a component using your command prompt, you will have to run the following command.

  1. ng generate component {component name }
    D:\SVenu\FullStackDevelopment\Angular\Angular5\ng5>ng g component registration

Once you run the command, the following processes will happen.

  1. create src/app/registration/registration.component.html
  2. create src/app/registration/registration.component.spec.ts
  3. create src/app/registration/registration.component.ts
  4. create src/app/registration/registration.component.scss
  5. update src/app/app.module.ts (501 bytes)

Now, let us go back to our code folder and see the files. You can see your new files in app/registration folder. Here is how our registration.component.ts file looks.

  1. import {  
  2.     Component,  
  3.     OnInit  
  4. } from '@angular/core';  
  5. @Component({  
  6.     selector: 'app-registration',  
  7.     templateUrl: './registration.component.html',  
  8.     styleUrls: ['./registration.component.scss']  
  9. })  
  10. export class RegistrationComponent implements OnInit {  
  11.     constructor() {}  
  12.     ngOnInit() {}  
  13. }  

If you see the code, the command has created all of the code which we need to get started. The same component will be imported and added to our declarations in @NgModule in our app.module.ts. Please go ahead and see the same.

  1. import {  
  2.     BrowserModule  
  3. } from '@angular/platform-browser';  
  4. import {  
  5.     NgModule  
  6. } from '@angular/core';  
  7. import {  
  8.     AppComponent  
  9. } from './app.component';  
  10. import {  
  11.     RegistrationComponent  
  12. } from './registration/registration.component';  
  13. @NgModule({  
  14.     declarations: [  
  15.         AppComponent,  
  16.         RegistrationComponent  
  17.     ],  
  18.     imports: [  
  19.         BrowserModule  
  20.     ],  
  21.     providers: [],  
  22.     bootstrap: [AppComponent]  
  23. })  
  24. export class AppModule {}  
Creating a registration form

Now that we have created our component, let’s edit our component with the needed text boxes and buttons. Go to the registration.component.html file and edit the content as preceding.

  1. <p>  
  2.    <input type="text" placeholder="First Name" />  
  3.    <input type="text" placeholder="Last Name" />  
  4.    <input type="email" placeholder="Email" />  
  5.    <input type="password" placeholder="Password" />  
  6.    <input type="password" placeholder="Confirm Passwrod" />  
  7. <br/>  
  8.    <button>Register</button>  
  9. </p>  

Creating a route for our new component

Now, our registration page is updated and we are yet to create a route for the same. Let’s create it now and test our registration page.

To create a route, you will have to perform some set of changes.

  • Make sure that you have one base element in your src/index.html file
  1. <base href="/">
  • Now, go to your app.module.ts file and import the RouterModule there.
  1. import { RouterModule, Routes } from '@angular/router';
Create your Route Array
  1. const myRoots: Routes = [  
  2. { path: 'register', component: RegistrationComponent }  
  3. ];  

Here, the path is the route name and component is the component which that path refers to.

Configure the route in imports

Once we create the routing array, it is time to configure it using RouterModule.forRoot.

  1. @NgModule({  
  2.     declarations: [  
  3.         AppComponent,  
  4.         RegistrationComponent  
  5.     ],  
  6.     imports: [  
  7.         BrowserModule,  
  8.         AppRoutingModule,  
  9.         RouterModule.forRoot(myRoots)  
  10.     ],  
  11.     providers: [],  
  12.     bootstrap: [AppComponent]  
  13. }) 
Set the router outlet

We have successfully configured our route. Now, we need to set where these pages/components will appear. To do so, go to your app.component.html and add the router-outlet. So ,the content of the route components will be displayed after the router-outlet tag.

  1. <!--The content below is only a placeholder and can be replaced.-->  
  2. <div style="text-align:center">  
  3.     <strong> Welcome to {{title}}! </strong>  
  4. </div>  
  5. <router-outlet></router-outlet>  

Now, if you run the application by following the route as http://localhost:4200/register, you can see your registration page as preceding.

Sample_Registration_Form

Isn’t this registration form too basic? Let’s style them now.

Style registration page using material design

Before we do anything, we need to install Angular-material to our project so that we can use the styles which are available there.

  1. npm install --save @angular/material @angular/cdk

By any chance, if you get an error as below,

  1. D:\SVenu\FullStackDevelopment\Angular\Angular5\ng5>npm install --save @angular/material @angular/cdk
  2. npm ERR! path D:\SVenu\FullStackDevelopment\Angular\Angular5\ng5\node_modules\fsevents\node_modules\dashdash\node_modules
  3. npm ERR! code EPERM
  4. npm ERR! errno -4048
  5. npm ERR! syscall scandir
  6. npm ERR! Error: EPERM: operation not permitted, scandir 'D:\SVenu\FullStackDevelopment\Angular\Angular5\ng5\node_modules\fsevents\node_modules\dashdash\node_modules'
  7. npm ERR! { Error: EPERM: operation not permitted, scandir 'D:\SVenu\FullStackDevelopment\Angular\Angular5\ng5\node_modules\fsevents\node_modules\dashdash\node_modules'
  8. npm ERR! stack: 'Error: EPERM: operation not permitted, scandir \'D:\\SVenu\\FullStackDevelopment\\Angular\\Angular5\\ng5\\node_modules\\fsevents\\node_modules\\dashdash\\node_modules\'',
  9. npm ERR! errno: -4048,
  10. npm ERR! code: 'EPERM',
  11. npm ERR! syscall: 'scandir',
  12. npm ERR! path: 'D:\\SVenu\\FullStackDevelopment\\Angular\\Angular5\\ng5\\node_modules\\fsevents\\node_modules\\dashdash\\node_modules' }
  13. npm ERR!
  14. npm ERR! Please try running this command again as root/Administrator.

You should try running the following command before you execute the above command again.

  1. cmd.exe npm

You may also need to install the animation as well.

  1. npm install --save @angular/animations

Once you have installed it, you need to import some of the modules in the app.module.ts file.

  1. import { MatButtonModule, MatCardModule, MatInputModule, MatSnackBarModule, MatToolbarModule } from '@angular/material';  

Now, add those components to your import list in @NgModule.

  1. @NgModule({  
  2.     declarations: [  
  3.         AppComponent,  
  4.         RegistrationComponent  
  5.     ],  
  6.     imports: [  
  7.         BrowserModule,  
  8.         AppRoutingModule,  
  9.         MatButtonModule, MatCardModule, MatInputModule, MatSnackBarModule, MatToolbarModule,  
  10.         RouterModule.forRoot(myRoots)  
  11.     ],  
  12.     providers: [],  
  13.     bootstrap: [AppComponent]  
  14. })  
Let’s go back to our registration.component.html file and do some design changes.
  1. <mat-card>  
  2.     <mat-input-container> <input matInput type="text" placeholder="First Name" /> </mat-input-container>  
  3.     <mat-input-container> <input matInput type="text" placeholder="Last Name" /> </mat-input-container>  
  4.     <mat-input-container> <input matInput type="email" placeholder="Email" /> </mat-input-container>  
  5.     <mat-input-container> <input matInput type="password" placeholder="Password" /> </mat-input-container>  
  6.     <mat-input-container> <input matInput type="password" placeholder="Confirm Passwrod" /> </mat-input-container> <br /> <button mat-raised-button color="primary">Register</button>  
  7. </mat-card>  
We also need to include one material CSS in our Style.scss file.
  1. @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';  
Now, let’s run our application and see our registration page.Material_Angular_Form

Material_Angular_Form

That’s cool; we have done it.

Create Home and Navigation Components

We know how to create new components now using generate command, right? Let’s create a new component for Home and Navigation.

  1. ng g component home  
  2. ng g component nav  
As we used the commands to create the components, the same will be imported in our app.module.ts automatically. So, we don’t need to worry about it. Now, let’s edit our nav component and use a material design for the navigation buttons.
  1. <mat-toolbar color="primary">  
  2.    <button mat-button routerLink="/">Home</button>  
  3.    <button mat-button routerLink="/register">Register</button>  
  4. </mat-toolbar>  
Here, the routerLink property specifies the route where we need to redirect to. We are not done yet. We need to use this component on our app.component.html page to see this navigation.
  1. <!--The content below is only a placeholder and can be replaced.-->  
  2. <div style="text-align:center">  
  3.     <strong> Welcome to {{title}}! </strong>  
  4.     <app-nav></app-nav>  
  5. </div>  
  6. <router-outlet></router-outlet>  
And also, add our new route for our HomeComponent. So, go to the app.module.ts and edit the route.
  1. const myRoots: Routes = [{  
  2.     path: '',  
  3.     component: HomeComponent  
  4. }, {  
  5.     path: 'register',  
  6.     component: RegistrationComponent  
  7. }];  
Let’s give it a try now. I am sure that you will be seeing an output as preceding.

 

Nav_Demo

Nav_Demo

That’s all for today. In our next article, we will start some validations and set up two-way data binding so that the model values can be passed to the server. Till then, bye.

Conclusion

Thanks a lot for reading. Did I miss anything that you think may be needed? Did you find this post useful? Please share your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, or ASP.NET Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.


Similar Articles