Angular Partial View

Question

I am working on a very long form in angular. I would like to know if I can break it up into many different views and reference each of them in the main view.

<div class="container">
   <div class="row" id="part1">
      <div class="col-md-12">First Section</div>
   </div>
   <div class="row" id="part2">
      <div class="col-md-12">Second Section</div>
   </div>
   <div class="row" id="part3">
      <div class="col-md-12">Third Section</div>
   </div>
   ...
</div>

Since my file is too long, is there a way using angular to have each section in a separate file and reference each of them in the main file? For example:


 <div class="container>
    "import section 1"
    "import section 2"
    "import section 3"
 </div>

Thanks.

Answer 1

Create your partial views (Component);

Using Angular CLI go to powershell / comand line / etc;

Step1

ng g c import-section-1
ng g c import-section-2
ng g c import-section-3

Will create you 3 folders under app folder (that means you'll have 3 new component);

Step2

Edit your component as you need and than reference the component that you need;

 <div class="container>
    <app-import-section-1></app-import-section-1>
    <app-import-section-2></app-import-section-2>
    <app-import-section-3></app-import-section-3>
 </div>

Answer 2

You can also use the technique presented by @shadowFoOrm and then split the form up into tabs like shown below:

You can find the code for this here: https://github.com/DeborahK/Angular-Routing/tree/master/APM-Final