Angular pass name of label

Question

<div class="content">
  <md-tab-group>
    <md-tab label="label1" (click)="passSourceOfDocuments()">
      <details *ngFor="let package of documentPackages">
        <summary>{{package.documentPackageGuid}}</summary>
        <ul>
          <details *ngFor="let doc of package.Documents">
            <summary>{{doc.documentGuid}}</summary>
              ..........
          </details>
        </ul>
      </details>
    </md-tab>
    <md-tab label="label2" (click)="passSourceOfDocuments()">
      <details *ngFor="let doc of emaildocuments">
             ......................
      </details>
    </md-tab>
  </md-tab-group>
</div>

I would pass name of label in function "passSourceOfDocuments()" it is possible ? Can I bind this label with property in .ts file ?

Do you want to acces it's value or the element itself? – Vega Sep 20 '17 at 13:29 — Vega, Sep 20 '17 at 13:29
@Vega I want have acces only to label value – Walter White Sep 20 '17 at 13:32 — Walter White, Sep 20 '17 at 13:32

score 4 · Accepted Answer · answered Sep 20 '17 at 13:29

4

If you can add a 'template reference variable' to each of your <md-tab> elements, then you could refer to them in the function like this,

<md-tab #tab1 label="label1" (click)="passSourceOfDocuments(tab1.textLabel)">
<md-tab #tab2 label="label2" (click)="passSourceOfDocuments(tab2.textLabel)">

Or if you have an array of labels declared as a property in the component file, then you can add them by index or some similar means,

component

labelsArr = ['label1', 'label2', 'label3'];

template

<md-tab [label]="labelsArr[0]" (click)="passSourceOfDocuments(labelsArr[0])">
<md-tab [label]="labelsArr[1]" (click)="passSourceOfDocuments(labelsArr[1])">

answered Sep 20 '17 at 13:29

amal

3,140
1
13
20

it's looks nice but when i click on tab function don't execute in .ts file i use passSourceOfDocuments(info:any) { console.log(info); } – Walter White Sep 20 '17 at 13:40
are you using the first approach? If so, are you able to see if the method is being executed at all when clicked on a md-tab? – amal Sep 20 '17 at 13:42
@amal i change event and place now i use it's work – Walter White Sep 20 '17 at 13:46
Okay, makes sense. – amal Sep 20 '17 at 13:47
@user370486 https://stackoverflow.com/questions/42059151/angular-2-how-to-watch-for-tab-changes/42059318 maybe this help – Walter White Sep 20 '17 at 13:49

Angular pass name of label

1 Answers1