AngularJs6 using with Asp.net Core Web API 2

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

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 commponentName

List 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">&times;</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 component

import { 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 }}&nbsp;{{ 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}`;
    }
  }
}