this method in angular 2 component. use typescript write angular 2 modules. code shown below - using jquery access dom level. practice in angular 2 ? can please describe trade offs of using jquery inside angular 2. alternate way achieve code snippet. code example appreciable , noob angular 2 developer :)
declare var $:any; showhidepreviousbutton() { if($('#analysistabs').find('ul.nav-tabs > .active').prev('li').length < 1) { $('.prev-btn').hide(); } else { $('.prev-btn').show(); } } i doing dynamic tab creation in angular 2 project . here code hiding "previous button" if there 1 tab, , shows if there more 1 tab.
direct dom access discouraged in angular2 because might prevent utilizing angulars webworker , server-side rendering features.
it working against angulars approach in general. code should modify model (or controller state) , angular dom update depending on model.
i don't know code example tries accomplish guess like
@component({ selector: '...', template: ` <button [hidden]="tabs.length <= 1" (click)="prev()">prev</button><button (click)="next()">next</button> <my-tab *ngfor="let tab of tabs" [hidden]="tab !== selectedtab" [class.active]="tab !== selectedtab">{{tab}}</my-tab>` }) export class mycomponent { tabs = ['tab1', 'tab2', 'tab3']; selectedtab; constructor() { this.selectedtab = tabs[0]; } prev() { var curr = this.tabs.indexof(this.selectedtab); if(curr > 0) this.selectedtab = this.tabs[curr -1]; } next() { var curr = this.tabs.indexof(this.selectedtab); if(curr < this.tabs.lenght - 1) this.selectedtab = this.tabs[curr +1]; } } 