Boa tarde, estou tentando criar elementos do DOM dinamicamente por meio de uma função, mas as "tags" não aparecem corretamente. Elas são carregadas mas não é aplicado nenhum estilo.
home.html
<ion-header>
<ion-navbar>
<ion-title>
Home
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="carregaCodigo('#divFormulario')">Button</button>
<div id="divFormulario"></div>
</ion-content>
home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
public elemento : Element;
carregaCodigo(seletor){
this.elemento = document.querySelector(seletor);
this.elemento.innerHTML = `
<ion-card-content>
<ion-item-group>
<ion-item-divider color="light">
<ion-icon name="contact" item-right></ion-icon>
Dados
</ion-item-divider>
<ion-item>
<ion-label floating>Nome: </ion-label>
<ion-input name="nome"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Sobrenome: </ion-label>
<ion-input name="sobrenome"></ion-input>
</ion-item>
</ion-card-content>
`;
}
}
Todos os campos aparecem, mas sem nenhuma formatação e nem funcionam corretamente. Já pesquisei por alguma solução mas não encontrei.
Obrigado!
Denis Miller