Angular - Is it possible to dynamically add attributes on button click
I ran into a similar situation recently. I wanted to dynamically add and remove the capture
attribute on a FileInput. Now just the presence of the capture
attribute and the File Input will fall to capture mode, so having the value as null or '' did not work for me.
This is how I finally got it to work. I used @ViewChild
and ElementRef
. In your case it would be something like:
<div #yourContainer class="container">
<ul>
<li> Albums </li>
<li> Dates </li>
</ul>
</div>
<button (click)="addContainerAttributes"> Add Container Attributes </button>
Then in the TS
import { Component, ElementRef } from '@angular/core';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent {
@ViewChild('yourContainer', {static:true}) yourContainer: ElementRef;
....
addContainerAttributes(){
// Not entirely sure what to put here
this.yourContainer.nativeElement.setAttribute('phantomOp', myItems);
this.yourContainer.nativeElement.setAttribute('myOper', oper);
}
// if you wish to completely remove the attribute dynamically
removeContainerAttributes(){
this.yourContainer.nativeElement.removeAttribute('phantomOp');
this.yourContainer.nativeElement.removeAttribute('myOper');
}
}
Adding Angular specific markup added dynamically at runtime will just be ignored by Angular.
Bindings like [phantomOp]="myItems" [myOper]="oper"
are processed by Angular only when a component is compiled. Normally (with AoT) this is before you deploy your application.
How can I use/create dynamic template to compile dynamic Component with Angular 2.0? explains how to compile a component at runtime.
You can just introduce a field in your component
isClicked:boolean = false;
add this to your element statically
[phantomOp]="isClicked ? myItems : null" [myOper]="isClicked ? oper : null"
and in the click handler
(click)="isClicked=true"