angular7:- one component into two siblings component

Question

I have one angular component, which shows angular-calendar on monthly basis(Jan/2019, feb,2019...). I am showing 6 months and also have navigation buttons to move the calendar months back and forth. First I created one component and implemented all the logic there. but I need to create separate component for angular-calendar and separate component for navigation buttons. here is the stackblitz of working example:- https://stackblitz.com/edit/ang-c-p-7qundm

<!--code for navigation-->
   <div class="display-calendar">
    <button class="btn btn-sm btn-primary" (click)="getNextData()">Click next</button>

    <button class="btn btn-sm btn-primary" (click)="getPreviousData()">Click previous </button>
  </div>
<!--code for calendar months-->
      <div class="row-items"  *ngFor="let month of months">
        <mat-calendar [dateClass]="dateClass()" [startAt]="month" [selected]="selectedDate"
          (selectedChange)="onSelect($event)"></mat-calendar>
      </div>

Ts code

 ngOnInit() {
      this.getMonths(this.year, this.month);
    }
  //show calendar in months
    getMonths(year:number, month:number) { 
    this.months = [];
      for (let i = 0; i < 6; i++) {
        this.months.push(new Date(year, month++));
      }
    }
  //navigation for next Month
    getNextData() {
     if(this.curMonth+1 > this.month && this.curYear+1 >= this.year){
       this.month++
     }
     this.getMonths(this.year, this.month); 
    }
  //Navigation for previous Months
    getPreviousData(){
     if(this.curMonth-12 < this.month){
       this.month--
     }
     this.getMonths(this.year, this.month);
    }

I was thinking to do with services or input method. But I am confused.

this.getMonths(this.year, this.month);

this method need to be call in navigation component as well as in calendar component

score 2 · Accepted Answer · answered Dec 02 '19 at 14:55

2

imagine you has

<navigation-control [calendar]="calendar"></navigation-control>
<multiple-calendar #calendar></multiple-calendar #calendar>

From navigation control you can

@Input() calendar:any
next()
{
   this.calendar.month++;
   //or this.calendar.next()
}
prev()
{
   this.calendar.month--;
   //or this.calendar.prev()

}

It's only a idea

answered Dec 02 '19 at 14:55

Eliseo

50,109
4
29
67

Still confused, how can i call next() and prev() on HTML side. I meant on click, how code will know its next method or prev method – developer Dec 02 '19 at 15:03
can , calendar be a function , calendar(){..}? – developer Dec 02 '19 at 15:10
You pass as input the "calendar", that's, the component "multiple-calendar", so you can use all the public variables or all the public functions of this component. I imagined your "navigation-calendar" has two buttons that call to functions of navigation-calendar.ts, from this .ts you can call the funcitons or variables of the other component – Eliseo Dec 02 '19 at 15:23
Like child1.ts:=> calndaer(){....} child2:=> this.calndaer() ??? – developer Dec 02 '19 at 15:25

angular7:- one component into two siblings component

1 Answers1