CODEWITHSUNDEEP
htmlangular
Edward
Edward

Reputation: 30056

Angular dynamic value for href in div

I am trying to implement dynamic submenu by Angular.

Currently, I set href by hardcode like below:

<ng-template #preSelectionMenuItem let-preSelections="preSelections">
    <div class='panel-body'>
        <ul class='project-tree-menu__panel-list' [attr.data-guid]="menuGuid">
            <li *ngFor="let preSelection of preSelections">
                <div class='panel-group'>
                    <div *ngIf="preSelection.subPreSelectionDtos.length>0" class='panel panel-primary'>
                        <div class='panel-heading collapsed panel-title estimate-panel-list__title' data-toggle='collapse'
                           href="#1"
                            >
                            {{ preSelection.text | translate}}
                        </div>
                        <div id="1" class='estimate-panel panel-collapse collapse'>
                            <ng-container *ngTemplateOutlet='preSelectionMenuItem;context:{preSelections:preSelection.subPreSelectionDtos}'></ng-container>
                        </div>
                    </div>
                    <div *ngIf="preSelection.subPreSelectionDtos.length==0" class='panel panel-primary'>
                        <div class='estimate-panel-list__option project-tree-menu__item'
                           href="#1"
                            >
                            {{ preSelection.text | translate}}
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</ng-template>

Actually, the value #1 should be the preSelection.text which will be able to make sure referrence the correct subitems.

But If I change #1 to href="#{{preSelection.text}}", it will throw

Can't bind to 'href' since it isn't a known property of 'div'

Current UI enter image description here

Upvotes: 1

Views: 816

Answers (1)

GRD
GRD

Reputation: 206

you can do like this..

<div
  style="margin:0.5em;"
  *ngFor="let preSelection of preSelections; let i = index">
 <div>
   <div
    (click)="onSubmenuClick(i)"
      style="background-color:'gray'; color:'white'; cursor:'pointer' ">
    <span> {{ preSelection.text }} </span>
    <span> + </span>
   </div>
   <ng-container *ngIf="clickedMenu === i">
     <div *ngFor="let subMenu of preSelection.childMenu">
       <div>{{ subMenu.menuText }}</div>
     </div>
   </ng-container>
  </div>
</div>

and inside your component like this.. clickedMenu; onSubmenuClick(index: number) {

  if (this.clickedMenu === index) {
    this.clickedMenu = null;
  } else {
   this.clickedMenu = index;
  }
}

Let me know if it works for you or not. Thanks!

Working demo in this link Stackblitz

Upvotes: 1

Related Questions