3

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.
Improve this question
4
  • you can use ngIf to only show selected dics Commented Jul 27, 2018 at 15:03
  • You can also use multiple children components and use them here. And for the data, you can use a service or something to have all the data in the same place there Commented Jul 27, 2018 at 15:04
  • [ngSwitch] is a better option for your case I guess Commented Jul 27, 2018 at 15:05
  • I only want to reduce the size of the file, the number of line of codes. Commented Jul 27, 2018 at 15:56

2 Answers 2

Reset to default
4

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks ShadowFoOrm, I do not want new components they are all from the same component. How do I do that?
You asked to have separate file... This is how you do it. Of course you don't need the .scss/.css file not even the .spec.ts file. You can remove the .html file as well if you want to use only .ts file. but if you do that your html needs to be in the ts file. instead of templateUrl you will have template: your html content,
Yes separate files, but I am submitting the form at once. So I only want a single component for all the sections of the view.
@DavidSagang were you able to find a solution to your question? I assume splitting the form into three components will require passing the data from child to parent and you wanted to avoid this scenario. I actually face the same challenge.
2

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

enter image description here

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

Improve this answer

1 Comment

Yes. Very little (practically nothing) has changed with forms or routing since this code was written. The only that that has changed a bit is the RxJS and the Http.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.