Scribd
Upload
86 views3 pages

Modal Angular - Google Docs

This document shows how to create an Angular modal component. It generates a modal module and component, defines the modal HTML and component class, imports the modal module, and displays a sample modal with header, body and footer when a button is clicked.

Uploaded by

Leader Leader
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
86 views3 pages

Modal Angular - Google Docs

This document shows how to create an Angular modal component. It generates a modal module and component, defines the modal HTML and component class, imports the modal module, and displays a sample modal with header, body and footer when a button is clicked.

Uploaded by

Leader Leader
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

modal angular

1 : ng g m modal
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { UiModalComponent } from './ui-modal/ui-modal.component';

@NgModule({
declarations: [ UiModalComponent ],
imports: [ CommonModule ],
exports: [ UiModalComponent]
})
export class ModalModule {}

2 : ng g c ui-modal

html ui-modal :
<div (click)="onContainerClicked($event)" class="basic modal fade"
tabindex="-1" role="dialog" aria-hidden="true"
[ngClass]="{'in': visibleAnimate}"
[ngStyle]="{'display': visible ? 'block' : 'none', 'opacity':
visibleAnimate ? 1 : 0}">
<div class="modal-dialog" role="document" [ngClass]="dialogClass">
<div class="modal-content">
<div *ngIf="!hideHeader" class="modal-header">
<ng-content select=".app-modal-header"></ng-content>
</div>
<div class="modal-body">
<ng-content select=".app-modal-body"></ng-content>
</div>
<div *ngIf="!hideFooter" class="modal-footer">
<ng-content select=".app-modal-footer"></ng-content>
</div>
</div>
</div>
</div>
ts ui-modal :
import { Component, Input, OnInit, ViewEncapsulation } from
'@angular/core';

@Component({
selector: 'app-ui-modal',
templateUrl: './ui-modal.component.html',
styleUrls: [ './ui-modal.component.css' ],
encapsulation: ViewEncapsulation.None
})
export class UiModalComponent implements OnInit {
@Input() dialogClass: string;
@Input() hideHeader = false;
@Input() hideFooter = false;
@Input() containerClick = true;
public visible = false;
public visibleAnimate = false;
constructor() {}

ngOnInit() {}
public show(): void {
this.visible = true;
setTimeout(() => (this.visibleAnimate = true), 100);
document.querySelector('body').classList.add('modal-open');
}

public hide(): void {


this.visibleAnimate = false;
setTimeout(() => (this.visible = false), 300);
document.querySelector('body').classList.remove('modal-open');
}

public onContainerClicked(event: MouseEvent): void {


if ((event.target as HTMLElement).classList.contains('modal')
&& this.containerClick === true) {
this.hide();
}
}
}

3: app.modules.ts
import { ModalModule } from './components/modal/modal.module';
4: je veux afficher le modal dans le components matches
<div>
<button type="button" class="btn btn-primary"
(click)="modalDefault.show()">Launch demo modal</button>
<app-ui-modal #modalDefault>
<div class="app-modal-header">
<h5 class="modal-title">Modal Title</h5>
<button type="button" class="close basic-close"
data-dismiss="modal" aria-label="Close"
(click)="modalDefault.hide()"><span
aria-hidden="true">&times;</span></button>
</div>
<div class="app-modal-body">
<p>Woohoo, you're reading this text in a modal!</p>
</div>
<div class="app-modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal"
(click)="modalDefault.hide()">Close</button>
<button type="button" class="btn btn-primary">Save
changes</button>
</div>
</app-ui-modal>
</div>

resultat :

You might also like