Enlace de propiedad en angular 8

El enlace de propiedad es una técnica de enlace de datos unidireccional . En el enlace de propiedad, enlazamos una propiedad de un elemento DOM a un campo que es una propiedad definida en nuestro código TypeScript componente. En realidad, Angular convierte internamente la interpolación de strings en un enlace de propiedad.

En esto, vinculamos la propiedad de un elemento definido a un elemento HTML DOM.

Sintaxis:

<element [property]= 'typescript_property'>

Acercarse:

• Defina un elemento de propiedad en el archivo app.component.ts.
• En el archivo app.component.html, establezca la propiedad del elemento HTML asignando el valor de la propiedad al elemento del archivo app.component.ts.

Ejemplo 1: establecer el valor de un elemento de entrada mediante el enlace de propiedades.

aplicación.componente.html

<input style = "color:green;
                margin-top: 40px; 
                margin-left: 100px;" 
[value]='title'>

aplicación.componente.ts

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

Producción:

Ejemplo 2: obtener la fuente de la imagen mediante el enlace de propiedad.

aplicación.componente.html

<img [src]='src'>

aplicación.componente.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'; 
}

Producción:

Ejemplo 3: deshabilitar un botón usando el enlace de propiedades.

aplicación.componente.html

<button [disabled]='bool' style="margin-top: 20px;">GeekyButton</button>

aplicación.componente.ts

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

Producción: