Angular - how to create a child component using Angular CLI












1















I have created an Angular app using Angular CLI and created one component:
ng g c parent.



How do I create child components (e.g. child1 and child2) and integrate them with a parent using angular CLI?



I am trying to create a simple example and understand in some example parent-child component relationship.






javascript node.js angular







share|improve this question




















  • 1





    this tutorial may be helpful: tektutorialshub.com/adding-child-component-angular-2

    – Rich
    Jan 3 at 18:29











  • You can simply create a component with angular CLI. depending on your requirements you can use that component as a child component using input/output parameters. There is no out of the box 'child ' component.

    – Iman
    Jan 3 at 18:35
















1















I have created an Angular app using Angular CLI and created one component:
ng g c parent.



How do I create child components (e.g. child1 and child2) and integrate them with a parent using angular CLI?



I am trying to create a simple example and understand in some example parent-child component relationship.






javascript node.js angular







share|improve this question




















  • 1





    this tutorial may be helpful: tektutorialshub.com/adding-child-component-angular-2

    – Rich
    Jan 3 at 18:29











  • You can simply create a component with angular CLI. depending on your requirements you can use that component as a child component using input/output parameters. There is no out of the box 'child ' component.

    – Iman
    Jan 3 at 18:35














1












1








1








I have created an Angular app using Angular CLI and created one component:
ng g c parent.



How do I create child components (e.g. child1 and child2) and integrate them with a parent using angular CLI?



I am trying to create a simple example and understand in some example parent-child component relationship.






javascript node.js angular







share|improve this question
















I have created an Angular app using Angular CLI and created one component:
ng g c parent.



How do I create child components (e.g. child1 and child2) and integrate them with a parent using angular CLI?



I am trying to create a simple example and understand in some example parent-child component relationship.






javascript node.js angular




javascript node.js angular






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 3 at 20:07









Dale Burrell

3,41352655




3,41352655










asked Jan 3 at 18:22









JoeJoe

1,74031637




1,74031637








  • 1





    this tutorial may be helpful: tektutorialshub.com/adding-child-component-angular-2

    – Rich
    Jan 3 at 18:29











  • You can simply create a component with angular CLI. depending on your requirements you can use that component as a child component using input/output parameters. There is no out of the box 'child ' component.

    – Iman
    Jan 3 at 18:35














  • 1





    this tutorial may be helpful: tektutorialshub.com/adding-child-component-angular-2

    – Rich
    Jan 3 at 18:29











  • You can simply create a component with angular CLI. depending on your requirements you can use that component as a child component using input/output parameters. There is no out of the box 'child ' component.

    – Iman
    Jan 3 at 18:35








1




1





this tutorial may be helpful: tektutorialshub.com/adding-child-component-angular-2

– Rich
Jan 3 at 18:29





this tutorial may be helpful: tektutorialshub.com/adding-child-component-angular-2

– Rich
Jan 3 at 18:29













You can simply create a component with angular CLI. depending on your requirements you can use that component as a child component using input/output parameters. There is no out of the box 'child ' component.

– Iman
Jan 3 at 18:35





You can simply create a component with angular CLI. depending on your requirements you can use that component as a child component using input/output parameters. There is no out of the box 'child ' component.

– Iman
Jan 3 at 18:35












3 Answers
3






active

oldest

votes


















1














you can create as many as component you want



ng g c child1

ng g c child2


Then you need to add them in the Html of ParentComponent



<app-child1></app-child1>

<app-child2></app-child2>


and then using @Input and @Output to pass data between parent and child






share|improve this answer































    1














    You can see child routing configuration y child routing component in Angular.io.



    angular.io router






    share|improve this answer































      1














      If you mean to nest the components into the parent you can do it like this



      ng generate component parent/child1
      
ng generate component parent/child2


      This generates the child components inside the parent folder. I do this in my apps to keep together what belongs together! Hope it helped






      share|improve this answer


























      • Can I create parent1/child1 and parent2/child1 or child1 must be unique every time? (even though it is under parent1 and parent2)

        – Joe
        Jan 3 at 20:48












      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54027774%2fangular-how-to-create-a-child-component-using-angular-cli%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      3 Answers
      3






      active

      oldest

      votes








      3 Answers
      3






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      1














      you can create as many as component you want



      ng g c child1
      
ng g c child2


      Then you need to add them in the Html of ParentComponent



      <app-child1></app-child1>
      
<app-child2></app-child2>


      and then using @Input and @Output to pass data between parent and child






      share|improve this answer




























        1














        you can create as many as component you want



        ng g c child1
        
ng g c child2


        Then you need to add them in the Html of ParentComponent



        <app-child1></app-child1>
        
<app-child2></app-child2>


        and then using @Input and @Output to pass data between parent and child






        share|improve this answer


























          1












          1








          1







          you can create as many as component you want



          ng g c child1
          
ng g c child2


          Then you need to add them in the Html of ParentComponent



          <app-child1></app-child1>
          
<app-child2></app-child2>


          and then using @Input and @Output to pass data between parent and child






          share|improve this answer













          you can create as many as component you want



          ng g c child1
          
ng g c child2


          Then you need to add them in the Html of ParentComponent



          <app-child1></app-child1>
          
<app-child2></app-child2>


          and then using @Input and @Output to pass data between parent and child







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Jan 3 at 18:29









          RezaRahmatiRezaRahmati

          7,70823280




          7,70823280

























              1














              You can see child routing configuration y child routing component in Angular.io.



              angular.io router






              share|improve this answer




























                1














                You can see child routing configuration y child routing component in Angular.io.



                angular.io router






                share|improve this answer


























                  1












                  1








                  1







                  You can see child routing configuration y child routing component in Angular.io.



                  angular.io router






                  share|improve this answer













                  You can see child routing configuration y child routing component in Angular.io.



                  angular.io router







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Jan 3 at 18:38









                  Chester mi niñoChester mi niño

                  3115




                  3115























                      1














                      If you mean to nest the components into the parent you can do it like this



                      ng generate component parent/child1
                      
ng generate component parent/child2


                      This generates the child components inside the parent folder. I do this in my apps to keep together what belongs together! Hope it helped






                      share|improve this answer


























                      • Can I create parent1/child1 and parent2/child1 or child1 must be unique every time? (even though it is under parent1 and parent2)

                        – Joe
                        Jan 3 at 20:48
















                      1














                      If you mean to nest the components into the parent you can do it like this



                      ng generate component parent/child1
                      
ng generate component parent/child2


                      This generates the child components inside the parent folder. I do this in my apps to keep together what belongs together! Hope it helped






                      share|improve this answer


























                      • Can I create parent1/child1 and parent2/child1 or child1 must be unique every time? (even though it is under parent1 and parent2)

                        – Joe
                        Jan 3 at 20:48














                      1












                      1








                      1







                      If you mean to nest the components into the parent you can do it like this



                      ng generate component parent/child1
                      
ng generate component parent/child2


                      This generates the child components inside the parent folder. I do this in my apps to keep together what belongs together! Hope it helped






                      share|improve this answer















                      If you mean to nest the components into the parent you can do it like this



                      ng generate component parent/child1
                      
ng generate component parent/child2


                      This generates the child components inside the parent folder. I do this in my apps to keep together what belongs together! Hope it helped







                      share|improve this answer














                      share|improve this answer



                      share|improve this answer








                      edited Jan 3 at 22:10









                      Yashwardhan Pauranik

                      2,14611731




                      2,14611731










                      answered Jan 3 at 18:34









                      ExactPauseExactPause

                      16828




                      16828













                      • Can I create parent1/child1 and parent2/child1 or child1 must be unique every time? (even though it is under parent1 and parent2)

                        – Joe
                        Jan 3 at 20:48



















                      • Can I create parent1/child1 and parent2/child1 or child1 must be unique every time? (even though it is under parent1 and parent2)

                        – Joe
                        Jan 3 at 20:48

















                      Can I create parent1/child1 and parent2/child1 or child1 must be unique every time? (even though it is under parent1 and parent2)

                      – Joe
                      Jan 3 at 20:48





                      Can I create parent1/child1 and parent2/child1 or child1 must be unique every time? (even though it is under parent1 and parent2)

                      – Joe
                      Jan 3 at 20:48


















                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid …



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54027774%2fangular-how-to-create-a-child-component-using-angular-cli%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      -

                      Popular posts from this blog

                      Monofisismo

                      Image
                      Monofisismo (do grego: monos - "único, singular" e physis - "natureza") é o ponto de vista cristológico que defende que, depois da união do divino e do humano na encarnação histórica, Jesus Cristo, como encarnação do Filho ou Verbo ( Logos ) de Deus, teria apenas uma única "natureza", a divina, e não uma síntese de ambas. O monofisismo é contraposto pelo diofisismo (ou "diafisismo"), que defende que Jesus preservou em si as duas naturezas. Historicamente, o monofisismo se refere primordialmente à posição dos que (especialmente no Egito e, em menor grau, na Síria) rejeitaram as decisões do Concílio de Calcedônia em 451 (o quarto concílio ecumênico). Os membros mais moderados entre eles, porém, defendem a teologia "miafisita", que se tornou a oficial para as Igrejas Ortodoxas Orientais. Muitos ortodoxos orientais, porém, rejeitam essa classificação, mesmo como um termo genérico, mas ele é amplamente utilizado na literatura históri...
                      Read more

                      Angular Downloading a file using contenturl with Basic Authentication

                      Image
                      0 I have a contentUrl when user clicks on that,file should be downloaded. If I try to browse the contentUrl in the browser it asks for Userid and password.I believe this is Basic Authentication.I dont want user to enter UserId and Password so I am passing it Authorization(Please see below code). Url looks some thing like this: http://XXX.XXX.XX.XXX:8080/flowable-rest/service/runtime/tasks/90875/attachments/90555/content let username : string = 'admin'; let pwd : string = 'test'; let headers = new Headers(); headers.set('Accept', 'text/json'); headers.append('Content-Type', 'application/json'); headers.set('Access-Control-Allow-Origin', '*'); headers.set('Access-Control-Allow-Methods','POST, GET, OPTIONS, PUT, DELETE'); head...
                      Read more

                      Olmecas

                      Image
                      Monumento 1, uma das quatro cabeças colossais encontradas em La Venta, com altura aproximada de 3 metros Olmecas é a designação do povo e da civilização que estiveram na origem da antiga cultura pré-colombiana da Mesoamérica e que se desenvolveram nas regiões tropicais do centro-sul do atual México durante o pré-clássico, próximo de onde hoje estão localizados os estados mexicanos de Veracruz e Tabasco, no Istmo de Tehuantepec, numa zona designada área nuclear olmeca. A cultura olmeca floresceu nesta região aproximadamente entre 1500 e 400 a.C., [ 1 ] e crê-se que tenha sido a civilização-mãe de todas as civilizações mesoamericanas que se desenvolveram posteriormente. [ 2 ] No entanto, desconhece-se a sua exacta filiação étnica, ainda que existam numerosas hipóteses colocadas para tentar resolver esta questão. O etnónimo olmeca foi cunhado pelos arqueólogos do século XX, e não devem confundir-se com os muito posteriores olmecas-xicalancas que ocuparam vários locais do México...
                      Read more