Can any one help me with the responsive bootstrap4 integration with Angular 7.2?
Can any one help me with the responsive bootstrap4 integration with Angular 7.2?
MayurVM
Posts: 4Questions: 1Answers: 0
Here are my files
datatable.compopnent.ts;-
import {ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild, AfterViewInit, Input, OnChanges} from '@angular/core';
import * as $ from 'jquery';
import 'datatables.net';
import 'datatables.net-bs4';
@Component({
selector: 'connect-datatable',
templateUrl: './datatable.component.html',
styleUrls: ['./datatable.component.scss']
})
export class DatatableComponent implements OnInit, AfterViewInit, OnChanges {
dataTable: any;
dtOption: any = {};
table: any;
tableType: string;
@Input() tableHeader: any = [];
@Input() tableColumns: any = [];
@Input() tabledata: any = [];
@Input() tableId: string;
@Input() timeOut: number = 1000;
@Input() rowCount: number;
constructor(private chRef: ChangeDetectorRef) {
this.tableId = '11';
}
ngOnChanges() {
}
private initDataTable() {
const self = this;
setTimeout(function () {
$(document).ready(function() {
const table = $('#table-' + self.tableId).DataTable( {
responsive: true,
paging: true,
searching: true
} );
// new $.fn.dataTable.FixedHeader( table );
} );
}, 1000);
// const self = this;
// self.tableType = self.tableId;
// setTimeout(function () {
// self.table = $('#table-' + self.tableId).DataTable( {
// responsive: true,
// paging: true,
// searching: true,
// ordering: true,
// info: false,
// order: [],
// });
// }, this.timeOut);
}
ngOnInit() {
this.chRef.detectChanges();
this.initDataTable();
// const table: any = $('table');
// this.dataTable = table.DataTable(
// {
// responsive: true
// }
// );
$(document).ready(function() {
$('#example').DataTable(
{
responsive: true
}
);
} );
// {
// responsive: {
// details: false,
// responsive: true,
// paging: true,
// searching: true,
// ordering: true,
// info: false,
// fixedHeader: true,
// bDestroy: true,
// }
// }
}
ngAfterViewInit() {
// this.chRef.detectChanges();
// const table: any = $('table');
// this.dataTable = table.DataTable(
// {
// responsive: {
// details: false
// }
// }
// );
}
}
datatable.component.html:-
| {{head}} |
|---|
| {{head}} |
| {{data[head]}} |
datatable.component.scss:-
@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css";
@import "https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css";
@import "https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css";
@import "https://cdn.datatables.net/fixedheader/3.1.3/css/fixedHeader.bootstrap.min.css";
here is the angular.json I have copied the files from the cdn into my assets folder :-
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"connect-admin": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "connect",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/connect-admin",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"./node_modules/bootstrap/scss/bootstrap.scss",
],
"scripts": [
"./src/assets/js/jquery.min.js",
"./src/assets/js/jquery.dataTables.min.js",
"./src/assets/js/dataTables.bootstrap4.min.js",
"./src/assets/js/dataTables.responsive.min.js",
"./src/assets/js/responsive.bootstrap4.min.js"
],
"aot": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "connect-admin:build",
"port": 4280
},
"configurations": {
"production": {
"browserTarget": "connect-admin:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "connect-admin:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"node_modules/datatables.net-dt/css/jquery.dataTables.css",
"node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net-dt/js/dataTables.dataTables.js",
"node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js"
],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"/node_modules/"
]
}
}
}
},
"connect-admin-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "connect-admin:serve"
},
"configurations": {
"production": {
"devServerTarget": "connect-admin:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"/node_modules/"
]
}
}
}
}
},
"defaultProject": "connect-admin"
}
tried many different but its not happening , googled as well but of no use, any help will be appreciated.
Answers
Hi @MayurVM ,
You haven't said what the problem is - are you seeing errors in the console? Elsewhere? We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Hi Colins there are no errors in the console all the other feature like sorting and pagination are working fine its not responsive I'm using the bootstrap4 datatable and used styling according to the example but it is still not rersponsive
I'm using Angular 7 and bootstrap 4
Hi @MayurVM ,
It would be worth running the debugger on it to see if the Responsive extension is getting loaded. As I said, we would need to see it to help must further, could you provide a link to the page or a testcase.
Cheers,
Colin