Being a Typescript based open-source framework, Angular has support for several super heroic features. It has given Module Federation support with Webpack, an excellent solution for micro-frontend development, impeccable data binding feature, differential loading, etc. In this blog, we will learn something about Angular Data Binding.
Data binding is a basic concept in Angular 10 and earlier version that permits developers to make transmission between a component and its view or more accurately the DOM. Using this technique, you don’t require to manually push data from your component to the DOM and back.
Angular offers four types of Data Binding and they are basically different in the way data flows like from the component to the DOM, from the DOM to the component, or both ways:
In the template, we have four series of keys:
export class ArithmaticOperatorDemoComponent implements OnInit {
resultInputNumber = ‘0’;
firstNumber = null;
arithmaticOperator = null;
holdForSecondNumber = false;
Next, describe the getOperands () method that will be used to get the current number:
public getOperands(s: string) {
console.log(s);
if (this.holdForSecondNumber) {
this.resultInputNumber = s;
this.holdForSecondNumber = false;
} else {
this.resultInputNumber === ‘0’ ? this.resultInputNumber = s : this.resultInputNumber += s;
}
}
Next, describe the getDecimalOperands () method that will be used to get the current number:
getDecimalOperands() {
if (!this.resultInputNumber.includes(‘.’)) {
this.resultInputNumber += ‘.’;
}
}
Describe the doArithmaticOperations() method which performs the calculation according to the operator type:
private doArithmaticOperations(oprtr, secondOprtr) {
switch (oprtr) {
case ‘+’:
return this.firstNumber += secondOprtr;
case ‘-‘:
return this.firstNumber -= secondOprtr;
case ‘*’:
return this.firstNumber *= secondOprtr;
case ‘/’:
return this.firstNumber /= secondOprtr;
case ‘=’:
return secondOprtr;
}
}
Describe the getArithmaticOperations() that will be familiar with get the execution :
public getArithmaticOperation(oprtr: string) {
console.log(oprtr);
if (this.firstNumber == null) {
this.firstNumber = Number(this.resultInputNumber);
}
else if (this.arithmaticOperator) {
const result = this.doArithmaticOperations(this.arithmaticOperator, Number(this.resultInputNumber))
this.resultInputNumber = String(result);
this.firstNumber = result;
}
this.arithmaticOperator = oprtr;
this.holdForSecondNumber = true;
console.log(this.firstNumber);
}
Completely, describe the clearScr () method that will be used to clear the result area and reset the calculations:
public clearScr() {
this.resultInputNumber = ‘0’;
this.firstNumber = null;
this.arithmaticOperator = null;
this.holdForSecondNumber = false;
}
Now, you require to use data binding to binding these all methods to the template.
<div class=”calculator”>
<input type=”text” class=”calculator-screen” [value]=”resultInputNumber” disabled />
<div class=”calculator”>
<input type=”text” class=”calculator-screen” [value]=”resultInputNumber” disabled />
<div class=”calculator-keys”>
<!– […] –>
<button type=”button” (click)=”getOperands(‘7’)” value=”7″>7</button>
<button type=”button” (click)=”getOperands(‘8’)” value=”8″>8</button>
<button type=”button” (click)=”getOperands(‘9’)” value=”9″>9</button>
<button type=”button” (click)=”clearScr()” class=”all-clear” value=”all-clear”>C</button>
<button type=”button” (click)=”getOperands(‘4’)” value=”4″>4</button>
<button type=”button” (click)=”getOperands(‘5’)” value=”5″>5</button>
<button type=”button” (click)=”getOperands(‘6’)” value=”6″>6</button>
<button type=”button” (click)=”getArithmaticOperation(‘+’)” class=”operator” value=”+”>+</button>
<button type=”button” (click)=”getOperands(‘1’)” value=”1″>1</button>
<button type=”button” (click)=”getOperands(‘2’)” value=”2″>2</button>
<button type=”button” (click)=”getOperands(‘3’)” value=”3″>3</button>
<button type=”button” id=”minus” (click)=”getArithmaticOperation(‘-‘)” class=”operator” value=”-“>-</button>
<div class=”calculator-keys”>
<button type=”button” (click)=”getArithmaticOperation(‘*’)” class=”operator” value=”*”>×</button>
<button type=”button” (click)=”getArithmaticOperation(‘/’)” class=”operator” value=”/”>÷</button>
<!– […] –>
<button type=”button” (click)=”getDecimalOperands()” class=”decimal” value=”.”>.</button>
<button type=”button” id=”zero” (click)=”getOperands(‘0’)” value=”0″>0</button>
<br>
<button type=”button” id=”btnResult” (click)=”getArithmaticOperation(‘=’)” class=”equal-sign”
value=”=”>=</button>
</div>
</div>
Conclusion
We know that Angular plays a splendid role in Single-page application development.
Here, in this blog, we have successfully built the simple calculator application using Angular 10. We have learned about the types of data bindings with an example of event and property binding in Angular 10.
A Seasoned technocrat with years of experience building technical solutions for various industries using Microsoft technologies. Wish sharp understanding and technical acumen, have delivered hundreds of Web, Cloud, Desktop and Mobile solutions and is heading the technical department at AngularJS Frontend Development Company – iFour Technolab Pvt. Ltd.
Have you ever thought of a world where asking the Internet for information feels like…
We've gotten so used to seeing men streetwear joggers, ripped jeans, and sleeveless shirts. Hair…
When it comes to festivals, the options for wedding jewellery are endless. You can go…
Whether it concerns your home or an office building, the state of a property’s windows…
You know that running an environmentally sustainable business is the right thing to do. But…
If you are in a financial crisis , or need to start a new business…