CODEWITHSUNDEEP
angularangular5angular6
Jijo Robin
Jijo Robin

Reputation: 385

get data from a particular item on clicking

I have a list of items stored in an array named "permissions" and the data is like this pic

When i click on the particular item i want only the particular items data to be displayed.

component.html

<a class="selected"  (click)="displayPermission()">click</a>

component.ts

displayPermission(){
//what will be the logic inside here;
console.log(logic needed); 
}

Upvotes: 0

Views: 1827

Answers (3)

Vinaayakh
Vinaayakh

Reputation: 522

component.html

<ng-container *ngFor="let item of permissions">
    <a class="selected"  (click)="displayPermission(item)">click</a>    
    <ng-container *ngIf="item.open">
        <!-- html for item details -->
        <p>{{item.group_id}}<p>
    </ng-container>
</ng-container>

component.ts

displayPermission(item){
    item.open = !item.open;
}

Upvotes: 1

Sarthak Aggarwal
Sarthak Aggarwal

Reputation: 2312

You can display the data in .html using *ngFor directive which will iterate over your list of items on whose click you can call a function with the index of that particular item in array.

.component.html

permissions = [{},{},{}] 

showData(index){
  // Do anything with the selected item
  console.log(permissions[index]);
}

.component.html

<div *ngFor="let p of permissions;let i = index">
  <button (click)="showData(i)">Permission {{i}}</button>
</div>

Upvotes: 1

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

try this

template

<div *ngFor="let item of items">
  <a class="selected"  (click)="displayPermission(item)">click</a>
</div>

componenet

displayPermission(data){
  consolelog(data);
  console.log(logic needed); 
}

Upvotes: 1

Related Questions