Angular Series #1— Components, Interpolation & Bindings
What is a component in angular?
A component in angular is a class with a template and decorator.
-Template
-Class
-Decorator
The template defines the user interface, contains the HTML, directives and data binding.
The class contains code required for template.
The decorator adds metadata to a class that converts it into the component.
Angular interpolation:
Interpolation is all about data binding which broadly classified into below types,
One way data binding: From component(Class) to view Template
One way data-binding: From view template to component
Two way data binding: From component to view template & From view template to component
- Interpolation:
Using this class properties and method can be accessed inside view let’s look into an example,
employee-details.component.ts
import { Component, OnInit } from ‘@angular/core’;@Component({selector: ‘app-employee-details’,templateUrl: ‘./employee-details.component.html’,styleUrls: [‘./employee-details.component.css’]})export class EmployeeDetailsComponent implements OnInit {constructor() { }ngOnInit() {}firstName: String =”Vaibhav”;lastName:string=”Bhapkar”;getFullName(){return this.firstName+this.lastName;}}
employee-details.component.html
<p>employee-details works!</p><h1>First Name: {{firstName}}</h1><h1>Full Name:{{getFullName()}}</h1>
2) Property binding:
Property binding also flows the data from component class property to the HTML template lets look into an example of property binding,
employee-details.component.ts
import { Component, OnInit } from ‘@angular/core’;@Component({selector: ‘app-employee-details’,templateUrl: ‘./employee-details.component.html’,styleUrls: [‘./employee-details.component.css’]})export class EmployeeDetailsComponent implements OnInit {constructor() { }ngOnInit() {}imgpath:string=”test.jpg”}
employee-details.component.html
<p>employee-details works!</p><img [src]=’imgpath’/>
As you see both interpolation and property both serve the same purpose let’s look into some of the difference and which one we can use,
- Interpolation is just a special syntax that angular converts it into property binding
- Interpolation is just a convenient alternative to property binding
- To concatenate string, we must use interpolation instead of property binding. <img src=’ some path/{{interpolation variable}}’/>
- To set element property to a non-string data value, you must use property binding. <button [disabled]=’isdisabled’>Click</button>
- In case of Property binding remember to enclose property name with pair of square brackets.
- Also, you can use the canonical form in case of property binding, <button bind-disabled=’isdisabled’>Click</button>
Html Attribute vs DOM:
When a web browser loads an HTML it creates a DOM lets look into example how it looks,
Html Content:
<html> <head> <title>Title Page</title> </head> <body> <div><h1>Hello World</h1></div> </body></html>
Corresponding DOM:
DOM stands for the document object model when the browser loads a web page, the browser creates a document object model of that page.
DOM contains the HTML element as an object, their properties, methods, and events and it's standard for accessing, modifying, adding or deleting HTML elements you can think DOM is an API for respective HTML code.
Some differences:
- Attributes are defined by HTML whereas properties defined by the DOM.
- Attributes initialize DOM properties once it’s done attributes disappears.
- Property value can change whereas attribute value cannot change.
Some key points:
- Html attribute and DOM properties are different things
- Angular binding works with properties and events and not with attributes
Angular attribute binding:
As we know binding and interpolation works with properties however not all HTML element has properties(e.g. colspan) so in that we use attribute binding,
<th [attr.colspan]=”columnval”>Class binding:
employee-detail.component.css
.italic-class{font-style: italic;}.bold-class{font-weight: bold;}.color-class{color:red;}
employee-detail.component.ts
import { Component, OnInit } from ‘@angular/core’;@Component({selector: ‘app-employee-details’,templateUrl: ‘./employee-details.component.html’,styleUrls: [‘./employee-details.component.css’]})export class EmployeeDetailsComponent implements OnInit {constructor() { }ngOnInit() {}applyclasses:string=’italic-class bold-class’;}
employee-detail.component.html
<p>employee-details works!</p><p class=”color-class”>Hello World</p><p [class]=’applyclasses’>Tesing World</p>
Event Binding:
Event binding flows data in the opposite direction i.e. from HTML element to component class. Let’s look into an example of the button click event,
employee-detail.component.ts
import { Component, OnInit } from ‘@angular/core’;@Component({selector: ‘app-employee-details’,templateUrl: ‘./employee-details.component.html’,styleUrls: [‘./employee-details.component.css’]})export class EmployeeDetailsComponent implements OnInit {constructor() { }ngOnInit() {}applyclasses:string=’italic-class bold-class’;Onclick(){console.log(“Button Clicked”)}}
employee-detail.component.html
<p>employee-details works!</p><p class=”color-class”>Hello World</p><p [class]=’applyclasses’>Tesing World</p><button (click)=’Onclick()’> Click Me</button>
Two way data binding:
Two way data binding when data is flowing from both the way i.e from component class to view template and view template to the component class. Its combination of property binding and event binding to simplify the syntax angular provided the ngModel directive. An important point before using NgModel you need to import form module in-app-module.ts
employee-detail.component.ts
import { Component, OnInit } from ‘@angular/core’;@Component({selector: ‘app-employee-details’,templateUrl: ‘./employee-details.component.html’,styleUrls: [‘./employee-details.component.css’]})export class EmployeeDetailsComponent implements OnInit {constructor() { }ngOnInit() {}name:string=”Vaibhav”;}
employee-detail.component.html
<p>employee-details works!</p><input type=”text” [(ngModel)]=’name’/><p>You Entered: {{name}}</p>
Thank You, See you in the next article !!
You can reach out to me here,
LinkedIn: https://www.linkedin.com/in/vaibhav-bhapkar
Email: vaibhavbhapkar.medium@gmail.com
