{"id":1781,"date":"2019-06-21T12:09:22","date_gmt":"2019-06-21T06:39:22","guid":{"rendered":"http:\/\/blog.openwebsolutions.in\/?p=1781"},"modified":"2019-06-21T12:09:22","modified_gmt":"2019-06-21T06:39:22","slug":"create-attribute-binding-angular-7","status":"publish","type":"post","link":"https:\/\/openwebsolutions.in\/blog\/create-attribute-binding-angular-7\/","title":{"rendered":"How we can create attribute binding in Angular 7?"},"content":{"rendered":"

Data binding is a core concept in Angular and it allows to explain communication between a component and the DOM. There are many types of data-binding in Angular. Here I will discuss Attribute Binding and how to implement it in angular 7. We can set the value of an attribute directly with attribute binding.\u00a0Attribute Binding is used to bind the attribute of an element with the field of the component.<\/p>\n

In the case of attribute binding, it starts with the prefix attar<\/strong>, followed by a dot (.), and the name of the attribute, then bind the attribute value using string(” “).<\/p>\n

Now, I will create a table and there I set the border and colspan attribute of the element. In this table,\u00a0I am setting the border<\/strong> to 2 by binding value to attr.border<\/strong> and colspan<\/strong> to 5 by binding value to attr.colspan<\/strong> attribute property.<\/p>\n

 <\/p>\n

Attribute Binding in Angular<\/span><\/h3>\n

\"\"<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

After adding border\u00a0<\/strong><\/em><\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

 <\/p>\n

<\/h5>\n
<\/h5>\n
<\/h5>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

After adding colspan<\/strong><\/em><\/p>\n

\"\"<\/h5>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

app.component.html<\/h5>\n
<h4 [ngClass]=\"'blue fs-18'\">Using Attribute binding<\/h4>\r\n<table [attr.border]=\"border\"<\/strong> [ngClass]=\"'collapse-none'\" width=100;\r\ncellpadding=\"5\" cellspacing=\"0\">\r\n  <thead>\r\n     <tr>\r\n       <th [attr.colspan]=\"cols\"<\/strong> [ngClass]=\"['green']\">Case List<\/th>\r\n     <\/tr>\r\n  <\/thead>\r\n  <thead>\r\n     <tr>\r\n       <th [ngClass]=\"'center'\">Case No.<\/th>\r\n       <th [ngClass]=\"'center'\">Case Title<\/th>\r\n       <th [ngClass]=\"'center'\">Party 1<\/th>\r\n       <th [ngClass]=\"'center'\">Party 2<\/th>\r\n       <th [ngClass]=\"'center'\">Status<\/th>\r\n     <\/tr>\r\n  <\/thead>\r\n   <tbody>\r\n     <tr *ngFor=\"let client of clients ; let i=index\">\r\n        <td [ngClass]=\"'center'\">{{i+1}}<\/td>\r\n        <td [ngClass]=\"'center'\">{{client.title}}<\/td>\r\n        <td [ngClass]=\"'center'\">{{client.party1}}<\/td>\r\n        <td [ngClass]=\"'center'\">{{client.party2}}<\/td>\r\n        <td [ngClass]=\"'center'\">\r\n          ****<div *ngIf=\"client.status == 'Active'\" class=\"text-success\">\r\n                   {{client.status}}<\/div>\r\n              <div *ngIf=\"client.status != 'Active'\" class=\"text-danger\">\r\n                   {{client.status}}<\/div>\r\n        <\/td>\r\n      <\/tr>\r\n\r\n   <\/tbody>\r\n<\/table><\/pre>\n
**** Here I put some conditions in the\u00a0status<\/strong> field.<\/p>\n
app.component.scss<\/h5>\n
\n
\u00a0 \u00a0 \u00a0 .blue{\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 color:#037FC2;\r\n\r\n\u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0.blue1{\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 background:#037FC2;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 color:#fff;\r\n\r\n\u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0.green{\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0color:#079E32;\r\n\r\n\u00a0 \u00a0 \u00a0 }<\/pre>\n
\n
\u00a0 \u00a0 \u00a0.fs-18{\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0font-size:18px;\r\n\r\n\u00a0 \u00a0 \u00a0 }<\/pre>\n
\n
\n
\u00a0 \u00a0 \u00a0.collapse-none{\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0border-collapse: unset !important;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0width:100%;\r\n\r\n\u00a0 \u00a0 \u00a0 }<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/h5>\n
app.component.ts<\/h5>\n
border: number=2;<\/strong>\r\ncols: number=5;<\/strong>\r\n\r\nclients = [\r\n    { 'title':'case 1','party1':'Peter','party2':'Alisa','status':'Active' },\r\n    { 'title':'case 2','party1':'Nik','party2':'Adam','status':'Active'},\r\n    { 'title':'case 3','party1':'Rohit','party2':'Virat','status':'Active'},\r\n    { 'title':'case 4','party1':'Steve','party2':'Smith','status':'Inactive'}\r\n];<\/pre>\n
 <\/p>\n
In my next blog, I’ll discuss another binding in Angular7.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Data binding is a core concept in Angular and it allows to explain communication between a component and the DOM. There are many types of data-binding in Angular. Here I will discuss Attribute Binding and how to implement it in angular 7. We can set the value of an attribute directly with attribute binding.\u00a0Attribute Binding […]<\/p>\n","protected":false},"author":31,"featured_media":1782,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18,5],"tags":[],"yoast_head":"\nHow we can create attribute binding in Angular 7?<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/openwebsolutions.in\/blog\/create-attribute-binding-angular-7\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How we can create attribute binding in Angular 7?\" \/>\n<meta property=\"og:description\" content=\"Data binding is a core concept in Angular and it allows to explain communication between a component and the DOM. There are many types of data-binding in Angular. Here I will discuss Attribute Binding and how to implement it in angular 7. We can set the value of an attribute directly with attribute binding.\u00a0Attribute Binding […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/openwebsolutions.in\/blog\/create-attribute-binding-angular-7\/\" \/>\n<meta property=\"og:site_name\" content=\"Openweb Solutions Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-21T06:39:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/06\/attr.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"418\" \/>\n\t<meta property=\"og:image:height\" content=\"161\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/\",\"name\":\"Openweb Solutions Blog\",\"description\":\"Transforming ideas into reality\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/openwebsolutions.in\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/create-attribute-binding-angular-7\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/06\/attr.jpg\",\"width\":418,\"height\":161},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/create-attribute-binding-angular-7\/#webpage\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/create-attribute-binding-angular-7\/\",\"name\":\"How we can create attribute binding in Angular 7?\",\"isPartOf\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/create-attribute-binding-angular-7\/#primaryimage\"},\"datePublished\":\"2019-06-21T06:39:22+00:00\",\"dateModified\":\"2019-06-21T06:39:22+00:00\",\"author\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/78cc69c3015b9c840d74591261861e22\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/openwebsolutions.in\/blog\/create-attribute-binding-angular-7\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/78cc69c3015b9c840d74591261861e22\",\"name\":\"Munmun Das\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/033db0a0941d27e1e3e3bdc05f2e1189?s=96&r=g\",\"caption\":\"Munmun Das\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1781"}],"collection":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/comments?post=1781"}],"version-history":[{"count":7,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1781\/revisions"}],"predecessor-version":[{"id":1795,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1781\/revisions\/1795"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media\/1782"}],"wp:attachment":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media?parent=1781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/categories?post=1781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/tags?post=1781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}