Creating a simple Angular Application…

There are many programming languages for developing applications by using frameworks and libraries. And also Angular is a framework for using HTML and TypeScript to create single-page client applications. As a set of TypeScript libraries that you import into your applications, it implements core and optional functionality.

I think the angular framework is easier than other frameworks when working with front-end development.

Here I focus on some basic concepts in angular from creating a simple Angular application that will inform users about the patient details that have been registered in the medical center.

I divide this task into 3 parts.

1. Creating an environment to work

2. Developing the application

3. Develop the application to an attractive method

1.Creating an environment to work

Step 1 :

Install Node.js, npm, and Visual Studio Code. (Here I use Visual Studio Code to develop the angular application)

Step 2:

Open the command prompt, then run the following commands:

node -v

npm -v

if our installation was successful you can see the versions of the corresponding packages.

Then, to install the Angular CLI globally run the following command:

npm install -g @angular/cli

Then run the following command to check the angular installation was successful.

ng v

step 3:

Navigate to the desired directory where you want to create your workspace using the cd command in the Terminal/Command prompt

Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:

ng new my_blogproject

After downloading some dependencies and creating files, your workspace will be created.

you can open the command prompt again in this my_blogproject folder and run code. command. It will launch in the Visual Studio Code.

Now a new project directory will be built with the base application template inside and run the development server:

ng serve

Now, visiting http://localhost:4200/, you will see the view of this Angular app.

2.Developing the application

Inside the my_blogproject’s ./src/app folder there is a root component of the application called app. component located. For now, it is the only one in the project. It would be preferable to take out a wrapper component outside the app. component. In this app, the wrapper component will be the patient. component. Let’s create it with the following Angular CLI command:

ng generate component patient

As a result, the directory of the new component “patient” is created in the folder ./src/app with the following files:

· patient.component.scss — the component styles;

· patient.component.html — the component view template;

· patient.component.spec.ts — the component unit tests;

· patient.component.ts — the component file itself.

Now concentrate on the Component Decorator, where our component’s metadata was included in the patient.component.ts file.

In selector, part says that the component usage in templates of other components. templateUrl link to the template file and sytleUrl link to the style that we used to decorate our component.

patient.component.ts

Angular CLI declares it in the application module after contracts are made, allowing it to be included immediately in other modules that are declared in this module. In this case, app.module.ts must be the following.

app.module.ts

Then just add the patient component to the app component. app component becomes a root component.

app.component.html

Now we consider our application.

There is a list of patient names. The user clicks on the name to find the details about that patient. In that case, the user can see basic details, doctor’s details, and medical report details that are relevant to the patient's name. so, that I create a data type named “Forecast”

In there we need to use an interface feature that includes typescript. so create a new interface run the below command in the terminal.

ng generate interface core/interfaces/forecast

It will create forecast.ts in the ./src/app/core.interface . An interface is functionally an object that declares, instead of values, the data types of its keys. So, we defined the data structure of the expected patient data itself.it looks as follows,

forecast.ts

Here we must create another interface called “patientname” to forecast the patient name list.

Patientname.ts

Now we can create a component template in patient.component.html.

Next, the list of the patient names and their forecast must be displayed in this application.

In angular, the data sources are special tools called Services. so we need to create a new service called in my app “patientname” service.to create that use the following command:

ng generate service core/services/patientname

It will return the patient name list to us from an array.

In proper Angular applications, by interacting through HTTP requests, the services generally receive data from some APIs. This post would not suggest dealing with HTTPS requests.

To patient’s test data that imported into our service must create a file in “./src/app/new/patientname.new.ts”

That file must be as follows,(here I mention one test data)

patientname.new.ts

Now our service will be modified. So that method “getPatientes” returns the test data about patients from the created file. after the modification patientname.service.ts look as follows,

patientname.service.ts

In the service, an array of patient names with their forecast details is available. But there’s a question: how to access a component’s service methods? To do this, Angular provides a special process for the Dependency Injection to obtain data from the source for any component (DI). A relationship between the component variable and the service class can be generated using this mechanism. After that modification patient.component.ts as follows,

patient.component.ts

Now our data import into the component. we can get it into the template of the patient.component.html file. In angular provides directives for controlling the display and behavior of elements. Here I use the “NgFor” directive, which allows displaying the elements of the iterable object in a loop.

At this time patient details forecast is hidden. To show that we need to create a handler for choosing a patient. In my application user click on the name to choose what he wants. so needs to implement by adding the functionality to patient.component.ts.

After these implementation patient.component.ts look like,

(At this time I use console.log to record errors in this function.)

patient.component.ts

If all has been completed right, the index appears in the patient name array of the browser console after clicking on one of the patient names. A standard way to monitor the code at different stages of its execution is the output to the console. So, we showed a patient name list and built functionality for saving the index of the active patient name by clicking on it.

The next step of my application is the patient details forecast for the selected name.

So that we need to create a new component named patient details by using the following command:

ng generate component patient/patient-details

when we create a patient-details component, app.module.ts look as follows,

Now add the patient-details component to the patient component in the same way, as the patient component was added to the app component above. We added one instance of the patient-details component, but we can’t visible it until choosing the patient name. But when we refresh the page it already shows the details that relevant to the first patient on the list.

So this scenario my patient.component.html is showing as bellow,

patient.component.html

The binding properties approach involves binding the child component’s custom property with knowledge that is expected to be transferred to it. On one the other hand, with the support of the @Input() decorator, the custom property needs to be declared in the child component class. Here you can understand it by using the following.

Patient-details.component.ts

Patient.component.html

3. Develop the application to an attractive method

Let’s create this application more attractive.

To do this first we need to design HTML markup and add style to it.

Patient.component.scss

Also, to restore the default browser properties, we have to add several common types. The Angular framework has an src/styles.scss file for these purposes. The styles mentioned in this file have an influence on the whole project, unlike styles written directly in the component.

style.scss

In the final step, I do the patient-details.component.html and its scss styles as following.

Patient-details.component.html

Patient-details.component.scss

Now our task is over. Let’s see our final application:

Conclusion

After developing a simple application by working with Angular CLI, typescript, and angular components we learned more things about the basics in Angular. Angular is not difficult to learn. But our app is not ready yet, because the patient list and patient details report should be inside different blocks of the page and We must learn about getting user input in those recode and display it proper methods. However, we will try it in the future in my next blog.

Undergraduate at University of Moratuwa

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store