Angular Installation Instructions, Angular Instructions

Angular

Installation Instructions

·         Node Install = Manual

·         npm install    =  npm install

·         Angular CLI installation = npm install -g @angular/cli

·         Bootstrap install = npm install bootstrap

·         Bootstrap install for version based = npm install bootstrap@3

·         Create component = ng g c compnentname

·         Check node version = node -v

·         Check npm version = npm  -v

·         Check angular Cli version = ng   - - version (double hyphens)

·         Create new project = ng new projectname

·         Change port commandng serve --port 4401 (type portname)

·         Router outlet = <router-outlet></router-outlet>

Serial Number / Number Increment:

<table>

     <tr *ngFor="let data of mydata; let i=index">

         <td>{{ i + 1 }}</td>

            <td>{{data.title}}</td>      

     </tr>

 </table>

Sample app-routing.module

import { NgModule, Component } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './components/login/login.component';

import { DashboardComponent } from './components/dashboard/dashboard.component';

import { SidebarComponent } from './components/sidebar/sidebar.component';

import { MainComponent } from './components/main/main.component';

import { AppmanagementComponent } from './components/appmanagement/appmanagement.component';

import { PagenotfoundComponent } from './components/pagenotfound/pagenotfound.component'; 

import { DataComponent } from './components/data/data.component';

import { Data1Component } from './components/data1/data1.component';

import { Data1linksComponent } from './components/data1links/data1links.component';

import { Data2Component } from './components/data2/data2.component';

import { Data4Component } from './components/data4/data4.component';

 import { Data2linksComponent } from './components/data2links/data2links.component';

 import { Data4linksComponent } from './components/data4links/data4links.component';

import { Data3linksComponent } from './components/data3links/data3links.component';

import { Data3Component } from './components/data3/data3.component';

import { ContactformComponent } from './components/contactform/contactform.component';

const routes: Routes = [

  {path:'',redirectTo:'login', pathMatch:'full' },

  {path:'login',component:LoginComponent },

  {path:'dashboard',component:DashboardComponent },

  {path:'appmanagement',component:AppmanagementComponent },

  {path:'data1link/:id',component:Data1linksComponent },

  {path:'data',component:DataComponent }, 

  // {path:'datalink/:id:name',component:DatalinkComponent },

  {path:'data1',component:Data1Component },

  {path:'data2',component:Data2Component },

  {path:'data4',component:Data4Component },

  {path:'data2link/:id',component:Data2linksComponent },

  {path:'data4links/:id',component:Data4linksComponent },

  {path:'data3',component:Data3Component },

  {path:'data3link/:id',component:Data3linksComponent },

  {path:'contactform',component:ContactformComponent }, 

  {path:'**',component:PagenotfoundComponent } 

  

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

Get / Post Data from API

Service.ts

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs';

import { HttpClient } from '@angular/common/http';

@Injectable({

  providedIn: 'root'

})

export class CommonService {

  constructor(private http:HttpClient) { }  

  appmanagement():Observable<any>{

    let url="https://jsonplaceholder.typicode.com/posts";

    return this.http.get(url);

  }

}

App.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import{ HttpClientModule } from '@angular/common/http';

 imports: [

    BrowserModule,

    AppRoutingModule, HttpClientModule

  ],

Component.ts

import { Component, OnInit } from '@angular/core';

import { CommonService } from '../../services/common.service';

 @Component({

  selector: 'app-appmanagement',

  templateUrl: './appmanagement.component.html',

  styleUrls: ['./appmanagement.component.css']

})

export class AppmanagementComponent implements OnInit {

  mydata:any;

  constructor(private CommonService:CommonService) { }

 ngOnInit() {

this.CommonService.appmanagement().subscribe(data => { this.mydata = data;})

   }

}

HTML

 <table>

     <tr *ngFor="let data of mydata; let i=index">

         <td>{{ i + 1 }}   </td>

         <td> {{data.title}}</td>

       

     </tr>

 </table>