title: Disable button on Parent Component if controls on Child Component haven't been selected
body: <p>My parent component has a next button that should be disabled till a user enters a value in any one of the controls that the child control has.  The child control has dropdown lists, a textbox, and a date calendar control. I was thinking of using an output emitter for each of these controls and the button would be enabled if any of the value changes.  However, I don't think it'll be that straightforward and I'm wondering if there's an easier way.</p>
  <p>Here is the less simplified code
  Parent component's html:</p>
  <pre><code>        &lt;ng-container [ngSwitch]=&quot;activeLayout&quot;&gt;
              &lt;ng-container *ngSwitchCase=&quot;repair&quot;&gt;
                  &lt;app-repair [functionTypeCode]=&quot;functionTypeCode&quot;&gt;&lt;/app-repair&gt;
              &lt;/ng-container&gt;
              &lt;ng-container *ngSwitchCase=&quot;confirm&quot;&gt;
                  &lt;app-confirm [actionSelected]=&quot;actionSelected&quot; [functionTypeCode]=&quot;functionTypeCode&quot;&gt;
                  &lt;/app-confirm&gt;
              &lt;/ng-container&gt;
          &lt;/ng-container&gt;
          &lt;ng-container [ngSwitch]=&quot;activeLayout&quot;&gt;
              &lt;ng-container *ngSwitchCase=&quot;repair&quot;&gt;
                  &lt;button class=&quot;btn btn-sm btn-outline-secondary&quot; style=&quot;height: 34px&quot; type=&quot;button&quot;&gt;Next&lt;/button&gt;
              &lt;/ng-container&gt;
          &lt;/ng-container&gt;
  </code></pre>
  <p>Child component's html:</p>
  <pre><code>    &lt;div class=&quot;row&quot; *ngIf=&quot;showIfUnit()&quot;&gt;
          &lt;div class=&quot;col&quot;&gt;
              &lt;app-dropdown placeholderLabel=&quot;Find Country Code...&quot; label=&quot;For Country Code&quot;
                  [(selected)]=&quot;selectedCountryValue&quot; [dropdownData]=&quot;countryList&quot;&gt;
              &lt;/app-dropdown&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col&quot;&gt;
              &lt;input matInput [(ngModel)]=&quot;selectedExec&quot; name=&quot;exec&quot; /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col&quot;&gt;
              &lt;mat-form-field&gt;
                  &lt;mat-label&gt;Order Date&lt;/mat-label&gt;
                  &lt;input matInput [matDatepicker]=&quot;pickerOrderDate&quot; [(ngModel)]=&quot;selectedOrderDate&quot;&gt;
                  &lt;mat-datepicker-toggle matSuffix [for]=&quot;pickerOrderDate&quot;&gt;&lt;/mat-datepicker-toggle&gt;
                  &lt;mat-datepicker #pickerOrderDate appendTo=&quot;body&quot;&gt;&lt;/mat-datepicker&gt;
              &lt;/mat-form-field&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>So if a value isn't selected in the dropdown list or nothing is entered into the textbox or the date hasn't been picked from the calendar control, the button on the parent should be disabled.  Once any of those are selected on the child component, the button should be enabled.</p>
  <p><strong>EDIT: Added ng-containers</strong></p>
  <p>Thanks!</p>