Can you declare a component within another component?

Question

Can you declare a component within another component?

Navigation

#1 by (2 votes)

2

I have several components in a folder called category , the main component is index.component , the others are create.component , > edit.component and remove.component , I would like to call them within the index.component component, so as not to overload the app.module . Will there be any way? I was looking for and I can not find material, most likely because I do not know what is called the angular way it allows.

index.component.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>

create.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>

Where app-create is create.component.html

angular angular5

asked by Pablo Contreras 21.09.2018 в 17:15

source

1 answer

Read variable character by character Error retrieving cell value in GridView

score 2 · Accepted Answer

You can create the hierarchy you want, it's what you're expected to do.

When you declare a component, the @Component annotation is used to declare among other things the label to be used to call it, so if your component ComponentComponent is associated with app-crear , it should work without problems.

I'll give you a working example, where one component calls another: link