import {Component, Input, Output, EventEmitter, OnInit, AfterContentInit} from 'angular2/core';
import {FORM_DIRECTIVES, NgFor} from 'angular2/common';
import {MenuService} from './menu.service';
import {OrderByPipe} from '../shared/pipes/OrderBy';
declare var $: any;
@Component({
selector: 'category',
directives: [FORM_DIRECTIVES, NgFor],
providers: [
MenuService
],
pipes: [OrderByPipe],
template: `
<div class="category-list" data-spy="affix" data-offset-top="20" id="nav2">
<span class="category-list-item" *ngFor="#item of items | orderBy :['sort_order']"
(click)="change(item)"
[ngClass]="{'active':item.active}">
<a id="elementID">{{item.name}}</a>
</span>
</div>
`
})
export class CategoryComponent implements OnInit, AfterContentInit {
@Input() items:any;
@Output('change') changeEmitter: EventEmitter<any> = new EventEmitter();
change(item:any): void {
this.items.map((o:any)=> { o.active=false;});
item.active = true;
this.changeEmitter.emit(item);
$('html, body').animate({
scrollTop: 0// $('#elementID').offset().top + 200
}, 300);
}
ngOnInit() {
// this.items.map((o:Object)=> { o.active=false;});
// this.items[0].active=true;
$('#nav2').affix({
offset: { top: 100 }
});
}
ngAfterContentInit() {
// Component content has been initialized
// console.log(this.items);
}
}
[![current behavior of nav link][1]][1]
https://i.sstatic.net/0ptLy.png
I am utilizing Angular 2 for my product listing page. I have successfully implemented a feature to change the background color of a link after clicking on it. However, I am facing an issue regarding the default active state of the first link when the page is initially loaded.