角度8中的属性绑定

属性绑定是一种单向数据绑定技术。在属性绑定中，我们将DOM元素的属性绑定到字段，该字段是组件TypeScript代码中的已定义属性。实际上，Angular在内部将字符串插值转换为属性绑定。

在此，我们将已定义元素的属性绑定到HTML DOM元素。

句法：

方法：

• 在app.component.ts文件中定义属性元素。
• 在app.component.html文件中，通过将属性值分配给app.component.ts文件的元素来设置HTML元素的属性。

示例1：使用属性绑定设置输入元素的值。

app.component.html

app.component.ts

import { Component } from '@angular/core';    
@Component({    
  selector: 'app-root',    
  templateUrl: './app.component.html',    
  styleUrls: ['./app.component.css']    
})    
export class AppComponent {   
  title = 'GeeksforGeeks'; 
}

输出：

示例2：使用属性绑定获取图像源。

app.component.html

app.component.ts

import { Component } from '@angular/core';    
@Component({    
  selector: 'app-root',    
  templateUrl: './app.component.html',    
  styleUrls: ['./app.component.css']    
})    
export class AppComponent {   
  src = 'https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png'; 
}

输出：

示例3：使用属性绑定禁用按钮。

app.component.html

GeekyButton

app.component.ts

import { Component } from '@angular/core';    
@Component({    
  selector: 'app-root',    
  templateUrl: './app.component.html',    
  styleUrls: ['./app.component.css']    
})    
export class AppComponent {   
  bool = 'true'; 
}

输出：