Hey there, fellow developers!
I have a question that might seem simple.
So, in my HTML code I've got a Modal Dialog that pops up using ng2 Bootstrap. It's working fine, but... I want to replace this line of code
"<button class="btn btn-primary" (click)="showModal()">Login</button>"(showModal())
and turn it into a function in my TypeScript file like this:
showModal(modal: ModalDirective) {
}
Any tips on how I can achieve this? I've been struggling for over an hour now.
Here's the 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="Username">
<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="Password">
<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 here's my full TypeScript 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) {
}
}