Generating Your First Components and Modules in Angular 5

introduction

this post is a continuation of the developing an angular 5 app series. if you haven’t gone through the previous posts yet, i strongly recommend you to do that. in our previous post, we looked at the angular 5 updates, and 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 like this article.

developing an angular 5 app

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 always clone or download the source code here .

background

so as i mentioned, here we are going to create an angular 5 application which contains a 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 along.

okay, enough talking, let’s code!

creating your first component

as we discussed in our previous posts, a component is a set of combined functionalities, 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 the 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 occur:

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 look at the code, you'll see that the command 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 .

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 the text boxes and button we need. go to your registration.component.html file and edit the content as follows:

<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 that our registration page is updated, and we are set to create a route for said page. so, let’s create it now and test our registration page.

to create a route you will have to do 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 rout array

const myroots: routes = [{
    path: 'register',
    component: registrationcomponent
}];

here the path is the route name and the component we used is the component to which that path refers.

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 this pages/components will appear. to do so, go to your app.component.html and add the router-outlet. this will cause the content of the route components to be displayed after the router-outlet tag.

<!--the content below is only a placeholder and can be replaced.-->
<div>
    <h1>
	 welcome to {{title}}!
	</h1>

</div>
<router-outlet></router-outlet>

now if you run our application by following the route, http://localhost:4200/register, you can see our registration page.

sample_registration_form

isn’t this registration form too basic? let’s style it.

style registration page using material design

before we do anything, we need to install angular-material into 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 like the one 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.

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, we need to import some of the modules in the app.module.ts file as follows:

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 male 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.

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

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

material_angular_form

that’s cool, we did it!

create home and navigation components

we know how to create new components now using the generate command, so 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 into 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 the routerlink property specifies the route to where we need to redirect. we are not done yet, though. 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 we also need to 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!

nav_demo

that’s all for today. in our next article, we will start to do 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 may think which is needed? did you find this post useful? i hope you liked this article. please share me your valuable suggestions and feedback.