Angular pass onclick value

Question

I have on array of years links like this:

<div class="header-years-container default-color">
              <a class="years-items"  *ngFor="let year of yearsLink;" [ngClass]="{'active': selectedYear === year}" (click)="onSelectYear($event.target.innerText)">
                  {{ year }}
                </a>
            </div>

and one property that show data for selectedYear. In ngOnInit method I set default value from array but I want to pass other value of year when user click on that. In Typescript looks this:

ngOnInit() {
    this.yearsLink = [...new Set(this.absenceWidgetService.getAbsencesData().map(item => item.year))];
    this.selectedYear = this.yearsLink[0];


    this.selectedYear = this.onSelectYear(this.selectedYear);
    this.absences = this.absenceWidgetService.getAbsencesData(this.selectedYear)
  }

onSelectYear(value): string {
    return this.selectedYear = value;
  }

How can I pass each time correct value for selectedYear in getAbsenceData method when user do click event ? Currently I always have default value..

Thanks.

zwango · Accepted Answer · 2018-11-26 14:30:06Z

1

Have you tried it like this yet?

HTML:

<div class="header-years-container default-color">
    <a class="years-items"  *ngFor="let year of yearsLink;" [ngClass]="{'active': selectedYear === year}" (click)="onSelectYear(year)">
        {{ year }}
    </a>
</div>

TS:

onSelectYear(year) {
    this.selectedYear = year;
}

answered Nov 26, 2018 at 14:30

zwango

132 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brijesh Borad · Accepted Answer · 2018-11-26 11:37:46Z

0

You don't need to use $event, You can directly pass year as an argument in function

<div class="header-years-container default-color">
     <a class="years-items"  *ngFor="let year of yearsLink;" [ngClass]="{'active': selectedYear === year}" 
     (click)="onSelectYear(year)">{{ year }}</a>
</div>

answered Nov 26, 2018 at 11:37

Brijesh Borad

17710 bronze badges

1 Comment

redux17 Over a year ago

It' does not metter.the same thing..don't pass a new value selectedYear only default.

redux17 · Accepted Answer · 2018-11-26 15:23:11Z

0

I've resolved issue when I moved data source property fill in event method. There is default value in ngOnInit() for this property and for each click event pass a new value.

It looks like this:

ngOnInit() {
    this.yearsLink = [...new Set(this.absenceWidgetService.getAbsencesData().map(item => item.year))];
    this.selectedYear = this.yearsLink[0];

    this.absences = this.absenceWidgetService.getAbsencesData(this.selectedYear)
  }

onSelectYear(year) {
    this.selectedYear = year;
    this.absences = this.absenceWidgetService.getAbsencesData(this.selectedYear);
  }

answered Nov 26, 2018 at 15:23

redux17

6855 gold badges11 silver badges33 bronze badges

Collectives™ on Stack Overflow

Angular pass onclick value

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related