Dynamically add ionic ui component into <ion-content> like ionic creator

Ionic Framework ionic-v3
1

I am working on a project similar to ionic creator, it can add ionic ui component and arrange them. Currently, i have to wrap the ionic component with my own component. So that i can use ComponentFactoryResolver to add them on the fly and store attributes in component instance(like button color). The problem is this will add an extra tag on each component. For example, i have a button component which wraps the ionic button:

Component Class:

@Component({
  selector: 'button-view',
  templateUrl: 'button-view.html'
})
export class ButtonViewComponent {
  color: string;
  displayIcon: boolean;
  constructor() {
    this.color = 'light';
    this.displayIcon = false;
  }
}

Template:

<button ion-button block [color]="color">
      Button Text
      <ion-icon *ngIf="displayIcon" name="home"></ion-icon>
</button>

Dynamically add:

const buttonViewComponent = this.ComponentFactoryResolver.resolveComponentFactory(ButtonViewComponent);
this.buttonViewRef= this.pageContainer.createComponent(buttonViewComponent);

Result in html:

<button-view>
  <button block="" 
             ion-button="" 
             class="..." 
             ng-reflect-color="danger" 
             ng-reflect-block="">
  <span class="button-inner">
    Button Text
    <!--bindings={
    "ng-reflect-ng-if": "false"
    }-->
  </span>
  <div class="button-effect"></div></button>
</button-view>

My question is will this extra button-view tag affect ionic to work and style properly?

2

Need some advice, thanks