Angular Getting Started as Professional : Part — 1
Angular Project
Hello Readers,
In this article we will discuss about how to building a web application from the scratch using Angular with industry-standard practice.
— — — — — — — — Flow of the development — — — — — — —
- Create new Angular 11 project with prefix enable
- Modules, component, and default
- install and setup bootstrap
- Create a new component
- Wire up component to root component and run the app
- Create employee component template with bootstrap
- Interpolation
- Add employee data and configure JSON import
- ngIf
- ngFor
- Event binding and toggle images
- Custom pipe implementation
Create a new angular project
Create a Angular project as “cosmos-emp” or select the project name as your wish.
Open project
Open the project through visual studio
Delete your app.component.spec.ts file from the app directory.
Remove all codes from the app.component.html file from the app directory.
Run the project “ng serve” through terminal
Install bootstrap
Run the installation code for bootstrap “ npm i bootstrap”
import bootstrap into the global SCSS file. Then we can use bootstrap for every component in our app.
Create Component
Create the Component called employees
Angular Component = HTML Template + Component Class + Component Metadata
When you create a new component, always it will be linked to your root module. Now you can see the employee component had imported into the app.module.ts file.
Then run the app using the below command.
ng serve
Create Employee’s component template
<div class =”card”>
<div class =”card-header”>
Employee Management Solutions
</div>
</div>
You can use bootstrap for the UI coding. If you know bootstrap basic it will handle all the rest of the things.
Here we created a table and some components using bootstrap class .
Now let’s see how to implement to Communicate component with your template.
Interpolation
In employees.component.ts we created a string variable and assigned some values.
Now go to employees.component.html ,we have hard coded the value “Employee management system” .Remove it and type the variable name with two curly brackets .
Let’s check our output
Our title changed successfully .
This is the way of interpolation in angular. If you have some variables in your component file you can take that value into your template .
When you send some values from your component implementation file into your template it will instantly update the value.
As a next step you need to add data to your table .So need to create a data file((json) inside your project.
Add Employee data
Create a directory called “data” and inside it create a json file called “Employess.json”
Inside the json file enter some sample data. To import the data first you need to create json type file to identify it by angular otherwise you may get errors.
Now go to c json-type.d.ts file and tpe the following code.
Configure JSON import
Import the data into component file using following coding part of importing json to angular project.
Let’s see the output
Ohhhhhhhhhhhhhhhh…..table showing without data …Then how to hide the table if there is no data.
Get Kumuthini Ashokkumar’s stories in your inbox
Join Medium for free to get updates from this writer.
If there is any length of employee Then show this table that’s the first condition.
ngif
*ngif will manipulate your template based on some conditions on your component file.
Example — change visibility/Enable /Disable
employees.component.html file
employees.component.ts file
Output
ngifor
*ngifor can iterate through some data in your component and display that in your template .
How we can do that ………….?
There are two types of loops in java scripts .
- employee of employees : You will get element
- employee in employees : You will get the index so you need to again refer that index to get the value
Let’s see the output
Now you can see the records of all the employees. RBT means role based training .As a next step RBT progress should display with progress bar instead of numbers. Before going to that let’s display the avatar .
Property Binding
In property binding you can directly use square bracket for the property and the value.
Interpolation VS Property binding
You can use interpolation any ware but if you use the property binding it allows you to set the other properties as well.
Example of Property Binding
We can use property binding for adding an avatar to the table.
Let’s see the output
The benefit of the property binding is if you want to set the width and the height and other properties changes you can do it here.
Event binding and toggle images
Now let’s see how toggle works with on click event with Show and Hide Avartar images.
After creating the toggle method go to employees.component.html and make the changes in button click event
Now when you click show Avatar it will display the images and button label will changed into Hide Avatar.
Custom pipe implementation
Pipe is a technique ,Angular has many inbuild pipes but you can create your own pipes or you can customize it.
Example : lowercase/uppercasecapitalize
Let’s see ….
Insurance balance must be changed as currency into sri Lanka rupess. So you need to replace LKR into RS and need to put some space.
output
First you need to create shared directory then create a pipe as “lkrFormatter” inside the directory.
file
Type your pipe line name
output
Now you will get expected output
To be continue with Filter table with two-way binding using ngModel until get the below output .
Link — https://rb.gy/vleeui
— — — — — — — — — — — — — — — — — — — — — — —
Give your response and stay connected for more :-)
There are more to come :-)
I hope you liked the article.
Thanks for the reading!
— — — — — — — — — — — — — — — — — — — — — — — —
