How to retrieve data from ngx-modal on submit angular 5

Issue I am using ngx-modal to create dialog, below is the code in html <button (click)=”myModal.open()”>Click Me</button> <modal #myModal cancelButtonLabel=”Cancel All [(ngModel)]=”rfin” submitButtonLabel=”submit” (onSubmit)=”callSubmit()”> <modal-content > <mat-card> <mat-card-content > <h2 class=”example-h2″>Select Emp</h2><br> <section class=”example-section” *ngFor=”let ep of emp” > <ng-template>

Continue reading

Angular5 – How to detect empty or deleted field in mat-autocomplete?

Issue This is my html which contains the material autocomplete. <ng-container *ngSwitchCase=”‘autocomplete'”> <div [ngClass]=”(filter.cssClass || ‘col-md-4’) + ‘ mt-2 pt-1′”> <div class=”filter-key-label”> {{filter.columnTitle}} </div> <div class=”filter-form-control d-flex flex-wrap justify-content-left”> <mat-form-field class=”full-width”> <input type=”text” matInput [formControl]=”myControl” [matAutocomplete]=”auto” ng-model=”blah”> <mat-autocomplete #auto=”matAutocomplete”> <mat-option

Continue reading

Circular dependency error in angular 5

Issue Always I’m getting warning that is circular dependency WARNING in Circular dependency detected: src\app\auth\logout\logout.component.ts -> src\app\auth\_services\authentication.service.ts -> src\app\app.module.ts -> src\app\app-routing.module.ts -> src\app\auth\logout\logout.component.ts WARNING in Circular dependency detected: src\app\theme\layouts\header-nav\header-nav.component.ts -> src\app\_services\data\emp.service.ts -> src\app\app.module.ts -> src\app\theme\layouts\layout.module.ts -> src\app\theme\layouts\header-nav\header-nav.component.ts WARNING in Circular

Continue reading

(Editing Angular 5) I can't get the values of the object that is in NgModel

Issue I could not get the object of this field component.html <div class=”form-group”> <input type=”number” name=”totalPrice” class=”form-control” #lastname=”ngModel”[(ngModel)]=”invoiceService.selectedInvoice.totalPrice” readonly> </div> <!– working ok –> <div class=”form-group”> <input type=”number” name=”purchases” class=”form-control” #purchases=”ngModel” [(ngModel)]=”invoiceService.selectedInvoice.purchases[‘product’]” readonly> </div><!– not working –> this the element

Continue reading

interceptors in angular 5

Issue I create interceptors in project angular 5 but dosen’t work, i inject interceptor in file app.module.ts but also error and also i add console.log in interceptors for test but console.log not displayed code interceptors: import { Injectable } from

Continue reading

ERROR in Metadata version mismatch for module /var/www/html/idi/client2/node_modules/@ng-idle/keepalive/index.d.ts

Issue i have added ng-idle/keepalive. this is my package.json file { “name”: “azimuth”, “version”: “1.1.0”, “license”: “MIT”, “scripts”: { “ng”: “ng”, “start”: “ng serve”, “build”: “ng build”, “test”: “ng test”, “lint”: “ng lint”, “e2e”: “ng e2e”, “install”: “napa” }, “private”:

Continue reading

How can I get my Angular5 spyOn to work as expected?

Issue My test is not detecting changes. Here is my component: toggleUploadModal() { const modalRef = this.ngbModal.open(UploadFilesComponent, { size: ‘lg’, backdrop: ‘static’ }); modalRef.componentInstance.DeliverableTransaction = this.transactionDetails; modalRef.result.then((res) => { if (res.status === ‘success’) { this.deliverableTransactionService.updateDeliverableTransaction(this.route.snapshot.params.id, { submissionStatus: ‘In Process’ })

Continue reading

Angular 5 – include jquery plugin

Issue Im new to angular, currently working with version 5. I have to install a plugin called ‘jquery-circle-progress’, which can be found here: http://kottenator.github.io/jquery-circle-progress/ I’ve installed it with via npm, and added the .js file to .angular-cli.json scripts array. It

Continue reading

TemplateRef and click event

Issue I have a common template for different components but some buttons. So, I create a common component and change this buttons with ng-template: <component-common [buttonTemplate]=”buttonTemplate”> </component-common> <ng-template #buttonTemplate let-element=”element” let-method> <button (click)=”method”> element.name </button> </ng-template> In component-common.component.ts: export class

Continue reading

TemplateRef and click event

Issue I have a common template for different components but some buttons. So, I create a common component and change this buttons with ng-template: <component-common [buttonTemplate]=”buttonTemplate”> </component-common> <ng-template #buttonTemplate let-element=”element” let-method> <button (click)=”method”> element.name </button> </ng-template> In component-common.component.ts: export class

Continue reading

excel upload in Angular 5

Issue I am trying to export data to excel in angular 5 by using below code. Excel downloaded successfully. But data in excel is showing like: downloadReport(data:any){ let blob = new Blob([data], { type:’text/html’ }); let url= window.URL.createObjectURL(blob); var a

Continue reading

Angular Bootstrap Modal value setting inconsistency

Issue Update 2 <div *ngFor=”let c of uiVideos;let i= index” class=”row curriculum-single”> <button style=”display:none” data-toggle=”modal” data-target=”#videoReplace”></button> <app-upload-modal [id]=”i” ></app-upload-modal> </div> Update 1: Here is my upload-modal.ts export class UploadModalComponent implements OnInit { constructor() { } @Input() id:number; @ViewChild(‘toggleButton’) private toggleButton

Continue reading

Does not trigger the Web API from Angular 5

Issue I have attached my Component.ts, service.TS, AND in Web Api. Can you help me to get data from SP. I am using MVC . This is my component.ts GetComponentListForGrid() {this._componentservice.getAllComponentList(this.compartid_auto,this.progid,this.ComponentId,this.ComponentDescription,this.ComponentType, this.ComponentMake,this.EquipModel).subscribe(result => { console.log(‘GetAvailableCompartsAll’, result); this._componentList.push(…result); }, error =>

Continue reading

How to display Dropdown selected Item using Angular5/6?

Issue I want to display selected item in Dropdown list based on id. <div class=”formrow” *ngFor=’let a of applicantName’> <label>Status Selection :</label> <select id=”AStatus” formControlName=”AStatus” class=”form-control”> <option value=”0″>All</option> <option *ngFor=”let apt of applicantStatus” [value]=”apt.ApplicantStatusID” [selected]=”apt.ApplicantStatusID === a.Status”> {{ apt.ApplicantStatus }}

Continue reading

Angular 5 : how to dynamically bind events on button from a list

Issue <div id=”home” class=”tab-pane fade in” style=”text-align:left;opacity: 1;” > <button *ngFor=”let tool of toolArray” class=”m-btn btn btn-secondary” type=”button” (click)=”{{tool.ToolMethod}}()” placement=”bottom” ngbTooltip=”{{tool.Tooltip}}”> <img src={{tool.ToolImgPath}} alt=”” width=”24″ height=”24″/> </button> </div> Lets say , I have some tools managed by admin , if

Continue reading

NgIf block in Angular breaks Http Call

Issue Without the ngIf block the http call works fine and the table is getting populated without any issues but with the ngIf block, i m getting the error as <div *ngIf=”isloading; else other_content”> <ng-template #content> <mat-progress-spinner [color]=”color” [mode]=”mode” [value]=”value”>

Continue reading

Font awesome icons not showing up in Angular 5

Issue I installed it according to the instructions. First I’ve typed npm install –save font-awesome angular-font-awesome And it installed everything correctly. Then I changed in .angular-cli.json to contain the css like so: “styles”: [ “styles.css”, “../node_modules/font-awesome/css/font-awesome.min.css” ], And when I

Continue reading

Getting undefined of inner array of JSON response in angular

Issue I have below JSON from api [ { “CinemaId”: “Hfsdfsdfs”, “FilmCode”: “HIWdfsdfsfsf47”, “FilmTitle”: “BAfsdfAAR”, “CinemaName”: “CsfsnfsfsAhmedabad”, “CinemaCity”: “Ahmedabad”, “CinemaLicenseName”: “BIGdfsfsAhmedabad”, “CinemaEmailId”: “himfsfsfilms.com”, “CinemaBannerImg”: “F&BCombo.jpg”, “CinemaAddress”: “5fsfdsfsdin Road, 380052, “, “CinemaMobile”: “93dfsdf17441”, “CinemaTel”: “0”, “CinemaLocation”: “<iframe src=\”fsdfdsdfdsf\” width=\”600\” height=\”450\” frameborder=\”0\”

Continue reading