2

tengo una componente Componente1 y otra llamada Componente2 lo que quiero saber es como podría hacer para llamar la plantilla html de Componente2 en el html de Componente1, algo así:

plantilla de componente1:
<html>
  <Componente2> </Componente2> 

</html>

Tal cual como se hace en el app.component.html, lo que quiero hacer es para ahorrar código en la Componente1 ya que uso mucho código repetitivo y lo que quiero es insertar el componente2. como podría hacerlo? estoy comenzando con Angular, debo importar la componente2 en la componente1 ? cuales serían los pasos a seguir? seria una buena practica para reusar código?

3 respuestas 3

1

Todo parte de index.html el cual por defecto tienes app-root como etiqueta mostrando el render del html app.component.html, si se quiere ampliar... Crea un nuevo componente :

ng generate component compomenteB

Si nos fijamos lo habra añadido en appModule su import necesario y dentro de componenteB.component.ts veras en el selector

@Component

Que tiene una propiedad templateUrl, el cual asocia a su "render" de html por lo tanto... Dentro del app.component.html colocaras la etiqueta del componenteB...

Definida en la propiedad selector del decorador @Component

Happy Conding !!

2
  • Hola Joel, gracias por responder. Pero me refería exactamente a importar una componente dentro de otra. Se que todo parte del app. En el app.html tengo varias componentes, pero si yo dentro de una de esas componentes quiere llamar a otra como podría hacer? Lo que quiero es tratar de reusar código, ya que tengo una componente donde uso mucho código repetitivo y lo quiero tener en una componen aparte para solo hacer llamadas de esa componen y no tener tanto código repetido.
    – JulianProg
    el 10 jun. 2019 a las 0:02
  • Compañero pues tan sencillo como repetir la etiqueta, componenteB en el html de app y ya podrias usarlo tanto como quieras =) es la gracia de angular el 10 jun. 2019 a las 5:27
1

Fijate que cuando creas un proyecto Angular se crea con un index.html. Dentro de ese index.html hay una etiqueta que es <app-root></app-root> dentro del body. Esa etiqueta lo que hace es "decirle" a angular que todo lo que mostrará está en el archivo app.component.html. Para crear un nuevo componente y enlazarlo al app.component.html lo que debes hacer es escribir en la terminal ng g c components/nombredelcomponentenuevo Se lo divide en una carpeta de componentes para estár más organizado (asi lo hago yo).

0

según entiendo lo que queres hacer es que por ejemplo, en el Componente2 se visualice el HTML del componente1. Esto es muy fácil y prácticamente igual al código que nos pusiste como ejemplo

Tal como vos dijiste dentro del template de nuestro componente1 podríamos insertar el tag (declarado como selector) que le corresponda al componente2 y de esa manera visualizar ambos templates en conjunto.

A modo de ejmplo, podemos ver el HTML de X componente :

<div class="container">
  <br>
  <h3 class="text-left text-secondary"><i>Contact Update</i></h3>
  <br>
</div>

A su vez tenemos otro componente llamado MainpageComponent cuyo selector es app-mainpage , aquí el .ts del componente:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-mainpage',
  templateUrl: './mainpage.component.html',
  styleUrls: ['./mainpage.component.css']
})
export class MainpageComponent implements OnInit {

  constructor() { }

Al momento de querer acoplar el HTML de MainpageComponent a nuestro primer componente X, sólo debemos colocar el tag selector de MainpageComponent de la siguiente manera y listo! :

<app-mainpage></app-mainpage>
<div class="container">
  <br>
  <h3 class="text-left text-secondary"><i>Contact Update</i></h3>
  <br>
</div>
4
  • creí que había que hacer algún tipo de importación en la componente donde quería usar alguna otro componente.
    – JulianProg
    el 10 jun. 2019 a las 3:02
  • No, es tan sencillo como eso!, solamente tendrías que declararlo en el apartado spec (de los test) , pero no es el caso! jaja, si te sirvió espero tu punto para arriba y el tilde! saludos. el 10 jun. 2019 a las 3:23
  • a que te refieres con que tendría que declararlo en el apartado spec? probe simplemente añadiendo el tag del selector y funcionó, para que sería eso que mencionas?
    – JulianProg
    el 10 jun. 2019 a las 3:29
  • Lo que mencioné es para cuando queres realizar tests del componente, lo ves en el apartado NombreComponente.spec.ts el 10 jun. 2019 a las 9:57

Tu Respuesta

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

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