Tengo varios componentes en una carpeta llamada categoria, el componente principal es index.component, los demás son crear.component, editar.component y eliminar.component, quisiera llamarlos dentro del componente index.component, para no recargar el app.module. ¿Habrá alguna manera? Estuve buscando y no encuentro material, lo mas probable es por que no se como se llame la manera en que angular lo permite.
index.componente.html
<div class="row">
<section class="col-md-12">
<div class="box box-primary">
<div class="box-body" style="">
<div class="form-group">
<label for="filter_campo" class="control-label col-md-4">Nombre</label>
<div class="col-md-8">
<input type="text" (keyup)="keyNombre($event.target.value)" class="form-control" id="filter_campo" name="filter_campo">
</div>
</div>
<div class="form-group">
<label for="filter_estados" class="control-label col-md-4">Estado: </label>
<div class="col-md-8">
<select id='filter_estados' name='filter_estados' class='form-control'>
<option value="" disabled="disabled" selected="true">Elija...</option>
<option value="true">Activos</option>
<option value="false">Inactivos</option>
<option value="">Todos</option>
</select>
</div>
</div>
</div>
</div>
</section>
</div>
<app-crear></app-crear>
<table datatable [dtOptions]="dtOptions" class="table table-striped table-bordered"></table>
crear.component.html
<button type="button" id="Crear" class="btn btn-primary botonCrear">
<span class="fa fa-plus"></span><span class="hidden-xs"> Agregar</span>
</button>
<div id="modalCrear" class="modal fade" role="dialog" style="overflow-y: scroll;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Crear
</div>
<form class="form-horizontal" role="form" id="form-crear">
<div class="modal-body">
<div class="form-group">
<label for="crearNombre" class="control-label col-sm-2">Nombre: </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="crearNombre" name="crearNombre">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="fa fa-remove"></span>
<span class="hidden-xs"> Cerrar</span>
</button>
<button type="button" id="Guardar" name="Guardar" class="btn btn-primary">
<span class="fa fa-save"></span>
<span class="hidden-xs"> Guardar</span>
</button>
</div>
</form>
</div>
</div>
</div>
Donde app-crear sea crear.component.html