¿Cómo agregar un atributo condicional en Angular 2?

¿Cómo puedo agregar condicionalmente un atributo de elemento, por ejemplo, el checkedde una casilla de verificación?

Las versiones anteriores de Angular tenían NgAttry creo NgCheckedque todas parecen proporcionar la funcionalidad que busco. Sin embargo, estos atributos no parecen existir en Angular 2 y no veo otra forma de proporcionar esta funcionalidad.

null lo quita:

[attr.checked]="value ? '' : null"

o

[attr.checked]="value ? 'checked' : null"

Insinuación:

Atributo vs propiedad

Cuando el elemento HTML donde agrega este enlace no tiene una propiedad con el nombre utilizado en el enlace ( checkeden este caso) y tampoco se aplica ningún componente angular o directiva al mismo elemento que tiene un @Input() checked;, entonces [xxx]="..."no se puede usar.

Consulte también ¿Cuál es la diferencia entre propiedades y atributos en HTML?

A qué unirse cuando no existe tal propiedad

Las alternativas son [style.xxx]="...", [attr.xxx]="...", [class.xxx]="..."dependiendo de lo que intenta lograr.

Porque <input>solo tiene un checkedatributo, pero ninguna checkedpropiedad [attr.checked]="..."es la forma correcta para este caso específico.

Los atributos solo pueden manejar valores de cadena

Una trampa común también es que para los [attr.xxx]="..."enlaces el valor ( ...) siempre está en cadena. Solo las propiedades @Input()ys pueden recibir otros tipos de valores como booleano, número, objeto, ...

La mayoría de las propiedades y atributos de los elementos están conectados y tienen el mismo nombre.

Conexión de propiedad-atributo

Cuando está vinculada al atributo, la propiedad solo recibe el valor en cadena del atributo.
Cuando se vincula a la propiedad, la propiedad recibe el valor vinculado a ella (booleano, número, objeto, ...) y el atributo nuevamente el valor en cadena.

Dos casos en los que los nombres de atributos y propiedades no coinciden.

• Error al agregar el atributo "for" a la etiqueta en la plantilla angular 2.0

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor (vea la primera oración de la descripción htmlFor property reflects the value of the for, forprobablemente no funcionó porque es una palabra clave en C o JavaScript)

• ¿Por qué colspan no es un atributo nativo conocido en Angular 2?

Angular se modificó desde entonces y conoce estos casos especiales y los maneja para que pueda vincularlos <label [for]="aunque no exista dicha propiedad (lo mismo para colspan)

en la sintaxis del atributo angular-2 es

<div [attr.role]="myAriaRole">

Vincula el rol de atributo al resultado de la expresión myAriaRole.

así que puede usar como

[attr.role]="myAriaRole ? true: null"

Refinando la respuesta de Günter Zöchbauer:

Esto parece ser diferente ahora. Estaba tratando de hacer esto para aplicar condicionalmente un atributo href a una etiqueta de anclaje. Debe usar undefined para el caso 'no aplicar'. Como ejemplo, demostraré con un enlace que tiene un atributo href aplicado condicionalmente.

Una etiqueta de anclaje sin un atributo href se convierte en texto sin formato, lo que indica un marcador de posición para un enlace, según la especificación del hipervínculo .

Para mi navegación, tengo una lista de enlaces, pero uno de esos enlaces representa la página actual. No quería que el enlace de la página actual fuera un enlace, pero todavía quiero que aparezca en la lista (tiene algunos estilos personalizados, pero este ejemplo está simplificado).

<a [attr.href]="currentUrl !== link.url ? link.url : undefined">

Esto es más limpio que usar dos * ngIf en una etiqueta de intervalo y ancla, creo.

Si es un elemento de entrada, puede escribir algo como ... <input type="radio" [checked]="condition">El valor de la condición debe ser verdadero o falso.

También para atributos de estilo ... <h4 [style.color]="'red'">Some text</h4>

Puedes usar esto.

<span [attr.checked]="val? true : false"> </span>

Puede utilizar un mejor enfoque para alguien que escriba HTML para un scss ya existente.
html

[attr.role]="<boolean>"

scss

[role = "true"] { ... }

De esa manera no es necesario <boolean> ? true : nullcada vez.

Aquí, el párrafo se imprime solo 'isValid' es verdadero / contiene cualquier valor

<p *ngIf="isValid ? true : false">Paragraph</p>

Quería tener información sobre herramientas solo para un campo en particular, como se agrega a continuación en el código, pero desea tener información sobre herramientas en múltiples, puede tener una matriz validar usando:

Elementos múltiples que tienen un atributo personalizado de información sobre herramientas :

1: [ 'key1ToHaveTooltip', `key2ToHaveTooltip ']. Incluye (clave)

2: ['key1ToHaveTooltip', 'key2ToHaveTooltip']. IndexOf (clave)> -1

tener un atributo de información sobre herramientas en más de 1 elemento.

   <div *ngFor="let key of Keys"
             [attr.data-tooltip]="key === 'IwantOnlyThisKeyToHaveTooltipAttribute' 
                                           ? 'Hey! I am a tooltip on key matched'
                                           : null">
   </div>

Los mapas en línea también son útiles.

También son un poco más explícitos y legibles.

[class]="{ 'true': 'active', 'false': 'inactive', 'true&false': 'some-other-class' }[ trinaryBoolean ]"

Solo otra forma de lograr lo mismo, en caso de que no le guste la sintaxis ternaria o ngIfs (etc.).