Angular - only render element attribute if it is defined

Question

Is it possible in Angular to only render an element attribute if it is defined?

If for example I have a button component

export class ButtonComponent {
  /** The name id to be given to the button */
  @Input() id: string;
  /** The name to be given to the button */
  @Input() name: string;
}

with a template of

<button 
        [id]="id"
        [name]="name"
        >
    <ng-content></ng-content>
</button>

and if I pass it an id but not a name it renders a name attribute with a value of undefined.

<button _ngcontent-c1="" id="login" name="undefined">
    Login
</button>

Is it possible to not render the name attribute at all if the name input is not supplied like below?

<button _ngcontent-c1="" id="login">
    Login
</button>

yurzui · Accepted Answer · 2018-01-23 10:49:44Z

3

In case of attribute binding angular won't render attribute if we pass null or undefined to it. So your solution could look like:

[attr.name]="name"

answered Jan 23, 2018 at 10:49

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - only render element attribute if it is defined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related