title: ng-bootstrap DatePicker set startDate and minDate on trigger Angular 4
body: <p>So, I'm using ng-bootstrap DatePicker, and have two forms, startDate and endDate
  I need to be able to do 2 things with this:</p>
  
  <ul>
  <li>when render the "create page" put today's date on startDate, if render "edit page", put the date from the backend..</li>
  <li>when selected the startDate, trigger the minDate attribute to be the selected startDate</li>
  </ul>
  
  <p>Here's how I'm trying to do(with hardcode now, not getting the data from the backend)</p>
  
  <pre><code>export class ProgramFormComponent {
    startDate: NgbDateStruct;
    endDate: NgbDateStruct;
    minEndDate: NgbDateStruct;
  
    programInput = {
      'viewType' : 'Create',
      'programTitle' : '',
      'programDescription' : '',
      'programOwner' : [
          ''
        ],
      'changepointID' : '',
      'startDate' : this.startDate,
      'endDate' : this.endDate,
      'minDate' : this.minEndDate
    }
  
    programInputEdit = {
      'viewType' : 'Edit',
      'programTitle' : 'Test Title',
      'programDescription' : 'Test Description',
      'programOwner' : [
          'Test Owner 1',
          'Test Owner 2',
          'Test Owner 3',
        ],
      'changepointID' : 'ID',
      'startDate' : this.startDate,
      'endDate' : this.endDate,
      'minDate' : this.minEndDate
    }
  
    constructor(private modalService: NgbModal) {
      if (this.programInput['viewType'] === 'Create') {
          this.selectToday();
      } else {
          this.startDate = {year: 2017, month: 7, day: 1};
          this.endDate = {year: 2017, month: 12, day: 2};
      }
    }
  
    open(content) {
      this.modalService.open(content, { windowClass: 'dark-modal' });
    }
  
    selectToday() {
      this.startDate = {year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()};
    }
  
    limitEndDate() {
      this.minEndDate = this.startDate;
    }
  
  &lt;form&gt;
  &lt;div class="form-group"&gt;
              &lt;label for="startDate" class="control-label"&gt;Start Date&lt;/label&gt;
              &lt;div class="input-group"&gt;
                  &lt;input class="form-control" placeholder="yyyy-mm-dd"
                       name="startDate" [(ngModel)]="programInput.startDate" ngbDatepicker #s="ngbDatepicker" firstDayOfTheWeek=1 [startDate]="programInput.startDate"&gt;
                  &lt;div class="input-group-addon" (click)="s.toggle()" &gt;
                      &lt;i class="fa fa-calendar" aria-hidden="true"&gt;&lt;/i&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label for="startDate" class="control-label"&gt;End Date&lt;/label&gt;
              &lt;div class="input-group"&gt;
                  &lt;input class="form-control" placeholder="yyyy-mm-dd"
                       name="startDate" [(ngModel)]="programInput.endDate" ngbDatepicker #e="ngbDatepicker" [minDate]="programInput.minEndDate"&gt;
                  &lt;div class="input-group-addon" (click)="e.toggle()" &gt;
                      &lt;i class="fa fa-calendar" aria-hidden="true"&gt;&lt;/i&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>also, if someone know how to do it, I want the popup display of the calendar to be on the direction of the top of the page, not the bottom...didn't find any attribute to set this.</p>