José Fernando Costa Ze1598
Ze1598
/ app.component.css
Created
December 28, 2019 14:43
Reusable modal component: app.component.css (first version)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #logout-button { | |
| color: white; | |
| background-color: #16163f; | |
| border: 1px solid black; | |
| } | |
| #delete-product-button { | |
| color: white; | |
| background-color: #145214; | |
| border: 1px solid black; |
Ze1598
/ modal.component.html
Last active
December 28, 2019 15:02
Reusable modal component: modal.component.html (first version)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="modal-content-wrapper"> | |
| <header id="modal-header"> | |
| <h1 id="modal-title">Placeholder title</h1> | |
| </header> | |
| <section id="modal-body"> | |
| <p>Placeholder description</p> | |
| </section> | |
| <footer id="modal-footer"> | |
| <button mat-raised-button id="modal-action-button" (click)="actionFunction()"> | |
| Do it |
Ze1598
/ modal.component.css
Last active
December 28, 2019 17:11
Reusable modal component: modal.component.css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #modal-content-wrapper { | |
| width: 100%; | |
| height: 100%; | |
| display: grid; | |
| color: white; | |
| } | |
| #modal-title { | |
| font-size: 22px; | |
| } |
Ze1598
/ modal.component.ts
Created
December 28, 2019 15:04
Reusable modal component: modal.component.ts (first version)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Component, OnInit } from '@angular/core'; | |
| import { MatDialogRef } from '@angular/material/dialog'; | |
| @Component({ | |
| selector: 'app-modal', | |
| templateUrl: './modal.component.html', | |
| styleUrls: ['./modal.component.css'] | |
| }) | |
| export class ModalComponent implements OnInit { |
Ze1598
/ app.component.ts
Created
December 28, 2019 17:25
Reusable modal component: app.component.ts (second version)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Component } from '@angular/core'; | |
| import { MatDialog, MatDialogConfig } from '@angular/material/dialog'; | |
| import { ModalComponent } from './components/modal/modal.component'; | |
| @Component({ | |
| selector: 'app-root', | |
| templateUrl: './app.component.html', | |
| styleUrls: ['./app.component.css'] | |
| }) | |
| export class AppComponent { |
Ze1598
/ app.component.html
Created
December 28, 2019 17:32
Reusable modal component: app.component.html (final version)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <main id="logout-button-holder"> | |
| <button mat-raised-button id="logout-button" (click)="openLogoutModal()">Logout</button> | |
| <button mat-raised-button id="delete-product-button" (click)="openDeleteProductModal()">Delete Product</button> | |
| </main> |
Ze1598
/ app.component.ts
Created
December 28, 2019 17:33
Reusable modal component: app.component.ts (final version)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Component } from '@angular/core'; | |
| import { MatDialog, MatDialogConfig } from '@angular/material/dialog'; | |
| import { ModalComponent } from './components/modal/modal.component'; | |
| @Component({ | |
| selector: 'app-root', | |
| templateUrl: './app.component.html', | |
| styleUrls: ['./app.component.css'] | |
| }) | |
| export class AppComponent { |
Ze1598
/ modal.component.ts
Created
December 28, 2019 18:09
Reusable modal component: modal.component.ts (second version)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Component, OnInit, Inject } from '@angular/core'; | |
| import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; | |
| @Component({ | |
| selector: 'app-modal', | |
| templateUrl: './modal.component.html', | |
| styleUrls: ['./modal.component.css'] | |
| }) | |
| export class ModalComponent implements OnInit { |
Ze1598
/ modal.component.html
Created
December 28, 2019 18:19
Reusable modal component: modal.component.html (second version)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="modal-content-wrapper"> | |
| <header id="modal-header"> | |
| <h1 id="modal-title">{{ modalData.title }}</h1> | |
| </header> | |
| <section id="modal-body"> | |
| <p>{{ modalData.description }}</p> | |
| </section> | |
| <footer id="modal-footer"> | |
| <button mat-raised-button id="modal-action-button" (click)="actionFunction()"> | |
| {{ modalData.actionButtonText }} |
Ze1598
/ modal-actions.service.ts
Last active
December 28, 2019 18:43
Reusable modal component: modal-actions.service.ts (first version)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Injectable } from '@angular/core'; | |
| @Injectable({ | |
| providedIn: 'root' | |
| }) | |
| export class ModalActionsService { | |
| constructor() { } | |
| modalAction(modalData: any) { |