My modal dialog as a funciton in ts file - angularjs

Question

Hello my fellow stackoverflowers,
I guess i have a simple question.
In my html i have a Modal Dialog that pops up. It uses ng2 Bootstrap. It works and all but... I want this code
"<button class="btn btn-primary" (click)="showModal()">Login</button>"
(showModal())
replace it in my ts file as a function
showModal(modal: ModalDirective) {
}
How can i do this? i am already struggling more then a hour.
This is my full HTML Code.
<button class="btn btn-primary" (click)="showModal()">Login</button>
<!-- Modal -->
<div bsModal #lgModal="bs-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
<span aria-hidden="true"> ×</span>
</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<form id="myForm" role="form" [ngFormModel]="CreateGroup">
<div class="form-group">
<div class="input-group">
<input type="text" [(ngModel)]='demoInfo.name' class="form-control" ngControl='name' placeholder="Gebruikersnaam">
<label for="uLogin" class="input-group-addon glyphicon glyphicon-user"></label>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="password" [(ngModel)]='demoInfo.password' class="form-control" ngControl='password' placeholder="Wachtwoord">
<label for="uPassword" class="input-group-addon glyphicon glyphicon-lock"></label>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" [disabled]='!CreateGroup.valid' (click)="addNewGroup(demoInfo)" class="btn btn-primary">Login</button>
</div>
</div>
</div>
</div>
and hits is my full TS code
import { Component } from '#angular/core';
import { ROUTER_DIRECTIVES } from '#angular/router';
import { CORE_DIRECTIVES, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder } from '#angular/common';
import { ModalDirective, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap';
class DemoInfo {
name: string;
password: string;
}
#Component({
template: require('./template.component.html'),
directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, ModalDirective],
viewProviders: [BS_VIEW_PROVIDERS]
})
export class ModalComponent {
CreateGroup: ControlGroup;
demoInfo: DemoInfo;
modal: ModalDirective;
constructor(fb: FormBuilder) {
this.demoInfo = new DemoInfo();
this.CreateGroup = fb.group({
'name': new Control(this.demoInfo.name),
'password': new Control(this.demoInfo.password)
})
}
addNewGroup(demoInfo: DemoInfo) {
console.log(demoInfo, 'whole object');
this.demoInfo = new DemoInfo();
}
showModal(modal: ModalDirective) {
}
hideModal(modal: ModalDirective) {
}
}

Answer 1

So this is what i did.
I added #ViewChild('lgModal') modal: any; in my ModalComponent
made a new function called showModal()
and referenced it by calling this.modal.dosomething();