Angular: Counter Project

Counter Project:

Steps:

1. Create the Counter project 

2. Create the User Interface

3. Connect User Interface with angular

1. Create the Counter Project

    Create an angular app with command:

          ng new counter-app

     Note: If you have any issue creating a project you can refer to link below:

      https://flauntprogramming.blogspot.com/2020/06/hello-world-angular.html

2. Create the User Interface

We Added a heading Counter App
We  have used String interpolation to display the value of counter
{{counter}} It displays the value that has been stored in the variable named counter declared in app.component.ts
We have add two buttons to increment and decrement the value of counter
(click)="increment()" It means whenever plus button is clicked, it will call the function increment() defined in app.component.ts
(click)="decrement()" It means whenever minus button is clicked, it will call the function decrement() defined in app.component.ts
We have used inline CSS to keep the things simple
Output of above html is below:

3. Connect the User Interface with Angular

We declared a variable counter with initial value 0. This variable would be responsible for storing the value of counter.
increment() - This function is called when user clicks plus button. This function increments the value of counter by one whenever it is clicked.
decrement() - This function is called when user clicks minus button. This function decrements the value of counter by on whenever it is clicked. 

Github Link for the project : https://github.com/rohitfrst/counter-app