I'm new to angular. I'm implementing modal but it's not showing ?
I tried using bootstrap but it's not working properly
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I think you have not added bootstrap properly in your project. The HTML code you have shared looks ok to me.
If you can share some more detail/ code then I can help with what's going wrong.
Though I am sharing the ways to add bootstrap to your project, please try and let me know if that works.
(Method 1) — Adding Bootstrap to Angular Using angular.json
(Method 2) — Adding Bootstrap to Angular Using index.html
(Method 3) — Adding Bootstrap to Angular Using ng-bootstrap and ngx-bootstrap
Method-1:
run the following command-
npm install bootstrap --save
npm install jquery --save
angular.json
....
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
.....
Method-2:
You can also include Bootstrap files from node_modules/bootstrap using the index.html file.
Run commands from method 1.
Then Index.html
<!doctype html><html lang="en">
<head>
<meta charset="utf-8">
<title>Angular Bootstrap 4 Examples</title> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<app-root></app-root>
<script src="../node_modules/jquery/dist/jquery.js"></script> <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
Method-3:
LINK: https://ng-bootstrap.github.io/#/home
ng add #ng-bootstrap/ng-bootstrap
Related
I have an Bootstrap Popup control in my application.I can not open "Model popup" when I click on button.Please check my below code and advise where it is problem.I have taken this example code from below link
https://getbootstrap.com/docs/4.0/components/modal/
render() {
return (
<form>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</form>
);
}
}
As per bootstrap link you have shared Bootstrap Modal has dependency on jQuery.
So, By adding the following below CDN links in your index.html it will start working.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
Thanks.
I want to simply clear the fields on a form that exists in a bootstrap modal. I tried this solution by incorporating
<button type="reset" class="btn btn-danger">Reset</button>
but it didn't seem to do anything. Here is a plunkr with what I attempted:
Plunkr
Hey You can do it like with angular js.
Code on Plunker
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div class="container" ng-app="app">
<h2>Modal Form Reset Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" ng-controller="demoController">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Form</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" name="personForm" novalidate="">
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-5">
<input class="form-control" type="text" placeholder="Name" ng-model="person.name" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="reset" ng-click="reset()" class="btn btn-danger">Reset</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
var app = angular.module("app",[]);
app.controller("demoController",function($scope){
$scope.person = {};
$scope.reset = function(){
$scope.person = {};
};
});
</script>
</body>
</html>
I have used the following code in my workspace project as a part of a large application and ir worked fine. I am trying to isolate the page into a stand alone and cannot seem to get the dialog pop up. Shown below is the code, can someone please comment on why it won't pop up the modal dialog ? Thanks in advance and I appreciate your time.
<!doctype html>
<html lang="en" ng-app="app">
<head>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js">
</script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller="firstCtrl">
<div class="modal-header">
<button type="button" class="btn btn-primary"
data-toggle="modal" data-
target="#selectOptionTestDialog">Options</button>
</div>
<div class="modal fade" id="selectOptionTestDialog" tabindex="-1" role="dialog"
aria-labelledby="myCaseLabel"
aria-hidden="true" >
<div class="modal-dialog">
<div class="modal-content">
<form name="formShowOptions" role="form">
<div class="modal-header">
<p>Execution Steps</p>
</div>
<div class="modal-body">
Select Execution Step :
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Include JQuery and Bootstrap js files
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have an angular module and config:
var app = angular.module('project', ['ui.bootstrap', 'restangular', 'ngRoute']);
app.config(function($routeProvider, RestangularProvider) {
$routeProvider.
when('/', {
controller:EntryCtrl,
templateUrl:'frontend/partials/entry.html'
})....
My html files, using an index and a partial file:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bmwpharm admin</title>
<link rel="stylesheet" href="/frontend/css/style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
<div ng-app="project">
<div ng-view></div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-resource.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.js"></script>
<script src="http://cdn.jsdelivr.net/underscorejs/1.5.1/underscore-min.js"></script>
<script src="http://cdn.jsdelivr.net/restangular/1.1.3/restangular.min.js"></script>
<script type="text/javascript" src="/frontend/app/app.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/frontend/js/ui-bootstrap-tpls-0.11.0.min.js"></script>
</html>
partial/entry.html:
<div class="dropdown">
<a class="btn btn-default" data-toggle="dropdown" href="#">Dropdown<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li>hellooooo</li>
</ul>
</div>
The button and caret is displayed, and the dropdown is closed initially, and will not open when clicked.
Any idea what I am missing?
You are loading the bootstrap.js that has a bound event to close/open the collapse. So both the angular-ui-bootstrap directive and bootstrap.js are trying to close/open the collapse. Remove the bootstrap.js file script reference and see if that fixes your problem. The angular-ui-bootstrap documentation advises against loading the bootstrap.js library.
Here is an example from angular-ui-bootstrap:
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
You see, you didn't use the directive. So your partial should be like this:
<div class="btn-group" dropdown>
<button class="btn btn-default dropdown-toggle" href="#">
Dropdown <b class="caret"></b>
</button >
<ul class="dropdown-menu" role="menu">
<li>hellooooo</li>
</ul>
</div>
please see working example here http://plnkr.co/edit/aM9G0EgL6IcoBED2WOtx?p=preview
update your entry.html to (you've missed dropdown in <div class="button...)
<div class="btn-group" dropdown >
<a type="button" class="btn btn-default dropdown-toggle" >
Button dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a>helloo</a></li>
</ul>
</div>
I've just add angularJS to my project and I am now trying to add AngularUI to my project but it's not working correctly. The buttons don't look nice like they are supposed to. My webpage looks like http://postimg.org/image/mzgqlk7mr/
Here's my code:
<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link href="menu_source/styles.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div id='cssmenu'>
<!--
<div ng-controller="logOut">
<h4>Single toggle</h4>
<pre>{{singleModel}}</pre>
<button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
Single Toggle
</button>
-->
</div>
<div id="content">
Name:<input type="text" ng-model="name" /> {{name}}
</div>
<div id="content1">
<div ng-controller="ButtonsCtrl">
<h4>Single toggle</h4>
<pre>{{singleModel}}</pre>
<button type cv="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
Single Toggle
</button>
<h4>Checkbox</h4>
<pre>{{checkModel}}</pre>
<div class="btn-group">
<button type="button" class="btn btn-primary" ng-model="checkModel.left" btn-checkbox>Left</button>
<button type="button" class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox>Middle</button>
<button type="button" class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>Right</button>
</div>
<h4>Radio</h4>
<pre>{{radioModel}}</pre>
<div class="btn-group">
<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</button>
<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</button>
<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</button>
</div>
</div>
<script src="angular.min.js"></script>
</body>
</html>
Here is a simple plunker forked from the AngularUI Bootstrap demo page (http://angular-ui.github.io/bootstrap/): http://plnkr.co/edit/frWpYAfC1TlZ13xNQzSV?p=preview
By comparing this plunker with your code you will notice that:
you are not including angular-ui/bootstrap JavaScript (!)
you need to add dependency on the ui.bootstrap module
On the other hand you are including Bootstrap's JavaScript which is totally unnecessary.