File
Extends
Metadata
| selector |
common-sample-modal |
| styleUrls |
./sample-modal.component.scss |
| templateUrl |
./sample-modal.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
Public
closeModal
|
closeModal()
|
|
|
|
|
|
Public
openModal
|
openModal()
|
|
|
|
|
|
Public
sampleModal
|
Type : ModalDirective
|
Decorators :
@ViewChild('samplesModal')
|
|
|
|
Public
objectId
|
Type : string
|
Default value : UUID.UUID()
|
|
|
|
|
An identifier for parents to keep track of components
|
import { Component, Input, ViewChild } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap/modal';
import { Base } from '../../models/base';
export interface SampleImageInterface {
path: string;
desc: string;
title?: string;
}
@Component({
selector: 'common-sample-modal',
templateUrl: './sample-modal.component.html',
styleUrls: ['./sample-modal.component.scss']
})
export class SampleModalComponent extends Base {
@Input() title: string;
@Input() images: SampleImageInterface[] = [];
@ViewChild('samplesModal') public sampleModal: ModalDirective;
constructor() {
super();
}
public openModal(): void {
this.sampleModal.show();
}
public closeModal(): void {
this.sampleModal.hide();
}
}
<div bsModal #samplesModal="bs-modal"
class="modal"
role="dialog"
[attr.aria-labelledby]="'samplesModalTitle_' + objectId"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header modal-header-primary">
<h2 class="modal-title pull-left" [id]="'samplesModalTitle_' + objectId">{{title}}</h2>
<a class="pull-right" (click)="closeModal()" aria-label="Close">
<i class="text-danger fa fa-2x fa-times"></i>
</a>
</div>
<div class="modal-body">
<div *ngFor="let image of images" class="fpcare-sample--row">
<label for="image_{{objectId}}" *ngIf="image?.title">{{image.title}}</label>
<img class="fpcare-sample--image" id="image_{{objectId}}" src="{{image.path}}" alt="{{image.desc}}"/>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-block btn-primary pull-left"
type="submit"
(click)="closeModal()">Close</button>
</div>
</div>
</div>
</div>
Legend
Html element with directive