2

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

4
  • 1
    Podrías subir un poco de código HTML (Con los tags de los componentes), planteando el modelo que quieres lograr, me resulta confusa la pregunta. A su vez si entiendo bien, si es posible. Commented el 21 sept. 2018 a las 15:17
  • @FedericoMadoery ¿Así?
    – bypabloc_
    Commented el 21 sept. 2018 a las 15:24
  • 1
    Si, eso se puede, vos cuando creas un componente lo tenes que agregar al modulo, luego puedes usarlo en el resto de los componentes de ese modulo. Lo tenes que usar un ngIf para mostrarlo o no, por ejemplo o un route, pero nunca se "recargaría" la pagina si a eso te referías. Como es algo largo de explicar, no publicare una respuesta, pero lee esto te va a ser de ayuda Commented el 21 sept. 2018 a las 15:27
  • @FedericoMadoery perfecto, gracias :D
    – bypabloc_
    Commented el 21 sept. 2018 a las 16:04

1 respuesta 1

2

Puedes crear la jerarquía que quieras, es lo que se espera que hagas.

Cuando declaras un componente, se usa la anotación @Component para declarar entre otras cosas la etiqueta a usar para llamarlo, así que si tu componente CrearComponent está asociado a app-crear, debería funcionar sin problemas.

Te pongo un ejemplo básico funcionando, donde un componente llama a otro: https://stackblitz.com/edit/angular-with-skeleton

1
  • Gracias gracias.
    – bypabloc_
    Commented el 21 sept. 2018 a las 16:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.