How to use this template?

Many of you ask which is the best way to use the template to build your app, and the answer is: IT DEPENDS!

First of all, please make sure you followed the Set up section.

If you plan to use many of the pages and features offered by the template, then I suggest you to go with the option 1.

If you only want to use some specific pages or components and you already have an existing Angular app, then I suggest you to go with option 2 so you don't have to waste time deleting the things you don't need.

1. Use this angular template app as a base to create your app

This template is itself an Angular app, so you don't need to create another one. You can use the template as a base for your app and just delete the pages you don't want and add the ones missing.

Make sure you check the Code Structure section to learn more about this project.

2. Import some pages or components into your existing Angular app

How to do this? Let's assume you want to use some angular form controls from the Extended Controls page. Navigate to that section of the code:

  • Copy the extended-controls folder intro your project.

  • Add the ExtendedControlsComponent as a declaration of one of your Modules (like we do in src/app/forms/forms.module.ts)

  • Add the extended-controls route to your Module (like we do in src/app/forms/forms.module.ts)

  • If the component injects any service, then also add it to your project.

  • Add any component dependency. In this case it would be all the Material components modules that we use in this page, also reactive angular forms module. In this project we have a SharedModule in src/app/shared/shared.module.ts that exports all this shared dependencies so we can use them along the project.

If you need any help copying any specific component into your project, don't hesitate to contact support at