15th Day
Hey Guys, I hope that you are enjoying with my blogs writing and today's we will create a template project ,Electronic Medical Records (EMR).So let's some introduction
Angular is a framework that is used to create web application. Angular uses typescript to write our business logic and method but browser does not understand typescript. The browser understand JavaScript . so that's why Angular CLI come into picture.
View: app.component.html has html code .In this folder we make user interface.
Model: .
Component: Bind the view and model is called component(app.component.ts). which communicate with anyone like CSS, Module etc.
Module: A group of components is termed as module(app.module.ts).
App.component.spec.ts : It is a testing file.
- In this project, First created model like app.model.ts.
app.model.ts(model)
//1. And this my model
export class Patient{
name:string="";
age:number=0;
//2.One patient has list of problem so used an Array..
problem:Array<Problem> = new Array<Problem>();
}
class Problem{
//3.for patient it will be many problems...
description:string="";
}
2.Then after created an user interface(app.component.html).
app.component.html(View)
<!--This is the User interface
// To bind the text box like Name or Age use directive(ng model)-->
Patient Screen <br>
Name:- <input type="text" [(ngModel)]="patientobj.name" name=""id="txtname"><br>
Age:- <input type="text" [(ngModel)]="patientobj.age" number=""id="txtage"><br>
<input type="button" (click)="add()" value="Add"/><br>
{{patientobj.name}}<br><!--It is an Expression or interpolation-->
<b>{{patientobj.age}} </b><br>// Here mixing html with angular directives for bold
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr *ngFor="let temp of patientobjs">
<td>{{temp.name}}</td>
<td>{{temp.age}}</td>
</tr>
</table>
Explanation:
- It may be we go from view to model or model to view or both side-
- for view to component use ()
- for component to view use []
- for two way binding use [()] like [(ngModel)] by using we bind text box with name.
- input type="text" ngModel=" ngModel="patientobj.name it means that
- input type(textbox) value bind with name
3. After creating model and view .Component which connect to the view and
model ,It will be expose Via the component, first import the model to component and
component make object and will be expose to view.
- view and model type has connection through template URL
app.component.ts(Component)
import { Component} from '@angular/core';
// Through below this line, model will be connect
import {Patient} from "./app.model"
// If code has in current folder then use "./app.model" otherwise "../app.model"
// there has three templates selector, templateurl, styleurl...
@Component({
// this decorator indicates that its an angular components..
// Otherwise it indicates simple code of TypeScript
selector: 'app-root',
templateUrl: './app.component.html',
//its meant to specify the html
styleUrls: ['./app.component.css']
//its meant to specify the html
})
export class AppComponent {// This is whole senario is component
// this Appcomponents color will come above mention, styleUrls: ['./app.component.css']
patientobj:Patient=new Patient();
// this patient object tideup with UI(textbox) but now i want a collection to add
// for that make a list like
patientobjs:Array<Patient>=new Array<Patient>();
// this will tideup with table
// This Array is a stack it means push and pop
add()// through this method we add current patient
{
this.patientobjs.push(this.patientobj);// it will add to the current patient.
this.patientobj=new Patient();//This will clear my screen
}// To calling to this add method we write in button(click)="Add()"
}
app.module.ts: (It is the collection of Component)
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
So finally have tried that, textbox data should be set in object and object's data through interpolation it should be show on UI.
Output:
Must watch this video for more details...
Thank You...!
