Learn Angular, MVC Core, EF Core, SQL Server Step By Step: NG MODULE , DIRECTIVES

NG MODULE , DIRECTIVES

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

interpolation {{}}

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 { }