MEAN app with Angular 4 (Part 4) Angular Form and Routing

This is the continuation of my tutorial of angular 4. In this part you will learn how to bind angular models to input fields and setup angular routing.

Angular Form and Data Binding

Let’s start by creating a form for new event. Open your angular project then add new file called events-register.component.ts inside your app folder.

import { Component } from '@angular/core';
import { AppService } from './app.service';

  selector: 'events-register',
  templateUrl: './events-register.component.html'
export class EventRegisterComponent {

    newEventData = {}

    post() {
    cancel() {
        this.newEventData = {};

Then create a new file inside the app folder name events-register.component.html and copy and paste the code below.

    Event App
    <span style="flex: 1 1 auto"></span>
    <a mat-button color="primary" routerLink="">Event List</a>
        <mat-card-title>Add Event</mat-card-title>
<div class="event-container">
                <input matInput [(ngModel)]="newEventData.title" name="title" placeholder="Title">

                <input matInput [(ngModel)]="newEventData.location" name="location" placeholder="Location">

                <input matInput [(ngModel)]="newEventData.meetUpPlace" name="meetUpPlace" placeholder="Meet up place">

                <input matInput [(ngModel)]="" [matDatepicker]="picker" name="date" placeholder="Choose a date">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>

                <textarea matInput [(ngModel)]="newEventData.description" placeholder="Description"></textarea>
        <button mat-raised-button color="primary" (click)="post()">Save</button>
        <button mat-raised-button color="warn" (click)="cancel()">Cancel</button>

In the code above you will notice the [(ngModel)] and (click). [(ngModel)] is angular 4 two way binding while the (click) is for the click event binding.

Open the app.module.ts and add RouterModule, FormsModule and our new component EventRegisterComponent. The RouterModule will be use for routing and FormsModule is for angular binding to work.

import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { EventRegisterComponent } from './events-register.component';

We need to provide routes for RouterModule. We do that by defining a constant variable named routes and use it as a parameter in RouterModule.forRoot function.

const routes = [
  { path: '', component: EventsComponent },
  { path: 'add-event', component: EventRegisterComponent }

  declarations: [
    AppComponent, EventsComponent, EventRegisterComponent
  imports: [
    BrowserModule, HttpModule, MatFormFieldModule,
    MatInputModule, MatButtonModule, MatToolbarModule,
    MatCardModule, MatDatepickerModule, MatNativeDateModule,
    NoopAnimationsModule, FormsModule, RouterModule.forRoot(routes)
  providers: [AppService],
  bootstrap: [AppComponent]

Update the code of your events.component.html to look like the code below.

    Event App
    <span style="flex: 1 1 auto"></span>
    <a mat-button color="primary" routerLink="add-event">Add Event</a>
<div *ngFor="let event of">

Then we need a container for our route. Change the code in your app.component.html to the code below.


Now run your project using the command

ng serve --open

If everything goes well, you should now be able to navigate to pages.

event list

add event

Related Articles

Source Code

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s