build a model dialog

Question

Hi All I am using Angular 4.0. And I and to build a model dialog on button click event. can you please share simple code in Angular

Laxmidhar Sahoo · Answer

sir go through some stapes 1 - create a html file named Popup.html like bellow code > html xmlns = "http://www.w3.org/1999/xhtml" > head > title > title > head > body > Thanks you body > html > pest the bellow code in the view page @{ Layout = null ; } > html data-ng-app = "test" > head > @* link href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet" > link href = "https://gitcdn.github.io/bootstrap-toggle/2.1.0/css/bootstrap-toggle.min.css" rel = "stylesheet" > script src = "https://code.jquery.com/jquery-2.1.3.min.js" > script > script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" > script > script src = "https://code.angularjs.org/1.4.7/angular.js" > script > script src = "https://gitcdn.github.io/bootstrap-toggle/2.1.0/js/bootstrap-toggle.min.js" > script > *@ script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js" > script > script src = "//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js" > script > link href = "//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel = "stylesheet" > script > angular.module('PopupDemo', ['ui.bootstrap']); angular.module('PopupDemo') .controller('PopupDemoController', ['$scope', '$modal', function ($scope, $modal) { $ scope.open = function () { var modalInstance = $modal.open({ templateUrl: 'Popup.html' }); alert("OK"); } } ] ); script > head > body ng-app = "PopupDemo" > div ng-controller = "PopupDemoController" > a ng-click = "open()" > Open Popup a > div > body > html >

Akshay Phadke · Answer

simple and straight forward code Open Modal &times; Modal Header Some text in the modal. Close

Ankit Sharma · Answer

Hi Sachin, Please visit belwo links https://stackoverflow.com/questions/43533463/how-to-create-a-modal-popup-that-is-compatible-with-angular-4 https://material.angular.io/components/dialog/overview

build a model dialog

Answers (3)