I have created a custom component with search dropdown functionality for selecting dates.
<div class="search-dropdown calender-dropdown ">
<div class="search-dropdown-tabs-wrp">
<ul class="search-dropdown-tabs">
<li>
<a class="search-dropdown-tabs-active">Today</a>
</li>
<li>
<a>Tomorrow</a>
</li>
<li>
<a>This weekend</a>
</li>
<li>
<a>This week</a>
</li>
<li>
<a>Next week</a>
</li>
<li>
<a>This month</a>
</li>
</ul>
</div>
<div class="tab-content-area">
<ul class="tab-content-area-active">
<div class="row">
this is the first tab
</div>
</ul>
</div>
</div>
component.ts
import { Component, Output,EventEmitter} from '@angular/core';
@Component({
moduleId:module.id,
selector: 'calendar',
templateUrl: './calendar.component.html'
})
export class CalendarComponent{
@Output() onDatePicked: EventEmitter<any> = new EventEmitter<any>();
public fromDate:Date = new Date();
public toDate:Date = new Date();
public closed : boolean;
private events:Array<any>;
private tomorrow:Date;
dates = { startDate: this.fromDate, endDate: this.toDate , closed : this.closed};
private afterTomorrow:Date;
private formats:Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate'];
private format = this.formats[0];
private dateOptions:any = {
formatYear: 'YY',
startingDay: 1
};
private opened:boolean = false;
public pickDate( ): void {
this.dates = { startDate: this.fromDate, endDate: this.toDate , closed : false};
this.onDatePicked.emit(this.dates);
}
public closeComponent() : void{
this.dates.closed = true;
}
Is there a way to activate the 2nd tab content when Tomorrow is clicked?