Angular 6 : Commands

Angular 6 : Commands

Overview

I have listed some useful Angular 6 commands which can help to developer.

Commands

1) To create new project 

ng new ProjectName --skip-tests

2) To Run Project

ng s -o or ng serve --open 

3) To Install bootstrap and Jquery

npm install bootstrap@3 jquery --save

 4) Configure bootstrap and jquery in project
        Open  angular.json file
        Add below configurations in file

"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
 "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

  5) To Create new component

- ng g c componentName 
 
e.g., 
1) ng g c Employee/create-employee --spec=false --flat=true
 This will create "Employee" folder and create "create-employee" component
2) ng g c Aboutus --spec=false --flat=true
 This will create "Aboutus" component on "app" root folder

  6) Set Routing module

      open file app-routing.module.ts and set below routing path

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ListEmployeesComponent } from './Employee/list-employees.component';
import { CreateEmployeeComponent } from './Employee/create-employee.component';

const routes: Routes = [
  {path: 'list', component: ListEmployeesComponent},
  {path: 'create', component: CreateEmployeeComponent},
  {path: '', redirectTo:'/list', pathMatch: 'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

  7) Set header menu

     open file app.component.html and write menu, below is sample code

<div class="container">
   <nav class="navbar navbar-default">
  <ul class="nav navbar-nav">
    <li>
   <a routerLinkActive="Active" routerLink="list">List</a>
    </li>
    <li>
   <a routerLinkActive="Active" routerLink="create">Create</a>
    </li>
  </ul>
   </nav>
   <router-outlet></router-outlet>
 </div>

            

Hope this will help you and save your time.

Enjoy !!!

:)