Add a new Component Manually and Databinding in Angular

Опубликовано: 20 Ноябрь 2024
на канале: HHP Techno

127

Today in this video ,here we will see how to add a new component manually and Databinding ?

create application called AngDemo and follow the Steps.

Add a new folder “calculate” and 2 files inside this folder
 calculate.component.html
 calculate.component.ts

Let’s check calculate.component.html and calculate.component.ts

Let’s add some code in calculate.component.html

Let’s add some code in calculate.component.ts

Go to the file “~\app\app.shared.module.ts” and make the following changes

 add the following line in the import section
import { CalculateComponent } from './components/calculate/calculate.component’;
 inside declarations section add
CalculateComponent
 inside forRoot([]) add
{ path: 'calculate', component: CalculateComponent }

Add one line code in “…\app\components\navmenu\navmenu.component.html”.

Now let’s run application and quickly check this manually added component.

Let’s do the Databinding

Let’s code for calculate.component.ts

Let’s modify calculate.component.html

Let’s run now

We are able to do sum properly by using this Calculate Component which we added manually

Music: https://www.bensound.com