Add a new Component using Angular Template

Add a new component using the Angular Item templates .

First Check if “Angular Item Templates” is already installed or not.

Search result "Angular Item Templates" ,
Here you can see green mark means Angular item templates is already installed.
if not then select and click on Add button.it will take bit time to install and re-open this window after installation.

Let's Select Angular Component and provide component name "Employee" and click on Add button.

After that, you can see new “Add new Angular Component” window.


It uses default naming convention and provides multiple option of the Folder name, Template file name, Class file name, Test file name, Style file name.
Drop-Down list for stylesheet.

If you want a customized name, then you can customized name as well for that just checked in the “Use custom names” checkbox.

Click on Add.

Now you can check the Solution Explorer and open "Employee" folder. You can see all the newly added files along with "Employee" folder.


Go to the file “~\app\app.shared.module.ts” and make the following changes

-- Add the following line in the import section
import { EmployeeComponent } from './components/employee/employee.component’;
-- Inside declarations section add
EmployeeComponent
-- Inside forRoot([]) add
{ path: 'employee', component: EmployeeComponent }

Add one line code in “…\app\components\navmenu\navmenu.component.html”.

Now let’s run application and quickly check this added component template.

Music: https://www.bensound.com