I am using Angular Bootstrap in my project for styling. When I am using ngbDropdown, the Dropdownlist is always shown below the actual dropdown item:
This is the HTML I am using:
<div ngbDropdown class="d-block" id="tedder-select">
<button class="btn btn-primary w-100" id="dropdown-tedder" (click)="scrollToTedder()"
ngbDropdownToggle>{{selectedTedder}}</button>
<div ngbDropdownMenu aria-labelledby="dropdown-tedder">
<button ngbDropdownItem *ngFor="let tedder of tedders"
(click)="selectTedder(tedder)">{{tedder}}</button>
</div>
</div>
In index.html I am adding the following scripts/css:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
My Dependencies in package.json:
"dependencies": {
"#angular/animations": "~10.1.3",
"#angular/cdk": "^10.2.7",
"#angular/common": "~10.1.3",
"#angular/compiler": "~10.1.3",
"#angular/core": "~10.1.3",
"#angular/forms": "~10.1.3",
"#angular/localize": "~10.1.3",
"#angular/material": "^10.2.7",
"#angular/platform-browser": "~10.1.3",
"#angular/platform-browser-dynamic": "~10.1.3",
"#angular/platform-server": "~10.1.3",
"#angular/router": "~10.1.3",
"#ng-bootstrap/ng-bootstrap": "^8.0.0",
"#nguniversal/express-engine": "^10.1.0",
"angular-in-memory-web-api": "~0.11.0",
"bootstrap": "^4.5.0",
"express": "^4.15.2",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.1100.2",
"#angular/cli": "~10.1.3",
"#angular/compiler-cli": "~10.1.3",
"#nguniversal/builders": "^10.1.0",
"#types/express": "^4.17.0",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-marbles": "~0.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.3"
}
Thank's for your help!
I have simple a navbar in bootstrap. When I reduce the size of chrome browser navbar menus turns into Hamburger icon, when I am clicking on it, menus are not visible.
app.component.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/js/bootstrap4-toggle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">eNno</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
package.json file
{
"name": "uiassignment",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~10.0.6",
"#angular/common": "~10.0.6",
"#angular/compiler": "~10.0.6",
"#angular/core": "~10.0.6",
"#angular/forms": "~10.0.6",
"#angular/platform-browser": "~10.0.6",
"#angular/platform-browser-dynamic": "~10.0.6",
"#angular/router": "~10.0.6",
"bootstrap": "^4.5.2",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1000.5",
"#angular/cli": "~10.0.5",
"#angular/compiler-cli": "~10.0.6",
"#types/node": "^12.11.1",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.5"
}
}
tsconfig.json file
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
}
]
}
angular.json file
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"UIAssignment": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/UIAssignment",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "UIAssignment:build"
},
"configurations": {
"production": {
"browserTarget": "UIAssignment:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "UIAssignment:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "UIAssignment:serve"
},
"configurations": {
"production": {
"devServerTarget": "UIAssignment:serve:production"
}
}
}
}
}
},
"defaultProject": "UIAssignment",
"cli": {
"analytics": "01c58ec0-920b-4102-a361-7d46f52578c7"
}
}
index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UIAssignment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.module.ts file
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Project information
Angular CLI: 10.0.7
Node: 12.18.1
Angular: 10.0.11
This menus is not expanding
How can I fix this issue?
There are several issues in your project. I will go step by step and explain, what is wrong.
You added bootstrap in your package.json and installed it using npm i or yarn (depending on what you are using). Afterwards, it is loaded inside node_modules/bootstrap. Additionally, requirements such as jquery and popper are installed in the folder node_modules. That's fine. Then, you use angular.json to import it. However, there are two issues:
(a) You added it in the "test" section, but you have to define it in the "build" section
(b) Several links are incorrect and do not exist (have a look at the node_modules/boostrap/... folder for instance).
Here is your "new" angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"UIAssignment": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/UIAssignment",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/popper.js/dist/umd/popper.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "UIAssignment:build"
},
"configurations": {
"production": {
"browserTarget": "UIAssignment:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "UIAssignment:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/popper.js/dist/umd/popper.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "UIAssignment:serve"
},
"configurations": {
"production": {
"devServerTarget": "UIAssignment:serve:production"
}
}
}
}
}
},
"defaultProject": "UIAssignment",
"cli": {
"analytics": "01c58ec0-920b-4102-a361-7d46f52578c7"
}
}
You add a <!doctype html><html lang="en"> ... inside app.component.html. However, app.component.html is loaded inside your index.html (using <app-root></app-root>), so do not add those things in there. Instead, your app.component.html should just contain the <nav>...</nav> and all other contents, but no headings / imports.
Since you defined Bootstrap, etc. in your package.json and loaded it into your project in the angular.json, you do not need to load it again using <script> or <link>.
Here is your "new" app.component.html:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">eNno</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
and your "new" index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UIAssignment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Please note that you should restart your angular cli project after making edits to angular.json
Please also note that adding bootstrap.js and jQuery is not the proper way to use it inside an Angular project. Instead have a look on ngx-bootstrap
If your project does not run for any reason, you can also remove the added styles and scripts from angular.json and use the following lines inside index.html <head>:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
Good luck!
using CDN links of bootstrap and call the css links two times and using different bootstrap js link of different version.
As you are using package of bootstarp .
Import it in angular.json as below :
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Restart ng serve if you're running it, and Bootstrap should be working on your app.
{ "name": "main-page", "main": "main-page.html", "dependencies": { "polymer": "Polymer/polymer#^1.4.0", "polymer-ts": "^0.2.2", "paper-button": "PolymerElements/paper-button#^2.0.0", "paper-dialog": "PolymerElements/paper-dialog#^2.0.0", "csv-render":
"LRNWebComponents/csv-render#^0.1.0", "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^2.1.0", "papa-parser": "milesje/papa-parser#^1.0.0", "iron-data-table": "Saulis/iron-data-table#^1.0.7", "vaadin-grid": "vaadin/vaadin-grid#^3.0.1",
"paper-datatable": "David-Mulder/paper-datatable#^0.9.8" }, "devDependencies": { "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", "web-component-tester": "^6.0.0-prerelease.5",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" }, "resolutions": { "paper-button": "^2.0.0", "polymer": "^1.9.0", "iron-a11y-keys-behavior": "^v2.0.0", "iron-resizable-behavior": "^v2.0.0", "iron-scroll-target-behavior": "^v2.0.0", "iron-a11y-announcer":
"^v2.0.0", "webcomponentsjs": "^0.7.0", "paper-styles": "~1.0.12" } }
paper-dialog works fine for most of the times but sometimes it shows white space above it, I am trying to put paper-datatable within paper-dialog. Please help.
/// <reference path = "../bower_components/polymer-ts/polymer-ts.d.ts"/>
#component("main-view")
class MainView extends polymer.Base {
#property ({type:Array, value: []})
records;
parseData(url, onSuccess: (tasks) => void) {
Papa.parse(url,{
header: true,
download: true,
complete: function (results) {
onSuccess(results.data)
}
})
}
openDialog() {
this.parseData("./csv/demo.csv",(records) => {
this.records = records
});
this.$.dialog.open();
}
}
MainView.register();
{
"name": "main-page",
"main": "main-page.html",
"dependencies": {
"polymer": "Polymer/polymer#^1.4.0",
"polymer-ts": "^0.2.2",
"paper-button": "PolymerElements/paper-button#^2.0.0",
"paper-dialog": "PolymerElements/paper-dialog#^2.0.0",
"csv-render": "LRNWebComponents/csv-render#^0.1.0",
"paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^2.1.0",
"papa-parser": "milesje/papa-parser#^1.0.0",
"iron-data-table": "Saulis/iron-data-table#^1.0.7",
"vaadin-grid": "vaadin/vaadin-grid#^3.0.1",
"paper-datatable": "David-Mulder/paper-datatable#^0.9.8"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"web-component-tester": "^6.0.0-prerelease.5",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"resolutions": {
"paper-button": "^2.0.0",
"polymer": "^1.9.0",
"iron-a11y-keys-behavior": "^v2.0.0",
"iron-resizable-behavior": "^v2.0.0",
"iron-scroll-target-behavior": "^v2.0.0",
"iron-a11y-announcer": "^v2.0.0",
"webcomponentsjs": "^0.7.0",
"paper-styles": "~1.0.12"
}
}
<!DOCTYPE html>
<link rel="import" href="../bower_components/polymer/polymer.html"/>
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../bower_components/polymer-ts/polymer-ts.html"/>
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html"/>
<link rel="import" href="../bower_components/paper-button/paper-button.html"/>
<link rel="import" href="../bower_components/papa-parser/papa-parser.html"/>
<link rel="import" href="../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html"/>
<link rel="import" href="../bower_components/paper-datatable/paper-datatable.html">
<dom-module id="main-view">
<style>
.preview {
background-color: var(--paper-indigo-500);
color: white;
text-align: center;
margin: auto;
}
iron-overlay-backdrop {
--iron-overlay-backdrop-opacity: 1;
}
</style>
<template>
<paper-button raised class="preview" on-tap="openDialog">OPEN PREVIEW</paper-button>
<paper-dialog id="dialog" with-backdrop>
<paper-dialog-scrollable>
<paper-datatable data={{records}}>
<paper-datatable-column header="Names">
<template>
<span>{{item.Name}}</span>
</template>
</paper-datatable-column>
<paper-datatable-column header="Email">
<template>
<span>{{item.Email}}</span>
</template>
</paper-datatable-column>
<paper-datatable-column header="Score">
<template>
<span>{{item.Score}}</span>
</template>
</paper-datatable-column>
<paper-datatable-column header="Date">
<template>
<span>{{item.Date}}</span>
</template>
</paper-datatable-column>
</paper-datatable>
</paper-dialog-scrollable>
</paper-dialog>
</template>
</dom-module>
I am using prime ng and I can't get the controls to appear with the icons. All I'm getting are boxes but when I use fontawesome outside the prime controls, everything works fine.
I uses NPM to install.
Here is my
index.html page
<!DOCTYPE html>
<html>
<head lang="en">
<base href="/" >
<title>Acme Product Management</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="assets/scripts/angular.min.js"></script>
<script src="assets/scripts/angular-route.min.js"></script>
<script src="assets/scripts/angular-local-storage.min.js"></script>
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<link href="node_modules/#angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/CustTheme1/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="assets/css/custom.css">
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<pm-app></pm-app>
<script src="assets/scripts/jquery-3.1.1.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
**Package.json**
{
"name": "product-management",
"version": "1.0.0",
"author": "Deborah Kurata",
"description": "Package for the Acme Product Management sample application",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"#angular/common": "^2.4.9",
"#angular/compiler": "^2.4.9",
"#angular/core": "^2.4.9",
"#angular/forms": "^2.4.9",
"#angular/http": "^2.4.9",
"#angular/material": "^2.0.0-beta.2",
"#angular/platform-browser": "^2.4.9",
"#angular/platform-browser-dynamic": "^2.4.9",
"#angular/router": "^3.4.9",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"primeng": "^2.0.3",
"reflect-metadata": "^0.1.3",
"rxjs": "^5.2.0",
"systemjs": "^0.20.9",
"zone.js": "^0.7.7"
},
"devDependencies": {
"concurrently": "^3.4.0",
"lite-server": "^2.2.0",
"tslint": "^4.5.1",
"typescript": "^2.0.2",
"typings": "^2.1.0"
},
"repository": {}
}
I had boxes appear in place of FontAwesome icons once because I overwrote the font-family attribute with "Open Sans" (my font family for the rest of the app)
It was overwriting the FontAwesome's default font-family of "FontAwesome" with Open Sans, so all the icons appeared as boxes.
I would verify that your font-family attribute for FontAwesome isnt being overwritten somewhere. Hopefully that solves it...
I'm having trouble populating a table, accessing a text file that has JSON like this:
{
"1000": {
"country": "US",
"eventid": 1000,
"venue": "San Francisco, USA"
},
"2000": {
"country": "DE",
"eventid": 2000,
"venue": "Munich, Germany"
},
"3000": {
"country": "GB",
"eventid": 3000,
"venue": "UK (Market House)"
}
}
I have followed the examples on datatables.net and tried loading it on to my HTML
<HTML>
<head>
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="dataTables.bootstrap.css"/>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.dataTables.min.js"></script>
<script type="text/javascript" src="datatable.js"></script>
<script type="text/javascript" src="dataTables.bootstrap.js"></script>
</head>
<body>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Country</th>
<th>Event</th>
<th>Venue</th>
</tr>
</thead>
</table>
</body>
</html>
And the datatable.js is as simple as this
$(document).ready(function() {
$('#example').dataTable( {
"processing": true,
"ajax": 'sample.txt',
"columns": [
{ "country" },
{ "eventid" },
{ "venue" }
]
} );
} );
Can someone help me figure out where I have gone wrong with the code ?
I managed to fix the issue by adding a custom function as part of dataSrc attribute (Thanks Jongyu Lin). Here is the change to my Javascript
$(document).ready(function () {
$('#example').dataTable({
"processing": true,
"ajax": {
"url": 'json.txt',
"dataSrc": function (json) {
var arr = Object.keys(json).map(function(k) { return json[k] });
return arr;
}
},
"columnDefs": [
{
"targets": [2],
"visible": true,
"searchable": true
}
],
"columns": [
{
"data": "eventid"
},
{
"data": "country"
},
{
"data": "venue"
}
]
});
});