I have created a dialog box that pops up when an event occurs, here is the code snippet:
public showMessageDialog(message) {
let config = new MdDialogConfig()
.title('Dialog Box:')
.textContent(message)
.ok('Got it') .;
this.dialog.open(MdDialogBasic, this.element, config);
}
Now I want to enhance it by adding an emoji icon when the dialog box appears.
Changing from this:
https://i.sstatic.net/17xjU.png
To this:
Update: While this solution is tailored for Angular Material 1, the same principles can be applied to AM2.
To implement this functionality, you'll need to utilize a custom dialog - check out the example on CodePen
HTML Markup
<div ng-controller="AppCtrl" class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak="" ng-app="MyApp">
<div class="dialog-demo-content" layout="row" layout-wrap="" layout-margin="" layout-align="center">
<md-button class="md-primary md-raised" ng-click="showAdvanced($event)">
Custom Dialog
</md-button>
<script type="text/ng-template" id="dialog1.tmpl.html"><md-dialog aria-label="Mango (Fruit)" ng-cloak>
<md-dialog>
<form>
<md-dialog-content>
<div class="md-dialog-content">
<p class="md-title"> Dialog Box: </p>
<div>
<p> Some message </p>
<img style="width:100px" src="...">
</div>
</div>
</md-dialog-content>
<md-dialog-actions layout="row">
<span flex></span>
<md-button class="md-primary" ng-click="answer('Got it')">
Got it
</md-button>
</md-dialog-actions>
</form>
</md-dialog>
</script>
</div>
JavaScript Functionality
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function($scope, $mdDialog, $mdMedia) {
$scope.status = ' ';
$scope.customFullscreen = false;
$scope.showAdvanced = function(ev) {
var useFullScreen = false;
$mdDialog.show({
controller: DialogController,
templateUrl: 'dialog1.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true,
fullscreen: useFullScreen
})
.then(function(answer) {
$scope.status = answer;
}, function() {
$scope.status = 'You cancelled the dialog.';
});
};
});
function DialogController($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
}
Currently, my goal is to deploy an Angular app using Nginx. Below is the nginx.conf file that I am utilizing to configure the Nginx server: user nginx; worker_processes auto; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; events ...
Attempting to implement a similar approach: <mat-select [(ngModel)]="food.id" mat-option="food.name for food of foods" placeholder="Favorite food"> Unfortunately, this method does not seem to be functioning as expected. Are there specific steps nee ...
Trying to debug a project written in Typescript using Next.js, but facing issues with bundling TS files from a local dependent common library. Only JS files are included, which is not sufficient for debugging. The goal is to bundle all TS files from the w ...
I am working on an Angular application for filtering data. I am populating a Mat-Table with information and implementing filters to minimize the number of displayed projects. One issue I am encountering is with the 'Project' interface, specifica ...
Looking to display two different texts depending on a boolean value. Here is what I attempted: <div name="health-plans" *ngIf="!flagon"> Test<br />data </div> <div name="health-plans&quo ...
Let's get straight to the point, I am working on a table component that takes in an Object containing all the necessary information for a dynamic table, including header details. My goal is to make it possible for each row of data to display its value ...
Looking to mock certain functions within a function I'm currently testing. In my code, there is a class with various static private functions that are called by the main function. Specifically, I want to verify the output of MyClass.functionD (which ...
I am developing an Angular application that utilizes Okta for authentication. I have specific pages where I only want to permit access if the user is not authenticated. Despite not finding any built-in guards or functions in the current version of the Okta ...
Currently developing a guitar tuning tool and facing some hurdles. Striving to create a function that can take a musical note, an octave, and a direction (up or down), then produce a transposed note by a half step based on the traditional piano layout (i. ...
I'm currently working on a project using Nuxt 3. One part of the application can only be accessed when the user is logged in. I'm trying to figure out how to turn off SSR for these specific routes, but still keep it enabled for the public routes. ...
The Scenario In my angular 7 application, I am fetching data from a web API in JSON format. The app is functioning correctly, but I believe I am making excessive API calls and can optimize it to just one call. Custom Class: export class customClass ...
I have been working on a form using mat-input, but I am facing an issue with the position of the input placeholder. Any suggestions on how to adjust the placeholder position? https://i.sstatic.net/RcT3C.png Below is the HTML code snippet: <mat-form-f ...
Following a two-hour search for a solution, I decided to reach out to experts as I suspected the answer might be simpler than expected. The project in question is an Angular7 one. In my goals component, I aim to include a "goal" with a button labeled "+". ...
My page contains two input fields: one is for email and the other is a text field. Currently, everything is functioning correctly. However, I now want to split the component into two parts. For example, I have a 'basic-info' component currently. ...
In my current setup, I have a tasks reducer that holds the following structure: { error: false, loading: false, tasks: [] } Now, this object is being passed down to a simple component like this: <task-list tasks="tasks$ | async"> ...
My goal is to develop a RouterUtilities class that extends Angular's Router. Despite the app running and compiling smoothly, when I run ng build --prod, it throws an error message like this: ERROR in : Can't resolve all parameters for RouterUtil ...
Consider this scenario where we have a component with input data: @Component({ selector: 'app-mail-list', templateUrl: './mail-list.component.html', styleUrls: ['./mail-list.component.scss']}); export class Ma ...
Handling a large and complex JSON object stored in a String variable can be tricky. Extracting specific elements, such as series_id and stadium, requires a clear understanding of how to navigate through the data. As a newcomer to angular2, the process mig ...
I recently upgraded to the latest version of angular 2 and discovered an interesting lazy load feature utilizing loadChildren. Let me illustrate with a simple example export const routes: Routes = [ { path: 'crisis', loadChildren: 'app/c ...
I created a modal dialog box for notifications on the top of my page. Currently, when I click anywhere inside the modal dialog, it closes. How can I make it so that it only closes when clicked outside of the dialog? The code snippet below demonstrates wh ...