facebook

How we can create attribute binding in Angular 7?

By Munmun Das

How we can create attribute binding in Angular 7?

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. Attribute Binding is used to bind the attribute of an element with the field of the component.

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

Now, I will create a table and there I set the border and colspan attribute of the element. In this table, I am setting the border to 2 by binding value to attr.border and colspan to 5 by binding value to attr.colspan attribute property.

 

Attribute Binding in Angular

 

 

 

 

 

 

 

After adding border 

 

 

 

 

 

 

 

 

After adding colspan

 

 

 

 

 

 

 

 

 

app.component.html
<h4 [ngClass]="'blue fs-18'">Using Attribute binding</h4>
<table [attr.border]="border" [ngClass]="'collapse-none'" width=100;
cellpadding="5" cellspacing="0">
  <thead>
     <tr>
       <th [attr.colspan]="cols" [ngClass]="['green']">Case List</th>
     </tr>
  </thead>
  <thead>
     <tr>
       <th [ngClass]="'center'">Case No.</th>
       <th [ngClass]="'center'">Case Title</th>
       <th [ngClass]="'center'">Party 1</th>
       <th [ngClass]="'center'">Party 2</th>
       <th [ngClass]="'center'">Status</th>
     </tr>
  </thead>
   <tbody>
     <tr *ngFor="let client of clients ; let i=index">
        <td [ngClass]="'center'">{{i+1}}</td>
        <td [ngClass]="'center'">{{client.title}}</td>
        <td [ngClass]="'center'">{{client.party1}}</td>
        <td [ngClass]="'center'">{{client.party2}}</td>
        <td [ngClass]="'center'">
          ****<div *ngIf="client.status == 'Active'" class="text-success">
                   {{client.status}}</div>
              <div *ngIf="client.status != 'Active'" class="text-danger">
                   {{client.status}}</div>
        </td>
      </tr>

   </tbody>
</table>

**** Here I put some conditions in the status field.

app.component.scss
      .blue{

          color:#037FC2;

      }

     .blue1{

          background:#037FC2;

          color:#fff;

      }

     .green{

         color:#079E32;

      }
     .fs-18{

         font-size:18px;

      }
     .collapse-none{

         border-collapse: unset !important;

         width:100%;

      }
app.component.ts
border: number=2;
cols: number=5;

clients = [
    { 'title':'case 1','party1':'Peter','party2':'Alisa','status':'Active' },
    { 'title':'case 2','party1':'Nik','party2':'Adam','status':'Active'},
    { 'title':'case 3','party1':'Rohit','party2':'Virat','status':'Active'},
    { 'title':'case 4','party1':'Steve','party2':'Smith','status':'Inactive'}
];

 

In my next blog, I’ll discuss another binding in Angular7.

 

Munmun Das Author
Web Designer , Openweb Solutions

Front-end Developer and Technology Enthusiast at Openweb Solutions

Posts created 11

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top
shares