Generating Your First Components and Modules in Angular 5 App

• Clone or download source code

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 a continuation of the course Developing an Angular 5 App series. If you haven’t gone through the previous posts yet, I strongly recommend you 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 few components and modules like routing, navigation, registration forms, etc. So at the end of this article, you will be having a registration application with navigation and routing enables. I hope you like this article.

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

Background

So 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 whose 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 create 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:

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 like:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.scss']
})
export class RegistrationComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

If you see the code, the command had 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.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { RegistrationComponent } from './registration/registration.component';


@NgModule({
  declarations: [
    AppComponent,
    RegistrationComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Creating a Registration Form

Now that we have created our component, let’s edit our component with needed text boxes and button. Go to your registration.component.html file and edit the content as shown below:

<p>
  <input type="text" placeholder="First Name" />
  <input type="text" placeholder="Last Name" />
  <input type="email" placeholder="Email" />
  <input type="password" placeholder="Password" />
  <input type="password" placeholder="Confirm Passwrod" />
  <br/>
  <button>Register</button>
</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 right, let’s create it now and test our registration page.

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

Make sure that you have one base element in your src/index.html file

<base href="/">

Now go to your app.module.ts file and import the RouterModule there

import { RouterModule, Routes } from '@angular/router';

Create our Route Array

const myRoots: Routes = [
  { path: 'register', component: RegistrationComponent }
];

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.

@NgModule({
  declarations: [
    AppComponent,
    RegistrationComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(myRoots)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Set our router outlet

We have successfully configured our route, now we need to set where these pages/components are to 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.

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

Now if you run our application by following the route as http://localhost:4200/register, you can see our registration page as shown below:

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.

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

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

D:\SVenu\FullStackDevelopment\Angular\Angular5\ng5>npm install 
--save @angular/material @angular/cdk
npm ERR! path D:\SVenu\FullStackDevelopment\Angular\Angular5\ng5\
node_modules\fsevents\node_modules\dashdash\node_modules
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall scandir
npm ERR! Error: EPERM: operation not permitted, scandir 
'D:\SVenu\FullStackDevelopment\Angular\Angular5\ng5\
node_modules\fsevents\node_modules\dashdash\node_modules'
npm ERR! { Error: EPERM: operation not permitted, scandir 
'D:\SVenu\FullStackDevelopment\Angular\Angular5\ng5\
node_modules\fsevents\node_modules\dashdash\node_modules'
npm ERR! stack: 'Error: EPERM: operation not permitted, scandir 
\'D:\\SVenu\\FullStackDevelopment\\Angular\\Angular5\\ng5\\
node_modules\\fsevents\\node_modules\\dashdash\\node_modules\'',
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'scandir',
npm ERR! path: 'D:\\SVenu\\FullStackDevelopment\\Angular\\Angular5\\ng5\\
node_modules\\fsevents\\node_modules\\dashdash\\node_modules' }
npm ERR!
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.

cmd.exe npm

You may also need to install the animation as well:

npm install --save @angular/animations

Once you have installed it, we need to import some of the modules in the app.module.ts file as shown below:

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

Now add those components to our import list in @NgModule.

@NgModule({
  declarations: [
    AppComponent,
    RegistrationComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatButtonModule, MatCardModule, MatInputModule, MatSnackBarModule, MatToolbarModule,
    RouterModule.forRoot(myRoots)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Let’s go back to our registration.component.html file and make some design changes.

<mat-card>
  <mat-input-container>
    <input matInput type="text" placeholder="First Name" />
  </mat-input-container>
  <mat-input-container>
    <input matInput type="text" placeholder="Last Name" />
  </mat-input-container>
  <mat-input-container>
    <input matInput type="email" placeholder="Email" />
  </mat-input-container>
  <mat-input-container>
    <input matInput type="password" placeholder="Password" />
  </mat-input-container>
  <mat-input-container>
    <input matInput type="password" placeholder="Confirm Passwrod" />
  </mat-input-container>
  <br />
  <button mat-raised-button color="primary">Register</button>
</mat-card>

We also need to include one material CSS in our Style.scss file:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Now let’s run our application and see our registration page.

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.

ng g component home 
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.

<mat-toolbar color="primary">
  <button mat-button routerLink="/">Home</button>
  <button mat-button routerLink="/register">Register</button>
</mat-toolbar>

Here, 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.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <app-nav></app-nav>
</div>
<router-outlet></router-outlet>

And also, add our new route for our HomeComponent. So go to your app.module.ts and edit your route as follows:

const myRoots: Routes = [
  { path: '', component: HomeComponent },
  { path: 'register', component: RegistrationComponent }
];

Let’s give it a try now, I am sure that you will be seeing an output as follows:

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

Conclusion

Thanks a lot for reading! Did I miss anything that you think is needed? Could you find this post useful? I hope you liked this article. 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, ASP.NET Forum instead of commenting here. Please post your question in the Comments section below and I’ll definitely try to help if I can.