Is there a way to send a Bootstrap Datepicker value from one component to another?

Posted on by

I’m using Bootrap on my Angular Application and it is divided like this

This is my Datepicker.html file

<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <input class="form-control" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
      </div>
    </div>
  </div>
</form>

This is my Datepicker.ts file

import { Component, OnInit } from '@angular/core';
import {NgbDateStruct, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-datepicker-basic',
  templateUrl: './datepicker.component.html',
  styleUrls: ['./datepicker.component.css']
})
export class DatepickerComponent implements OnInit {
  model: NgbDateStruct;
  date: {year: number, month: number};
  constructor(private calendar: NgbCalendar) {
  }
  selectToday() {
    this.model = this.calendar.getToday();
  }
  ngOnInit(): void {
  }

}

And my goal is to get the selected date from my datepicker component and send it of to my dayoverview component

Dayoverview.ts

import { Component, OnInit } from '@angular/core';
import { ɵangular_packages_core_testing_testing_a } from '@angular/core/testing';
import { PATIENTS } from './dummypatientdata';
@Component({
  selector: 'app-dayoverview',
  templateUrl: './dayoverview.component.html',
  styleUrls: ['./dayoverview.component.css']
})
export class DayoverviewComponent implements OnInit {
patients = PATIENTS;
  constructor() { }

  ngOnInit(): void {
  }

}

The Datepicker is an child component of the day overview.

Source: Angular Questions