I am trying to implement a button that calls a function from a different component to open a modal form, passing the customer's name and an icon as parameters.
When I call the function like this:
@Component({
selector: 'app-customer',
templateUrl: './customer.component.html',
providers: [Items]
})
export class Customers {
@Input() customerName
constructor() {}
openDocs() {
Items.prototype.openDocs(this.customerName, "fa-book")`;
}
}
Everything works fine. But if I have it in the constructor and call it like:
constructor(private items: Items) {}
openDocs() {
this.items.openDocs(this.customerName, "fa-book")`;
}
The parameters are not binding correctly.
Any explanation or suggestions would be greatly appreciated!
Update.. items.component.ts
import { Component } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { MainService } from '../services/main.service'
var JQuery = require('jquery');
@Component({
selector: 'app-items',
templateUrl: './items.component.html'
})
export class Items {
public Title: string;
public faIcon: string;
typeList = [
{
idType: "",
dsType: ""
}
]
constructor(private http: Http, private mainService: MainService) {
this.getItemsType();
}
getItemsType() {
this.http.get('/Items/GetItemsType')
.subscribe(data => {
var objType = JSON.parse(data.json());
for (var i in objType) {
if (objType[i] != null) {
this.typeList.push(objType[i]);
}
}
});
}
openDocs(pTitle: string, pIcon: string) {
this.Title = pTitle;
this.faIcon = pIcon;
JQuery('#docs').modal('show');
}
private closeDocs() {
JQuery('#docs').css("display", "none");
JQuery('#docs').modal('hide');
}
}
and the bind is two way
<h4 ng-model="Title" ><i class="fa {{faIcon}}"></i> Add some list: {{Title}}</h4>