TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
SeethaPartha
NA
89
30.9k
how to include .js and css file in angular cli
Dec 5 2017 3:43 AM
I tried for simple design in app component HTML for dropdown. Installed bootstrap and Jquery as well. And also i have a bit of js snipped for dropdown caret change.
Here my 'index.html, Angular-cli.Json, Style.scss, appcomponent html, carettest.js files' shared. Please tell whether it is fine or i need to add path or reference in anywhere else.
angualr-cli.json
"styles": [
"styles.scss",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/jquery/dist/css/jquery.min.css"
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"./src/assets/JSfiles/carettest.js" ],
style.scss
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.css";
.caret.caret-up {
border-top-width: 0;
border-bottom: 4px solid #fff;
}
index.Html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SNSearch2</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./src/assets/JSfiles/carettest.js"></script>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../node_modules/dist/css/bootstrap.min.css">
</head>
<body>
<app-root></app-root>
</body>
</html>
appcomponent.html
<div class="container">
<h2>Change the caret symbol on dropdown</h2>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
carettest.js
$(document).ready(function(){
$(".dropdown").on("hide.bs.dropdown", function(){
$(".btn").html('Dropdown <span class="caret"></span>');
});
$(".dropdown").on("show.bs.dropdown", function(){
$(".btn").html('Dropdown <span class="caret caret-up"></span>');
});
});
Reply
Answers (
6
)
Help Ordering by AngularJS
How to implement File upload in every row in table