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>
