How to pass data from component to view

• First approach by interpolation denoted as {{employeeName}}
• Second approach by ngmodel .

How to pass data from view to component.

• Using event

For example<input type=’button’ (click)=”Add($event);” name=”Save Record”/>

• ViewChild.
• ngModel

Two-way binding :

Using ngModel we can pass data from component to view and from view to component.

<input [(ngModel)] ="employeeName" type="text" id="empTxt"/>  

Routing in Angular 4

Create a new folder name it as Routing. 
Add a new type script file . 
Below is the demo of the routing file where all application are defined.

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

import { EmployeeComponent } from '../Component/ Employee.component'

import { ViewEmployee } from '../Component/ ViewEmployee.component'

export const routes: Routes = [  

    { path: '', component: EmployeeComponent },

    { path: ‘/ViewEmployee’, component: / ViewEmployee },

    { path: ' ViewEmployee/:Id/', component: ViewEmployee }

];

export const Routing: ModuleWithProviders = RouterModule.forRoot(routes);

Create a new typescript file name it Test.module.ts module and import above routing in angular 2  Below is the sample code of the module.

import { NgModule } from '@angular/core';

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from "@angular/forms"

import { routing } from '../Routing/app.routing';

@NgModule({

    imports: [

        BrowserModule,

        BrowserAnimationsModule,

        NgbModule.forRoot(),

        FormsModule,

        HttpModule,

        routing,

        ],

    declarations: [

       

        ],

    bootstrap: [

      

    ],

    entryComponents: [ConfirmationComponent

    ],

    providers: [{ provide: APP_BASE_HREF, useValue: '/' }

    ]

})

export class AppModule {

}

Route Working

1.  When user login it will redirect to the relationship component page by default.
2.    If user click or type Add Learning ,Relate or relationship it will redirect to the add learning/relate or relationship component screen.
3.  Last route is for how to pass query string values or parameters to the component. In the last route we are passing two parameter first is ID and second is title parameters to the relationship component page.

Angular 2

For single page application we use the angular 2.

It is written in typescript language. All major browsers understand JavaScript only .And   type script automatically gets converted to JavaScript when we build the project.

Common Used Terminology.

Components: In this we write all business logic to fetch data from services and to manipulate the DOM.

Services: In this we write logic to fetch data from database.

Modules: In this all components, services, routing and library get imported, declaration and bootstrapped.  

Routing: All application routes are defined in this route is defined.

Web API

Because of the light weight and restless nature it is widely recommend.

Common Used Terminology

Verbs

HTTPGET: This attribute on the action method of the controller to fetch data from database.

HTTPOST: This attribute on the action method of the controller to insert record in database.

HTTPUT: This attribute on the action method of the controller to update record in database.

DELETE: This attribute on the action method of the controller to delete record in database.