I want pass the variable element obtained when the click event is trigerred in 'a' tag to the below component 'clr-modal'. I cant take that as input in 'clr-modal' component because I cant edit it. I need some hack so that i can do it html itself or any hack to do it apart from passing it as input to the nested component.
My code:
`<div class="card-block">
<ul *ngFor="let element of inprogArr; trackBy: elementFn" class="list">
<li>
<a (click)="opened=true; setval(element);">{{element.entry}}</a>
<clr-modal [(clrModalOpen)]="opened">
<h3 class="modal-title">{{element.entry}}</h3>
<div class="modal-body">
<p>Description : {{element.entryDesc}}</p>
<br>
</div>
<div class="modal-footer">
<button (click)="moveInOn(element); opened=false;" type="submit" class="btn btn-sm" >Move to Ongoing</button>
<button (click)="moveInCo(element); opened=false;" type="submit" class="btn btn-sm">Move to Completed</button>
</div>
</clr-modal>
</li>
</ul>
</div>`
There is no need to pass the element to the modal component. Because the clr-modal
is making use of ng-content
you are able to just reference the elements that exist in your current component. You should update your view to just define the modal once and then use a single property to hold the data of the currently opened modal like so:
<div class="card-block">
<ul *ngFor="let element of inprogArr; trackBy: elementFn" class="list">
<li>
<a (click)="opened=true; setval(element); modalElement = element">{{element.entry}}</a>
</li>
</ul>
<clr-modal [(clrModalOpen)]="opened">
<h3 class="modal-title">{{modalElement?.entry}}</h3>
<div class="modal-body">
<p>Description : {{modalElement?.entryDesc}}</p>
<br>
</div>
<div class="modal-footer">
<button (click)="moveInOn(modalElement); opened=false;" type="submit" class="btn btn-sm">Move to Ongoing</button>
<button (click)="moveInCo(modalElement); opened=false;" type="submit" class="btn btn-sm">Move to Completed</button>
</div>
</clr-modal>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.