AngularJs6 using with Asp.net Core Web API 2
Steps
1) Create project using with command
2) Create services
3) Create routing
4) Modify App.Module.ts file
5) Create Component with command
Steps
1) Create project using with command
2) Create services
3) Create routing
4) Modify App.Module.ts file
5) Create Component with command
Step 1
ng new my-app For more information https://angular.io/guide/quickstart
Step 2
ng generate service hero Service Example import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, RequestMethod, RequestOptionsArgs, ResponseContentType } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/catch';
import { environment } from '../../environments/environment';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { DomainInfo } from '../model/model-domaininfo';
import { DomainInfoViewModel } from '../model/model-domaininfoview';
import { ProjectsViewModel } from '../model/model-projectsinfo';
import { DomainsList } from '../model/DomainsList';
import { HttpErrorHandler, HandleError } from '../http-error-handler.service';
import { catchError, merge } from 'rxjs/operators';
import { DomainHistoryModel } from '../model/model-domainhistory';
import { HolidaysList } from '../model/model-holidays';
import { FTPofDomain } from '../model/model-FTPs';
import { UserInfo } from '../model/model-userinfo';
import { RollDefaultEnitity } from '../model/model-RollDefaultEnitity';
import { LeaveManage } from '../model/model-leavemanage';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + sessionStorage.getItem('jwt')
})
};
@Injectable({
providedIn: 'root'
})
export class DomainInfoService {
public serviceURL: string;
public DomainInfo: DomainInfo[] = [];
private handleError: HandleError;
// public BaseUrl: string = 'http://domaininfoapi.bexcodeservices.com/api/';
public BaseUrl: string = 'http://localhost:5000/api/';
constructor(private http: Http, private httpClient: HttpClient,
httpErrorHandler: HttpErrorHandler) {
//this.serviceURL = environment.baseUrl;
this.handleError = httpErrorHandler.createHandleError('domaininfoService');
}
getDomainInfoList(): Observable<any> {
debugger;
return this.httpClient.get<DomainInfoViewModel[]>(this.BaseUrl + "DomainInfo/",
{
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
})
//.map((data: Response) => {
// return data.json() as DomainInfoViewModel[];
//});
}
getDomainInfoById(Id): Observable<any> {
debugger;
return this.httpClient.get<DomainInfo>(this.BaseUrl + "DomainInfo/" + Id, {
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
})
//.map((data: Response) => {
// debugger;
// return data.json() as DomainInfo;
//});
}
getDomainsList(): Observable<any> {
return this.httpClient.get<DomainsList[]>(this.BaseUrl + "DomainInfo/DomainsList",
{
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
});
//.map((data: Response) => {
// return data.json() as DomainsList[];
//});
}
getUserList(): Observable<any> {
return this.httpClient.get<UserInfo[]>(this.BaseUrl + "UserInfo", {
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
})
//.map((data: Response) => {
// return data.json() as DomainsList[];
//});
}
getDomainSubInfoList(ParentId): Observable<any> {
return this.httpClient.get<ProjectsViewModel[]>(this.BaseUrl + "DomainInfo/AllChildDomains/" + ParentId,
{
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
}
)
}
addDomainInfo(domainInfo: DomainInfo): Observable<DomainInfo> {
debugger;
return this.httpClient.post<DomainInfo>(this.BaseUrl + "DomainInfo/", domainInfo, {
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
})
.pipe(catchError(this.handleError('addDomainInfo', domainInfo)));
}
updateDomainInfo(domainInfo: DomainInfo): Observable<DomainInfo> {
return this.httpClient.put<DomainInfo>(this.BaseUrl + "DomainInfo/" + domainInfo.id, domainInfo, {
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
})
.pipe(catchError(
this.handleError('updateDomainInfo', domainInfo)));
}
deleteDomainInfo(id: number): Observable<any> {
debugger;
return this.httpClient.delete<any>(this.BaseUrl + "DomainInfo/" + id, {
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
}).pipe(catchError(this.handleError('updateDomainInfo', 'Deleting issue')));
}
domainHistory(): Observable<any> {
return this.httpClient.get<DomainHistoryModel[]>(this.BaseUrl + "DomainInfo/DomainHistory", {
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
});
}
addHolidayInfo(holidayInfo: HolidaysList): Observable<HolidaysList> {
debugger;
return this.httpClient.post<HolidaysList>(this.BaseUrl + "Holiday/", holidayInfo, {
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
}).pipe(catchError(this.handleError('addHolidayInfo', holidayInfo)));
}
updateHolidayInfo(holidayInfo: HolidaysList): Observable<HolidaysList> {
debugger;
return this.httpClient.put<HolidaysList>(this.BaseUrl + "Holiday/" + holidayInfo.id, holidayInfo, {
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
}).pipe(catchError(this.handleError('updateDomainInfo', holidayInfo)));
}
getHolidayListCurrentYear(year: number): Observable<any> {
return this.httpClient.get<HolidaysList[]>(this.BaseUrl + "Holiday/HolidayList?year=" + year, {
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
})
}
//********** FTPofDomain********
getFTPofDomainInfoList(Id): Observable<any> {
return this.httpClient.get<FTPofDomain[]>(this.BaseUrl + "FTPofDomain/" + Id,
{
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
})
}
addFTPDomainInfo(FTPdomainInfo: FTPofDomain): Observable<FTPofDomain> {
return this.httpClient.post<FTPofDomain>(this.BaseUrl + "FTPofDomain/", FTPdomainInfo,
{
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
}).pipe(catchError(this.handleError('addFTPdomainInfo', FTPdomainInfo)));
}
updateFTPDomainInfo(FTPdomainInfo: FTPofDomain): Observable<FTPofDomain> {
return this.httpClient.put<FTPofDomain>(this.BaseUrl + "FTPofDomain/" + FTPdomainInfo.id, FTPdomainInfo, {
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
})
.pipe(catchError(
this.handleError('updateDomainInfo', FTPdomainInfo)));
}
deleteFTPDomainInfo(id: number): Observable<any> {
return this.httpClient.delete<any>(this.BaseUrl + "FTPofDomain/" + id, {
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
}).pipe(catchError(this.handleError('deleteFTPDomainInfo', 'Deleting issue')));
}
//********** endFTPofDomain ****
//********** UserInfo ********
GetRollList(): Observable<any> {
return this.httpClient.get<RollDefaultEnitity[]>(this.BaseUrl + "UserInfo/RollList", {
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
})
}
addUserInfo(addUserInfo: UserInfo): Observable<UserInfo> {
return this.httpClient.post<UserInfo>(this.BaseUrl + "UserInfo/", addUserInfo,
{
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
}).pipe(catchError(this.handleError('addUserInfo', addUserInfo)));
}
updateUserInfo(UserInfo: UserInfo): Observable<UserInfo> {
return this.httpClient.put<UserInfo>(this.BaseUrl + "UserInfo/" + UserInfo.ID, UserInfo, {
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
})
.pipe(catchError(this.handleError('updateUserInfo', UserInfo)));
}
deleteUserInfo(id: number): Observable<any> {
return this.httpClient.delete<any>(this.BaseUrl + "UserInfo/" + id, {
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
}).pipe(catchError(this.handleError('deleteFTPDomainInfo', 'Deleting issue')));
}
//********** end UserInfo ****
//*********** start Leave Manage *******
addLeaveInfo(leaveInfo: LeaveManage): Observable<LeaveManage> {
return this.httpClient.post<LeaveManage>(this.BaseUrl + "LeaveManage/", leaveInfo, {
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
}).pipe(catchError(this.handleError('addLeaveInfo', leaveInfo)));
}
updateLeaveInfo(leaveInfo: LeaveManage): Observable<LeaveManage> {
return this.httpClient.put<LeaveManage>(this.BaseUrl + "LeaveManage/" + leaveInfo.id, leaveInfo, {
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
})
.pipe(catchError(
this.handleError('updateLeaveInfo', leaveInfo)));
}
deleteLeaveInfo(id: number): Observable<any> {
debugger;
return this.httpClient.delete<any>(this.BaseUrl + "LeaveManage/" + id, {
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
}).pipe(catchError(this.handleError('deleteLeaveInfo', 'Deleting issue')));
}
getLeaveInfoById(Id): Observable<any> {
debugger;
return this.httpClient.get<LeaveManage>(this.BaseUrl + "LeaveManage/" + Id, {
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
})
}
getLeaveListByUser(UserId): Observable<any> {
return this.httpClient.get<LeaveManage[]>(this.BaseUrl + "LeaveManage/LeaveList/" + UserId,
{
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
}
)
}
getLeaveList(): Observable<any> {
debugger;
return this.httpClient.get<LeaveManage[]>(this.BaseUrl + "LeaveManage/",
{
headers: new HttpHeaders()
.append("Authorization", "Bearer " + sessionStorage.getItem("jwt"))
.append("Content-Type", 'application/json')
})
}
//*********** end Leave Manage *******
}
Step 3
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { AppLayoutComponent } from './_layout/app-layout/app-layout.component';
import { ProjectManageComponent } from './project-manage/project-manage.component';
import { ProjectListComponent } from './project-list/project-list.component';
import { AttendanceComponent } from './attendance/attendance.component';
import { AttendanceImportComponent } from './attendance-import/attendance-import.component';
import { HolidayListComponent } from './holiday-list/holiday-list.component';
import { HolidayManageComponent } from './holiday-manage/holiday-manage.component';
import { LeaveListComponent } from './leave-list/leave-list.component';
import { LeaveManageComponent } from './leave-manage/leave-manage.component';
import { CompanyPolicyComponent } from './company-policy/company-policy.component';
import { UserListComponent } from './user-list/user-list.component';
const routes: Routes = [
{ path: '', component: LoginComponent },
{
path: '',
component: AppLayoutComponent,
children: [
{ path: 'home', component: HomeComponent, pathMatch: 'full' },
{ path: 'manageProject', component: ProjectManageComponent },
{ path: 'projectList', component: ProjectListComponent },
{ path: 'attendance', component: AttendanceComponent },
{ path: 'attendanceImport', component: AttendanceImportComponent },
{ path: 'holidayList', component: HolidayListComponent },
{ path: 'holidayManage', component: HolidayManageComponent },
{ path: 'leaveList', component: LeaveListComponent },
{ path: 'leaveManage', component: LeaveManageComponent },
{ path: 'companyPolicy', component: CompanyPolicyComponent },
{ path: 'userList', component: UserListComponent },
]
},
{ path: 'login', component: LoginComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Step 4
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { AppHeaderComponent } from './_layout/app-header/app-header.component';
import { AppLayoutComponent } from './_layout/app-layout/app-layout.component';
import { AppFooterComponent } from './_layout/app-footer/app-footer.component';
import { AppSidebarComponent } from './_layout/app-sidebar/app-sidebar.component';
import { ProjectManageComponent } from './project-manage/project-manage.component';
import { ProjectListComponent } from './project-list/project-list.component';
import { AgGridModule } from 'ag-grid-angular';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { DomainInfoService } from './service/domain.info.service';
import { ButtonRenderComponent } from './button-render/button-render.component';
import { NgxAccordionTableModule } from 'ngx-accordion-table';
import { FormsModule, NgModel } from '@angular/forms';
import { HttpErrorHandler } from './http-error-handler.service';
import { MessageService } from './message.service';
import { NgbModal, NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HolidayListComponent } from './holiday-list/holiday-list.component';
import { HolidayManageComponent } from './holiday-manage/holiday-manage.component';
import { AttendanceComponent } from './attendance/attendance.component';
import { AttendanceImportComponent } from './attendance-import/attendance-import.component';
import { LeaveManageComponent } from './leave-manage/leave-manage.component';
import { LeaveListComponent } from './leave-list/leave-list.component';
import { CompanyPolicyComponent } from './company-policy/company-policy.component';
import { UserListComponent } from './user-list/user-list.component';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
HomeComponent,
AppHeaderComponent,
AppLayoutComponent,
AppFooterComponent,
AppSidebarComponent,
ProjectManageComponent,
ProjectListComponent,
ButtonRenderComponent,
HolidayListComponent,
HolidayManageComponent,
AttendanceComponent,
AttendanceImportComponent,
LeaveManageComponent,
LeaveListComponent,
CompanyPolicyComponent,
UserListComponent
],
imports: [
BrowserModule, HttpModule, HttpClientModule,
AppRoutingModule, NgbModule,
AgGridModule.withComponents([ButtonRenderComponent]), NgxAccordionTableModule, FormsModule,
BrowserAnimationsModule, FormsModule
],
providers: [DomainInfoService, HttpErrorHandler, NgbModal, MessageService],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 5
Command ng g c commponentNameList Page Component
import { Component, OnInit } from '@angular/core';
import { DomainInfoService } from '../service/domain.info.service';
import { DomainInfo } from '../model/model-domaininfo';
import { DomainInfoViewModel } from '../model/model-domaininfoview';
import { ButtonRenderComponent } from '../button-render/button-render.component';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
import { GridOptions, GridApi } from 'ag-grid-community';
import { AccordionTemplate, AccordionRow, AccordionData } from 'ngx-accordion-table';
import { Router } from '@angular/router';
import { debug } from 'util';
declare var $;
@Component({
selector: 'app-project-list',
templateUrl: './project-list.component.html',
styleUrls: ['./project-list.component.scss'],
providers: [DomainInfoService]
})
export class ProjectListComponent implements OnInit {
rowDataClicked1 = {};
closeResult: string;
public gridOptions: GridOptions;
public gridOptionsSub: GridOptions;
//accordionTemplate: AccordionTemplate;
//accordionData: AccordionData;
columnDefs = [
{ headerName: 'Id', field: 'id', width: 50, minWidth: 50, maxWidth: 100 },
{ headerName: 'Domain Name', field: 'domainName', width: 325, minWidth: 50, maxWidth: 100 },
{ headerName: 'Customer ID', field: 'domainRegisterAccountCustomerID', width: 125, minWidth: 50, maxWidth: 100 },
{ headerName: 'Expire Date', field: 'expiryDate', width: 125, minWidth: 50, maxWidth: 100 },
{ headerName: 'Register On', field: 'registerOn', width: 125, minWidth: 50, maxWidth: 100 },
{
headerName: 'View',
cellRenderer: 'buttonRenderer',
cellRendererParams: {
onClick: this.onBtnView.bind(this),
label: 'View'
}
, width: 90, minWidth: 50, maxWidth: 100
},
{
headerName: 'Edit',
cellRenderer: 'buttonRenderer',
cellRendererParams: {
onClick: this.onBtnEdit.bind(this),
label: 'Edit'
}
, width: 90, minWidth: 50, maxWidth: 100
},
{
headerName: 'Delete',
cellRenderer: 'buttonRenderer',
cellRendererParams: {
onClick: this.onBtnDelete.bind(this),
label: 'Delete'
}
, width: 90, minWidth: 50, maxWidth: 100
}
];
columnDefsSub = [
{ headerName: 'Id', field: 'id', width: 50, minWidth: 50, maxWidth: 100 },
{ headerName: 'Domain Name', field: 'domainName', width: 250, minWidth: 50, maxWidth: 100 },
{ headerName: 'Project Manage By', field: 'projectManageBy', width: 150, minWidth: 50, maxWidth: 100 },
{ headerName: 'Database Name', field: 'databaseName', width: 150, minWidth: 50, maxWidth: 100 },
{ headerName: 'Project Status', field: 'currentProjectStatus', width: 150, minWidth: 50, maxWidth: 100 },
{ headerName: 'Technology Used', field: 'technologyUsed', width: 150, minWidth: 50, maxWidth: 100 },
{ headerName: 'Code Path', field: 'sourceCodePath', width: 150, minWidth: 50, maxWidth: 100 },
];
frameworkComponents: any;
rowData: any[] = [];
subDomainRowData: any[] = [];
constructor(private _domainInfoService: DomainInfoService, private router: Router) {
debugger;
this.frameworkComponents = {
buttonRenderer: ButtonRenderComponent,
}
this.gridOptions = <GridOptions>{};
this.gridOptions.columnDefs = this.columnDefs;
this.gridOptions.pagination = true;
this.gridOptions.paginationPageSize = 100;
this.gridOptions.frameworkComponents = this.frameworkComponents
this.gridOptions.enableSorting = true;
this.gridOptions.enableFilter = true;
this.gridOptions.suppressRowClickSelection = true;
this.gridOptions.groupSelectsChildren = true;
this.gridOptions.debug = true;
this.gridOptions.rowSelection = 'multiple';
this.gridOptions.rowHeight = 40;
this.gridOptions.onRowClicked = function (event) {
};
this.gridOptions.suppressRowClickSelection = true;
this.gridOptions.suppressCellSelection = true;
this.gridOptionsSub = <GridOptions>{};
this.gridOptionsSub.columnDefs = this.columnDefsSub;
this.gridOptionsSub.pagination = true;
this.gridOptionsSub.paginationPageSize = 100;
this.gridOptionsSub.frameworkComponents = this.frameworkComponents
this.gridOptionsSub.enableSorting = true;
this.gridOptionsSub.enableFilter = true;
this.gridOptionsSub.suppressRowClickSelection = true;
this.gridOptionsSub.groupSelectsChildren = true;
this.gridOptionsSub.debug = true;
this.gridOptionsSub.rowSelection = 'multiple';
this.gridOptionsSub.rowHeight = 40;
this.gridOptionsSub.suppressRowClickSelection = true;
this.gridOptionsSub.suppressCellSelection = true;
}
pagging = [10, 15, 25, 50]
ngOnInit() {
this.GetDomainInfoList();
}
GetDomainInfoList() {
this._domainInfoService.getDomainInfoList().subscribe(data => {
this.rowData = data;
});
}
GetSubDomainInfoList(ParentId) {
this._domainInfoService.getDomainSubInfoList(ParentId).subscribe(dataSub => {
debugger;
this.subDomainRowData = dataSub;
});
}
onBtnView(e) {
localStorage.removeItem("domainId");
localStorage.setItem("domainId", e.rowData["id"]);
localStorage.setItem("enableFTP","View");
this.router.navigate(['manageProject'])
}
onBtnEdit(e) {
localStorage.removeItem("domainId");
localStorage.setItem("domainId", e.rowData["id"]);
localStorage.setItem("enableFTP", "Edit");
this.router.navigate(['manageProject'])
}
onBtnDelete(e) {
if (confirm("Are you sure to delete " + e.rowData["domainName"])) {
this._domainInfoService.deleteDomainInfo(e.rowData["id"])
.subscribe(domainInfo => {
localStorage.removeItem("domainId");
});
this.GetDomainInfoList();
}
}
filterForeCasts(filterVal: any) {
this.gridOptions.paginationAutoPageSize = true;
this.gridOptions.api.paginationSetPageSize(filterVal);
}
public getSelectedRows() {
let rowsSelection = this.gridOptions.api.getSelectedRows();
console.info(rowsSelection);
}
public close() {
$('#modelpopup').hide();
}
public openDomainInfo() {
localStorage.removeItem("domainId");
this.router.navigate(['manageProject']);
localStorage.setItem("enableFTP", "Add");
}
}
----------------------------------------------------------
View
<section class="content-header">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item active">Domain List</li>
</ol>
</section>
<!--<button (click)="openConfirmationDialog()" type="button" class="btn btn-primary">Open dialog</button>-->
<div class="row" style="margin-bottom:10px">
<div class="col-sm-11">
<span style="float:left;margin-left:10px;margin-right:5px">Paging</span> <select (change)="filterForeCasts($event.target.value)" class="form-control input-sm" style="width:75px;height:32px">
<option value="0">All</option>
<option *ngFor="let p of pagging" value={{p}}>
{{p}}
</option>
</select>
</div>
<div class="col-sm-1">
<button value="+" class="btn-default" id="btnDomainInfo" (click)="openDomainInfo()">+</button>
</div>
</div>
<ag-grid-angular style="height: 450px;"
class="ag-theme-fresh"
[gridOptions]="gridOptions"
[rowData]="rowData" >
</ag-grid-angular>
<!--<h4>Row data from button 1: </h4>
<pre>{{rowDataClicked1 | json}}</pre>-->
<div class="modal" tabindex="-1" role="dialog" aria-hidden="true" id="modelpopup">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)='close()'>
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<div class="container">
<ag-grid-angular style="height: 450px;"
class="ag-theme-fresh"
[gridOptions]="gridOptionsSub"
[rowData]="subDomainRowData">
</ag-grid-angular>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" (click)='close()'>Close</button>
</div>
</div>
</div>
<div class="modal-background"></div>
</div>
-----------------------------------------------------------Manage page componentimport { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, NgForm, Validator } from '@angular/forms';
import { DomainsList } from '../model/DomainsList';
import { DomainInfoService } from '../service/domain.info.service';
import { debug } from 'util';
import { DomainInfoViewModel } from '../model/model-domaininfoview';
import { DomainInfo } from '../model/model-domaininfo';
import { Router } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbDate, NgbCalendar, NgbDateStruct, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { NgDatepickerModule, DatepickerOptions } from 'ng2-datepicker';
import * as frLocale from 'date-fns/locale/fr';
import { formatDate } from '@angular/common';
import { FTPofDomain } from "src/app/model/model-FTPs";
import { GridOptions, GridApi } from 'ag-grid-community';
import { ButtonRenderComponent } from '../button-render/button-render.component';
@Component({
selector: 'app-project-manage',
templateUrl: './project-manage.component.html',
styleUrls: ['./project-manage.component.scss'],
providers: [DomainInfoService]
})
export class ProjectManageComponent implements OnInit {
createdDate;
expiryDate;
hostingExpiryDate;
domainRegisterDate;
public FTPgridOptions: GridOptions;
options: DatepickerOptions = {
minYear: 1970,
maxYear: 2030,
displayFormat: 'MMM D[,] YYYY',
barTitleFormat: 'MMMM YYYY',
dayNamesFormat: 'dd',
firstCalendarDay: 0, // 0 - Sunday, 1 - Monday
locale: frLocale,
minDate: new Date(Date.now()), // Minimal selectable date
maxDate: new Date(Date.now()), // Maximal selectable date
barTitleIfEmpty: 'Click to select a date',
placeholder: 'Click to select a date', // HTML input placeholder attribute (default: '')
addClass: 'form-control', // Optional, value to pass on to [ngClass] on the input field
addStyle: {}, // Optional, value to pass to [ngStyle] on the input field
fieldId: 'my-date-picker', // ID to assign to the input field. Defaults to datepicker-<counter>
useEmptyBarTitle: false, // Defaults to true. If set to false then barTitleIfEmpty will be disregarded and a date will always be shown
};
domainsList: any[] = [];
domainInfo: DomainInfo = new DomainInfo();
addDomainInfo: FormGroup;
personList: any[] = [];
enableFTP: boolean = false;
enableFTPAdd: boolean = false;
display = 'none'; //default Variable
displayAdd = 'none';
displayUpdate = 'none';
displayFTPForm = 'none';
objFTPofDomain: FTPofDomain = new FTPofDomain();
GridFTPofDomain = [
{ headerName: 'Host', field: 'host' },
{ headerName: 'Port', field: 'port', width: 120, minWidth: 100, maxWidth: 120 },
{ headerName: 'UserName', field: 'userName' },
{ headerName: 'Password', field: 'pass' },
{
headerName: 'Edit',
cellRenderer: 'buttonRenderer',
cellRendererParams: {
onClick: this.onBtnFTPEdit.bind(this),
label: 'Edit'
}
, width: 100, minWidth: 100, maxWidth: 100
},
{
headerName: 'Delete',
cellRenderer: 'buttonRenderer',
cellRendererParams: {
onClick: this.onBtnFTPDelete.bind(this),
label: 'Delete'
}
, width: 150, minWidth: 150, maxWidth: 150
}
];
GridFTPofDomain2 = [
{ headerName: 'Host', field: 'host' },
{ headerName: 'Port', field: 'port', width: 120, minWidth: 100, maxWidth: 120 },
{ headerName: 'UserName', field: 'userName' },
{ headerName: 'Password', field: 'pass' }
];
FTPofDomainRowData: any[] = [];
frameworkComponents: any;
constructor(private _domainInfoService: DomainInfoService, private router: Router, private ngbDateParserFormatter: NgbDateParserFormatter) {
this.frameworkComponents = {
buttonRenderer: ButtonRenderComponent,
}
debugger;
this.FTPgridOptions = <GridOptions>{};
if (this.enableFTPAdd) {
this.FTPgridOptions.columnDefs = this.GridFTPofDomain;
} else {
this.FTPgridOptions.columnDefs = this.GridFTPofDomain2;
}
this.FTPgridOptions.pagination = true;
this.FTPgridOptions.paginationPageSize = 50;
this.FTPgridOptions.frameworkComponents = this.frameworkComponents
this.FTPgridOptions.enableSorting = true;
this.FTPgridOptions.enableFilter = true;
this.FTPgridOptions.suppressRowClickSelection = true;
this.FTPgridOptions.groupSelectsChildren = true;
this.FTPgridOptions.debug = true;
this.FTPgridOptions.rowSelection = 'multiple';
this.FTPgridOptions.rowHeight = 40;
this.FTPgridOptions.onRowClicked = function (event) {
};
this.FTPgridOptions.suppressRowClickSelection = true;
this.FTPgridOptions.suppressCellSelection = true;
}
ngOnInit() {
this.GetDomainsList();
this.GetUserList();
this.domainInfo.parentID = 0;
this.domainInfo.currentProjectStatus = "";
this.domainInfo.projectManageBy = "0";
let domainid = localStorage.getItem('domainId');
this.enableFTP = localStorage.getItem("enableFTP") !== "Add";
this.enableFTPAdd = localStorage.getItem("enableFTP") !== "Edit";
if (this.enableFTPAdd) {
this.FTPgridOptions.columnDefs = this.GridFTPofDomain2;
} else {
this.FTPgridOptions.columnDefs = this.GridFTPofDomain;
}
if (+domainid > 0) {
this._domainInfoService.getDomainInfoById(domainid).subscribe(data => {
this.domainInfo = data;
let dcreatedDate = this.ngbDateParserFormatter.parse(data.createdDate);
this.createdDate = dcreatedDate;
let dhostingExpiryDate = this.ngbDateParserFormatter.parse(data.hostingExpiryDate);
this.hostingExpiryDate = dhostingExpiryDate;
let ddomainRegisterDate = this.ngbDateParserFormatter.parse(data.domainRegisterDate);
this.domainRegisterDate = ddomainRegisterDate;
let dexpiryDate = this.ngbDateParserFormatter.parse(data.expiryDate);
this.expiryDate = dexpiryDate;
});
}
}
GetDomainsList() {
this._domainInfoService.getDomainsList().subscribe(data => {
this.domainsList = data;
});
}
GetUserList() {
this._domainInfoService.getUserList().subscribe(data => {
debugger;
this.personList = data;
});
}
onSubmit(domainInfo: NgForm, Type) {
let domainid = localStorage.getItem('domainId');
if (Type && Type == 'FTPofDomain' && +domainid > 0) {
this.objFTPofDomain.domainID = Number(domainid);
this._domainInfoService.addFTPDomainInfo(this.objFTPofDomain).subscribe(objFTPofDomain => {
this.GetFTPDomainInfoList();
});
//this.display = 'none';
} else {
let createdDate = this.ngbDateParserFormatter.format(this.createdDate);
this.domainInfo.createdDate = createdDate;
let hostingExpiryDate = this.ngbDateParserFormatter.format(this.hostingExpiryDate);
this.domainInfo.hostingExpiryDate = hostingExpiryDate;
let domainRegisterDate = this.ngbDateParserFormatter.format(this.domainRegisterDate);
this.domainInfo.domainRegisterDate = domainRegisterDate;
let expiryDate = this.ngbDateParserFormatter.format(this.expiryDate);
this.domainInfo.expiryDate = expiryDate;
if (+domainid > 0) {
this._domainInfoService.updateDomainInfo(this.domainInfo)
.subscribe(domainInfo => {
localStorage.removeItem("domainId");
this.router.navigate(['projectList']);
});
}
else {
this._domainInfoService.addDomainInfo(this.domainInfo)
.subscribe(domainInfo => {
localStorage.removeItem("domainId");
this.router.navigate(['projectList']);
});
}
}
}
//***** FTPDomain ************
GetFTPDomainInfoList() {
let domainid = localStorage.getItem('domainId');
if (+domainid > 0) {
this._domainInfoService.getFTPofDomainInfoList(domainid).subscribe(data => {
this.FTPofDomainRowData = data;
});
}
}
openFTPModalDialog(display) {
this.display = display;
if (display == 'block') {
this.GetFTPDomainInfoList();
this.displayAdd = 'none';
this.displayUpdate = 'none';
this.displayFTPForm = 'none';
}
}
AddFTPofDomain() {
this.objFTPofDomain.id = 0;
this.objFTPofDomain.host = "";
this.objFTPofDomain.pass = "";
this.objFTPofDomain.port = "";
this.objFTPofDomain.userName = "";
this.displayAdd = 'block';
this.displayUpdate = 'none';
this.displayFTPForm = 'block';
}
openFTPFormDialog(display) {
this.displayFTPForm = display;
}
onBtnFTPEdit(e) {
this.objFTPofDomain.id = e.rowData["id"];
this.objFTPofDomain.host = e.rowData["host"];
this.objFTPofDomain.pass = e.rowData["pass"];
this.objFTPofDomain.port = e.rowData["port"];
this.objFTPofDomain.userName = e.rowData["userName"];
this.displayAdd = 'none';
this.displayUpdate = 'block';
this.displayFTPForm = 'block';
}
AddUpdateFTPofDomain(Type) {
let domainid = localStorage.getItem('domainId');
if (Type && Type == 'Add' && +domainid > 0) {
this.objFTPofDomain.domainID = Number(domainid);
this._domainInfoService.addFTPDomainInfo(this.objFTPofDomain).subscribe(objFTPofDomain => {
this.GetFTPDomainInfoList();
});
} else if (Type && Type == 'Update' && +domainid > 0) {
this.objFTPofDomain.domainID = Number(domainid);
this._domainInfoService.updateFTPDomainInfo(this.objFTPofDomain).subscribe(objFTPofDomain => {
this.GetFTPDomainInfoList();
});
}
this.displayFTPForm = 'none';
}
onBtnFTPDelete(e) {
if (confirm("Are you sure to delete " + e.rowData["host"])) {
this._domainInfoService.deleteFTPDomainInfo(Number(e.rowData["id"])).subscribe(objFTPofDomain => {
this.GetFTPDomainInfoList();
});
}
}
//***** End FTPDomain ************
}
------------------------------------------------------------
View
<section class="forms">
<div class="container-fluid">
<!-- Page Header-->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header d-flex align-items-center">
<h4>Project Info</h4>
</div>
<div class="card-body">
<form #addDomainInfo="ngForm" (ngSubmit)="onSubmit(addDomainInfo)">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<select name="parentID" [(ngModel)]="domainInfo.parentID" class="form-control" id="parentID" #parentID="ngModel">
<option disabled selected value="0">Choose a domain</option>
<option *ngFor="let domains of domainsList" [ngValue]="domains.id">
{{ domains.domainName }}
</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select name="parentID" [(ngModel)]="domainInfo.parentID" class="form-control" id="parentID" #parentID="ngModel">
<option disabled selected value="0">Choose a domain</option>
<option *ngFor="let domains of domainsList" [ngValue]="domains.id">
{{ domains.domainName }}
</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Domain Name</label>
<input type="text" placeholder="Domain Name" class="form-control" id="domainName" name="domainName" #domainName="ngModel" [(ngModel)]="domainInfo.domainName">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Hosting On</label>
<input type="text" placeholder="Hosting On" class="form-control" id="hostingOn" name="hostingOn" #hostingOn="ngModel" [(ngModel)]="domainInfo.hostingOn">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Domain Register On</label>
<input type="text" placeholder="Domain Register On" class="form-control" #registerOn="ngModel" name="registerOn" id="registerOn" [(ngModel)]="domainInfo.registerOn">
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Created Date</label>
<!--<input type="date" placeholder="yyyy-mm-dd" class="form-control" #createdDate="ngModel" name="createdDate" id="createdDate" [(ngModel)]="domainInfo.createdDate">-->
<input class="form-control" placeholder="yyyy-mm-dd" autocomplete="off"
name="createdDate" [(ngModel)]="createdDate" ngbDatepicker #dcreatedDate="ngbDatepicker" (click)="dcreatedDate.toggle()" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Expiry Date</label>
<input class="form-control" placeholder="yyyy-mm-dd" autocomplete="off"
name="hostingExpiryDate" [(ngModel)]="hostingExpiryDate" ngbDatepicker #dhostingExpiryDate="ngbDatepicker" (click)="dhostingExpiryDate.toggle()" />
<!--<input type="date" placeholder="yyyy-mm-dd" class="form-control"
#hostingExpiryDate="ngModel" name="hostingExpiryDate" id="hostingExpiryDate" [(ngModel)]="domainInfo.hostingExpiryDate">-->
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Domain Regster Account Costomer ID</label>
<input type="text" placeholder="Domain Regster Account Costomer ID" class="form-control" #domainRegisterAccountCustomerID="ngModel" name="domainRegisterAccountCustomerID" id="domainRegisterAccountCustomerID" [(ngModel)]="domainInfo.domainRegisterAccountCustomerID">
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Cpanel User ID</label>
<input type="text" placeholder="Cpanel User ID" class="form-control" #cpanelUserName="ngModel" name="cpanelUserName" id="cpanelUserName" [(ngModel)]="domainInfo.cpanelUserName">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Cpanel Password</label>
<input type="Password" placeholder="Cpanel Password" class="form-control" #cpanelPassword="ngModel" name="cpanelPassword" id="cpanelPassword" [(ngModel)]="domainInfo.cpanelPassword">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Domain Regster Account User ID</label>
<input type="text" placeholder="Domain Regster Account User ID" class="form-control" #domainRegisterUserID="ngModel" name="domainRegisterUserID" id="domainRegisterUserID" [(ngModel)]="domainInfo.domainRegisterUserID">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>SSL Register On</label>
<input type="text" placeholder="SSL Register On" class="form-control" #sslCertificationAccount="ngModel" name="sslCertificationAccount" id="sslCertificationAccount" [(ngModel)]="domainInfo.sslCertificationAccount">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Domain Regster Account Password</label>
<input type="text" placeholder="Domain Regster Account Password" class="form-control" #domainRegisterPassword="ngModel" name="domainRegisterPassword" id="domainRegisterPassword" [(ngModel)]="domainInfo.domainRegisterPassword">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>SSL Account UserID</label>
<input type="text" placeholder="SSL Account UserID" class="form-control" #sslRegisterAccountUser="ngModel" name="sslRegisterAccountUser" id="sslRegisterAccountUser" [(ngModel)]="domainInfo.sslRegisterAccountUser">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Domain Regster Account 4 Digite Pin</label>
<input type="text" placeholder="Domain Regster Account 4 Digite Pin" class="form-control" #domainRegisterAccountPin="ngModel" name="domainRegisterAccountPin" id="domainRegisterAccountPin" [(ngModel)]="domainInfo.domainRegisterAccountPin">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>SSL Account Password</label>
<input type="password" placeholder="SSL Account Password" class="form-control" #sslRegisterAccountPass="ngModel" name="sslRegisterAccountPass" id="sslRegisterAccountPass" [(ngModel)]="domainInfo.sslRegisterAccountPass">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Domain Register Date</label>
<input class="form-control" placeholder="yyyy-mm-dd" autocomplete="off"
name="domainRegisterDate" [(ngModel)]="domainRegisterDate" ngbDatepicker #ddomainRegisterDate="ngbDatepicker" (click)="ddomainRegisterDate.toggle()" />
<!--<input type="date" placeholder="yyyy-mm-dd" class="form-control" #domainRegisterDate="ngModel" name="domainRegisterDate" id="domainRegisterDate" [(ngModel)]="domainInfo.domainRegisterDate">-->
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Domain Expire Date</label>
<input class="form-control" placeholder="yyyy-mm-dd" autocomplete="off"
name="expiryDate" [(ngModel)]="expiryDate" ngbDatepicker #dexpiryDate="ngbDatepicker" (click)="dexpiryDate.toggle()" />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Project Name</label>
<input type="text" placeholder="Project Name" class="form-control" #projectName="ngModel" name="projectName" id="projectName" [(ngModel)]="domainInfo.projectName">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Database Name</label>
<input type="text" placeholder="Database Name" class="form-control" #databaseName="ngModel" name="databaseName" id="databaseName" [(ngModel)]="domainInfo.databaseName">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Project Path</label>
<input type="text" placeholder="Project Path" class="form-control" #projectPath="ngModel" name="projectPath" id="ProjectPath" [(ngModel)]="domainInfo.projectPath">
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Database User</label>
<input type="text" placeholder="Database User" class="form-control" #databaseUserName="ngModel" name="databaseUserName" id="databaseUserName" [(ngModel)]="domainInfo.databaseUserName">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Database Password</label>
<input type="Password" placeholder="Database Password" class="form-control" #databasePassword="ngModel" name="databasePassword" id="databasePassword" [(ngModel)]="domainInfo.databasePassword">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Project Status</label>
<select name="currentProjectStatus" [(ngModel)]="domainInfo.currentProjectStatus" class="form-control" id="currentProjectStatus" #currentProjectStatus="ngModel">
<option value="" disabled selected>Choose a Project Status</option>
<option value="Continue" selected>Continue</option>
<option value="On Hold" selected>On Hold</option>
<option value="Completed" selected>Completed</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Database Server Name</label>
<input type="text" placeholder="Database Server Name" class="form-control" #databaseServerName="ngModel" name="databaseServerName" id="databaseServerName" [(ngModel)]="domainInfo.databaseServerName">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Database Type</label>
<input type="text" placeholder="Database Type" class="form-control" #databaseType="ngModel" name="databaseType" id="databaseType" [(ngModel)]="domainInfo.databaseType">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Project Manage By</label>
<select name="projectManageBy" [(ngModel)]="domainInfo.projectManageBy" class="form-control" id="projectManageBy" #projectManageBy="ngModel">
<option disabled selected value="0">Choose a person</option>
<option *ngFor="let person of personList" [value]="person?.id">
{{ person.firstName }} {{ person.lastName }}
</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Technoloty Used</label>
<input type="text" placeholder="Technoloty Used" class="form-control" #technologyUsed="ngModel" name="technologyUsed" id="technologyUsed" [(ngModel)]="domainInfo.technologyUsed">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Project Admin Panel Url</label>
<input type="text" placeholder="Project Admin Panel Url" class="form-control" #adminPanelUrl="ngModel" name="adminPanelUrl" id="adminPanelUrl" [(ngModel)]="domainInfo.adminPanelUrl">
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Admin Panel User ID</label>
<input type="text" placeholder="Admin Panel User ID" class="form-control" #adminPanelUserName="ngModel" name="adminPanelUserName" id="adminPanelUserName" [(ngModel)]="domainInfo.adminPanelUserName">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Admin Panel Password</label>
<input type="password" placeholder="Admin Panel Password" class="form-control" #adminPanelPassword="ngModel" name="adminPanelPassword" id="adminPanelPassword" [(ngModel)]="domainInfo.adminPanelPassword">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="i-checks">
<input type="checkbox" value="" class="form-control-custom" #isActive="ngModel" name="isActive" id="isActive" [(ngModel)]="domainInfo.isActive">
<label for="isActive">Is Active</label>
</div>
</div>
</div>
<div class="col-sm-6" *ngIf="enableFTP">
<div class="form-group">
<input type="button" value="View FTPs" *ngIf="enableFTP" class="btn btn-primary" (click)="openFTPModalDialog('block')">
</div>
</div>
</div>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display':display}">
<div class="modal-dialog FTPofDomainmodal" role="document">
<div class="modal-content" style="width: 100%;">
<div class="modal-header">
<h4 class="modal-title fa-align-left">FTPs</h4>
<div class="col-sm-1" *ngIf="!enableFTPAdd">
<button type="button" class="btn btn-default" (click)="AddFTPofDomain('none')">Add</button>
</div>
</div>
<div class="modal-body">
<div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display':displayFTPForm}">
<div class="modal-dialog" role="document">
<div class="modal-content" style="width: 100%;">
<div class="modal-header">
<h4 class="modal-title fa-align-left">FTPs</h4>
</div>
<div class="modal-body">
<form #addFTPofDomain="ngForm">
<div class="cross-validation" [class.cross-validation-error]="addFTPofDomain.errors?.identityRevealed && (addFTPofDomain.touched || addFTPofDomain.dirty)">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Host</label>
<input type="text" required placeholder="Host" class="form-control" id="host" name="host" #host="ngModel" [(ngModel)]="objFTPofDomain.host">
<div *ngIf="host.invalid && (host.dirty || host.touched)"
class="alert alert-danger">
<div *ngIf="host.errors.required">
Host is required.
</div>
</div>
<input type="hidden" id="id" name="id" #id="ngModel" [(ngModel)]="objFTPofDomain.id" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Port</label>
<input type="text" required placeholder="Port" class="form-control" id="port" name="port" #port="ngModel" [(ngModel)]="objFTPofDomain.port">
<div *ngIf="port.invalid && (port.dirty || port.touched)"
class="alert alert-danger">
<div *ngIf="port.errors.required">
port is required.
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Username</label>
<input type="text" required placeholder="User name" class="form-control" id="username" name="username" #username="ngModel" [(ngModel)]="objFTPofDomain.userName">
<div *ngIf="username.invalid && (username.dirty || username.touched)"
class="alert alert-danger">
<div *ngIf="username.errors.required">
Username is required.
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Password</label>
<input type="text" required placeholder="Password" class="form-control" id="password" name="password" #password="ngModel" [(ngModel)]="objFTPofDomain.pass">
<div *ngIf="password.invalid && (password.dirty || password.touched)"
class="alert alert-danger">
<div *ngIf="password.errors.required">
Password is required.
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="openFTPFormDialog('none')">Close</button>
<button type="submit" class="btn btn-default" [ngStyle]="{'display':displayAdd}" (click)="AddUpdateFTPofDomain('Add')" [disabled]="addFTPofDomain.invalid">Add</button>
<button type="submit" class="btn btn-default" [ngStyle]="{'display':displayUpdate}" (click)="AddUpdateFTPofDomain('Update')" [disabled]="addFTPofDomain.invalid">Update</button>
</div>
</div>
</div>
</div>
<ag-grid-angular style="height: 500px;"
class="ag-theme-fresh"
[gridOptions]="FTPgridOptions"
[rowData]="FTPofDomainRowData">
</ag-grid-angular>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="openFTPModalDialog('none')">Close</button>
</div>
</div>
</div>
</div>
</section>
<br />
Buttone Render in grid <button type="button" class="btnbg" (click)="onClick($event)">
<img src="../../assets/img/view.png" class="imgmargin" />View
</button> ----------------------------------------------------------------------
Component
import { Component, OnInit } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { ICellRendererParams, IAfterGuiAttachedParams } from 'ag-grid-community'
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-button-render',
templateUrl: './button-render.component.html',
styleUrls: ['./button-render.component.scss']
})
export class ButtonRenderComponent implements ICellRendererAngularComp{
closeResult: string;
params;
label: string;
agInit(params): void {
this.params = params;
this.label = this.params.label || null;
}
refresh(params?: any): boolean {
return true;
}
constructor(private modalService: NgbModal) {
}
onClick($event) {
if (this.params.onClick instanceof Function) {
// put anything into params u want pass into parents component
const params = {
event: $event,
rowData: this.params.node.data
// ...something
}
this.params.onClick(params);
}
}
open(content) {
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
}
No comments:
Post a Comment