title: Custom button with downgrade to angularjs creates nested button (button is nested in new Angular)
body: <p>I have this custom button:</p>
  <p>Html template:</p>
  <pre><code>&lt;button mat-button
          [color]=&quot;color&quot;
          (cbClick)=&quot;onClick($event)&quot;
          [disabled]=&quot;disabled&quot;
          [ngClass]=&quot;isStroked ? 'mat-stroked-button' : 'mat-raised-button'&quot;&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/button&gt;
  </code></pre>
  <p>Typescript:</p>
  <pre><code>@Component({
      selector: 'cb-button',
      templateUrl: './button.component.html',
      styleUrls: ['./button.component.scss']
  })
  export class ButtonComponent {
      /**
       * Warning - calling this &quot;click&quot; causes bug due to naming conflict
       */
      @Output() public readonly clicked = new EventEmitter&lt;boolean&gt;();
      @Output() public readonly popupClick = new EventEmitter();
      @Input() public color = 'primary';
      @Input() public disabled = false;
      @Input() public isStroked = false;
      @Input() public popup?: Popup;
  
      constructor() { }
  
      public readonly onClick = (event: MouseEvent): void =&gt; {
          this.clicked.emit(true);
      };
  
      public readonly onPopupClick = (event: MouseEvent): void =&gt;{
          this.popupClick?.emit(event);
      };
  }
  </code></pre>
  <p>using it:</p>
  <pre><code>        &lt;span fxFlex&gt;&lt;/span&gt;
          &lt;cb-button class=&quot;cb-margin&quot;
                     (clicked)=&quot;generateUserSecurityReport()&quot;&gt;
              User Security Report
          &lt;/cb-button&gt;
  </code></pre>
  <p>For some reason in one area of my app, but not in other areas, it is displaying with 2 buttons. When I remove <code>&lt;ng-content&gt;</code> it doesn't create 2 buttons:</p>
  <p><a href="https://i.stack.imgur.com/cxPkJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cxPkJ.png" alt="enter image description here" /></a></p>
  <p>Why is it nesting a second button in some scenarios?</p>
  <p>EDIT:</p>
  <p>HTML produced:</p>
  <pre><code>&lt;cb-button _ngcontent-wwl-c684=&quot;&quot; class=&quot;cb-margin&quot; _nghost-wwl-c681=&quot;&quot; ng-version=&quot;11.0.7&quot;&gt;
      &lt;button _ngcontent-wwl-c681=&quot;&quot; mat-button=&quot;&quot; class=&quot;mat-focus-indicator mat-button mat-button-base mat-primary mat-raised-button&quot; ng-reflect-color=&quot;primary&quot; ng-reflect-disabled=&quot;false&quot; ng-reflect-ng-class=&quot;mat-raised-button&quot;&gt;
          &lt;span class=&quot;mat-button-wrapper&quot;&gt;
              &lt;button
                  _ngcontent-wwl-c681=&quot;&quot;
                  mat-button=&quot;&quot;
                  class=&quot;mat-focus-indicator mat-button mat-button-base mat-primary mat-raised-button ng-scope&quot;
                  ng-reflect-color=&quot;primary&quot;
                  ng-reflect-disabled=&quot;false&quot;
                  ng-reflect-ng-class=&quot;mat-raised-button&quot;
              &gt;
                  &lt;span class=&quot;mat-button-wrapper&quot;&gt; User Security Report &lt;/span&gt;
                  &lt;span matripple=&quot;&quot; class=&quot;mat-ripple mat-button-ripple&quot; ng-reflect-disabled=&quot;false&quot; ng-reflect-centered=&quot;false&quot; ng-reflect-trigger=&quot;[object HTMLButtonElement]&quot;&gt;&lt;/span&gt;&lt;span class=&quot;mat-button-focus-overlay&quot;&gt;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/span&gt;
          &lt;span matripple=&quot;&quot; class=&quot;mat-ripple mat-button-ripple&quot; ng-reflect-disabled=&quot;false&quot; ng-reflect-centered=&quot;false&quot; ng-reflect-trigger=&quot;[object HTMLButtonElement]&quot;&gt;&lt;/span&gt;&lt;span class=&quot;mat-button-focus-overlay&quot;&gt;&lt;/span&gt;
      &lt;/button&gt;
  &lt;/cb-button&gt;
  </code></pre>
  <p>EDIT:</p>
  <p>When i remove the <em><strong>downgrade</strong></em> decorator from the module it works as expected:</p>
  <pre><code>@NgModule({
      declarations: ButtonComponent,
      imports: [
          CommonModule,
          FlexLayoutModule,
          MatIconModule,
          MatButtonModule,
          CbPopupTipModule,
          CbClickModule
      ],
      exports: ButtonComponent
  })
  @CbDowngrades({
      components: [
          { selector: 'cb-button', component: ButtonComponent }
      ]
  })
  export class CbButtonModule { }
  </code></pre>
  <p>The code used to do the downgrade:</p>
  <pre><code>import { downgradeComponent, downgradeInjectable } from '@angular/upgrade/static';
  import { ClassCtor } from '../types/classctor.type';
  import { NGJS_APP_NAME } from '../declarations/app.constants';
  import { kebabCaseToCamelCase } from 'cb-hub-lib';
  
  const DOWNGRADE_MODULE = angular.module(NGJS_APP_NAME);
  
  function cbDowngradeComponent(ngJsSelector: string, componentClass: ClassCtor): void {
      DOWNGRADE_MODULE
          .directive(
              ngJsSelector,
              downgradeComponent({ component: componentClass })
          );
  }
  
  function cbDowngradeInjectable(ngJsInjectionToken: string, injectableClass: ClassCtor): void {
      DOWNGRADE_MODULE
          .factory(ngJsInjectionToken, downgradeInjectable(injectableClass));
  }
  
  function cbDowngradeComponents(components: CbDowngradeComponent[] = []): void {
      components.forEach((component) =&gt; {
          const camelCaseSelector = kebabCaseToCamelCase(component.selector);
          cbDowngradeComponent(camelCaseSelector, component.component);
      });
  }
  
  function cbDowngradeInjectables(injectables: (ClassCtor | CbDowngradeInjectable)[] = []): void {
      injectables.forEach((injectable) =&gt; {
          if ((injectable as ClassCtor).name) {
              const injectableCtor = (injectable as ClassCtor);
              cbDowngradeInjectable(injectableCtor.name, injectableCtor);
          } else {
              const injectableConfig = (injectable as CbDowngradeInjectable);
              cbDowngradeInjectable(injectableConfig.token, injectableConfig.injectable);
          }
      });
  }
  interface CbDowngrades {
      components?: CbDowngradeComponent[];
      injectables?: CbDowngradeInjectable[];
  }
  
  interface CbDowngradeInjectable {
      /** ThisShouldBePascalCase */
      token: string;
      injectable: ClassCtor;
  }
  
  interface CbDowngradeComponent {
      /** this-should-be-kebab-case */
      selector: string;
      component: ClassCtor;
  }
  
  /** Decorate your modules with this decorator to downgrade any components or injectables for usage in angularjs
   */
  export function CbDowngrades(cbDowngrades: CbDowngrades): ClassDecorator {
      return (constructor: Function) =&gt; {
          cbDowngradeComponents(cbDowngrades.components);
          cbDowngradeInjectables(cbDowngrades.injectables);
      };
  }
  </code></pre>