Hi,

thank you for the report. Could you point the example and tell us in more details what’s going wrong?
If you use our code from the documentation, everything should work properly.

Hi, if you select from mulitple select, placeholder of input doesn’t change value. I really don’t know if only bug in documentation or on your code for angular too.

To include MDB in development deployment pipeline, it is essential to have possibility to install MDBoostrap as NPM module.

I am not in urge. But really would like to have instructions on creating AngularJS application using angular NG and Nodes NPM tools.

Okay, we are creating instruction for usage of our NPM. It should be on NPM and GitHub soon. As goes for a proper tutorial – we are still waiting for a feedback so we can choose the topic for it.

Hi,

I have just discovered and started using Bootstrap, so I downloaded the free version (for now) as a test. I created a dummy site, and it all works perfectly except the responsiveness (see images below). On the mobile devices I have tested, all the content shrinks which is not what I want – I want it move smoothly into one column.

I am using the code provided by Bootstrap which is:

<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

Any Ideas?

Thanks

This is how it looks:
(image link)

This is how it should look:
(image link)

• This topic was modified 4 hours, 19 minutes ago by  ollievincent.
• This topic was modified 4 hours, 16 minutes ago by  ollievincent.
• This topic was modified 4 hours, 15 minutes ago by  ollievincent.

Hi,

I installed the new Angular 2 mdbootstrap.

The new css kicked in properly but when I’m loading a form, the float label feature not work properly.

div class=”row”>
<div class=”col-md-6 “>
<div class=”md-form form-sm”>
<input mdbActive type=”text” name=”” id=”FirstName” class=”form-control” formControlName=”firstName”>
<label for=”FirstName” >First Name</label>
</div>
</div>
</div>

An other thing, what is mdbActive ?

Thanks a lot

I think this way of installing should be your tutorial as step by step guide to bootstrap new project. It could contain two parts:

– Creation of new Angular2 app within MDB. (first part of it taken from Angular2 instructions)
– Adding MDB to existing MDB by npm install.

Hope that helps.

• This reply was modified 3 hours, 11 minutes ago by  polis.gints.

Your images are broken

Hi,
Right click on the Image and open in new tab… you should see them.

• This reply was modified 2 hours, 10 minutes ago by  ollievincent.
• This reply was modified 2 hours, 2 minutes ago by  ollievincent.
• This reply was modified 2 hours, 1 minute ago by  ollievincent.

Hi, oh yes you’re right, sorry i didn’t check this.

Please check this meta:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

Hi guys,

I have asked for this already…. Can you PLEASE add a path variable to all the paths used in mdb. Otherwise I cannot import the scss file, since it uses relative paths.
Here are where I asked about it: Can we get path variable in Sass

You already do it for the fonts: $roboto-font-path: "../font/roboto/" !default;, but not for ANY of the images.

Please see the error below when I state @import '../node_modules/mdbootstrap/sass/mdb.scss':

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/overlays/01.png' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/overlays/02.png' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/overlays/03.png' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/overlays/04.png' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/overlays/05.png' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/overlays/06.png' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/overlays/07.png' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/overlays/08.png' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/overlays/09.png' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/svg/arrow_left.svg' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/svg/arrow_right.svg' in '/app/src'

• This topic was modified 1 hour, 19 minutes ago by  admin5.
• This topic was modified 1 hour, 15 minutes ago by  admin5.

Thank you so much, Joel and Rafal!

Hi,

Nope still doesn’t work – I am baffled. My header code:

<html lang=”en”>

<head>
<meta charset=”utf-8″><meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
<meta http-equiv=”x-ua-compatible” content=”ie=edge”>
<title>Home 1 ¦¦ Ollie Vincent</title>
<!– Font Awesome –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css”>
<!– Bootstrap core CSS –>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
<!– Material Design Bootstrap –>
<link href=”css/mdb.min.css” rel=”stylesheet”>
<!– Your custom styles (optional) –>
<link href=”css/style.css” rel=”stylesheet”>

</head>

How can I show the values without mouseover? The numbers inside of the colors the chart?

Maybe on your mobile device you’ve checked option “page for PC”

I was following along with the Tutorial code for implementing the DoubleNavBar and pretty much have it set up how i want but am I getting these errors. Now i am still kind of a newbie with Angular but looking at the DoubleNavBar component, it looks like the the inputs don’t have @Input decorators. Not sure if thats the issue or not. Also just a not that the SideBar module is imported by the AppModule which isn’t shown below.

My sidebar Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { SidebarComponent } from './sidebar.component';
import { AuthService } from '../shared/services/auth.service';

import { DoubleNavbarModule } from '../angular-bootstrap-md/pro/doubleNavigation';
import { SidenavModule } from '../angular-bootstrap-md/pro/sidenav';

@NgModule({
	imports: [RouterModule, CommonModule, DoubleNavbarModule, SidenavModule],
	declarations: [SidebarComponent],
	exports: [SidebarComponent],
	providers: [AuthService]
})

export class SidebarModule {}

The sidebar component

import { Component, OnInit } from '@angular/core';
import { ROUTES } from './sidebar-routes.config';
import { MenuType } from './sidebar.metadata';
import { AuthService } from '../shared/services/auth.service';
import { Location } from '@angular/common';

@Component({
	moduleId: module.id,
	selector: 'app-sidebar-cmp',
	templateUrl: 'sidebar.component.html',
})

export class SidebarComponent implements OnInit {
	public menuItems: any[];
	public location: Location;

	constructor(location: Location, private _auth: AuthService) {
		this.location = location;
	}

	ngOnInit() {
		this.menuItems = ROUTES.filter(menuItem => menuItem.menuType !== MenuType.BRAND);
	}

	getTitle() {
		let titlee = this.location.prepareExternalUrl(this.location.path());
		if (titlee.charAt(0) === '#') {
			titlee = titlee.slice(2);
		}
		for (let item = 0; item < this.menuItems.length; item++) {
			if (this.menuItems[item].path === titlee) {
				return this.menuItems[item].title;
			}
		}
		return 'Dashboard';
	}

	getPath() {
		return this.location.prepareExternalUrl(this.location.path());
	}

	logout() {
		this._auth.logout();
	}

}

The sidebar component html

<DoubleNavBar [fixedSideNav]="true" [navbarClass]="'fixed-top navbar-toggleable-md navbar-dark'" [scrolling]="true">
	<SideNav>
		<li>
			<div class="logo-wrapper waves-light">
				<a routerLink="dashboard"><img src="../../assets/img/angular2-logo.png" class="img-fluid flex-center"></a>
			</div>
		</li>
		<li>
            <form class="search-form" role="search">
                <div class="form-group waves-light">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
            </form>
        </li>
		<li>
			<ul class="collapsible collapsible-accordion">
				<squeezebox [multiple]="false" aria-multiselectable="false">

					<!-- ORDERS -->
					<sb-item>
                        <sb-item-head><i class="fa fa-file-text-o"></i>Orders</sb-item-head>
                        <sb-item-body>
                            <ul>
								<li routerLinkActive="active">
									<a [routerLink]="[menuItems[1].path]" class="waves-effect">
										<span class="sidebar-normal">{{menuItems[1].title}}</span>
									</a>
								</li>
								<li routerLinkActive="active">
									<a [routerLink]="[menuItems[1].path]" class="waves-effect">
										<span class="sidebar-normal">{{menuItems[2].title}}</span>
									</a>
								</li>
								<li routerLinkActive="active">
									<a [routerLink]="[menuItems[2].path]" class="waves-effect">
										<span class="sidebar-normal">{{menuItems[3].title}}</span>
									</a>
								</li>
								<li routerLinkActive="active">
									<a [routerLink]="[menuItems[3].path]" class="waves-effect">
										<span class="sidebar-normal">{{menuItems[4].title}}</span>
									</a>
								</li>
                            </ul>
                        </sb-item-body>
                    </sb-item>

					<!-- PRODUCTS -->
					<sb-item>
                        <sb-item-head><i class="fa fa-shopping-cart"></i>Products</sb-item-head>
                        <sb-item-body>
                            <ul>
								<li routerLinkActive="active">
									<a [routerLink]="[menuItems[5].path]" class="waves-effect">
										<span class="sidebar-normal">{{menuItems[5].title}}</span>
									</a>
								</li>
								<li routerLinkActive="active">
									<a [routerLink]="[menuItems[6].path]" class="waves-effect">
										<span class="sidebar-normal">{{menuItems[6].title}}</span>
									</a>
								</li>
                            </ul>
                        </sb-item-body>
                    </sb-item>

					<!-- REGIONS -->
					<sb-item>
                        <sb-item-head><i class="fa fa-map"></i>Regions</sb-item-head>
                        <sb-item-body>
                            <ul>
								<li routerLinkActive="active">
									<a [routerLink]="[menuItems[7].path]" class="waves-effect">
										<span class="sidebar-normal">{{menuItems[7].title}}</span>
									</a>
								</li>
								<li routerLinkActive="active">
									<a [routerLink]="[menuItems[7].path]" class="waves-effect">
										<span class="sidebar-normal">{{menuItems[7].title}}</span>
									</a>
								</li>
                            </ul>
                        </sb-item-body>
                    </sb-item>
				</squeezebox>
			</ul>
		</li>
	</SideNav>
	 <breadcrumb>
        <p><a class="navbar-brand" href="{{getPath()}}"> {{getTitle()}} </a></p>
    </breadcrumb>
    <links>
        <!-- SideNav slide-out button -->
        <li class="nav-item">
            <a class="nav-link"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#" (click)="logout()">
				<i class="fa fa-user"></i>
				<span class="hidden-sm-down">Profile</span>
			</a>
        </li>
    </links>
</DoubleNavBar>

The Error

Uncaught Error: Template parse errors:
Can't bind to 'fixedSideNav' since it isn't a known property of 'DoubleNavBar'. ("<DoubleNavBar [ERROR ->][fixedSideNav]="true" [navbarClass]="'fixed-top navbar-toggleable-md navbar-dark'" [scrolling]="true""): ng:///SidebarModule/SidebarComponent.html@0:14
Can't bind to 'navbarClass' since it isn't a known property of 'DoubleNavBar'. ("<DoubleNavBar [fixedSideNav]="true" [ERROR ->][navbarClass]="'fixed-top navbar-toggleable-md navbar-dark'" [scrolling]="true">
	<SideNav>
		<li>
"): ng:///SidebarModule/SidebarComponent.html@0:36
Can't bind to 'scrolling' since it isn't a known property of 'DoubleNavBar'. ("<DoubleNavBar [fixedSideNav]="true" [navbarClass]="'fixed-top navbar-toggleable-md navbar-dark'" [ERROR ->][scrolling]="true">
	<SideNav>
		<li>
"): ng:///SidebarModule/SidebarComponent.html@0:97
Can't bind to 'multiple' since it isn't a known property of 'squeezebox'. ("
		<li>
			<ul class="collapsible collapsible-accordion">
				<squeezebox [ERROR ->][multiple]="false" aria-multiselectable="false">

					<!-- ORDERS -->
"): ng:///SidebarModule/SidebarComponent.html@16:16
'sb-item-head' is not a known element:
1. If 'sb-item-head' is an Angular component, then verify that it is part of this module.
2. If 'sb-item-head' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
					<!-- ORDERS -->
					<sb-item>
                        [ERROR ->]<sb-item-head><i class="fa fa-file-text-o"></i>Orders</sb-item-head>
                        <sb-item"): ng:///SidebarModule/SidebarComponent.html@20:24
'sb-item-body' is not a known element:
1. If 'sb-item-body' is an Angular component, then verify that it is part of this module.
2. If 'sb-item-body' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("       <sb-item-head><i class="fa fa-file-text-o"></i>Orders</sb-item-head>
                        [ERROR ->]<sb-item-body>
                            <ul>
								<li routerLinkActive="active">
"): ng:///SidebarModule/SidebarComponent.html@21:24
'sb-item' is not a known element:
1. If 'sb-item' is an Angular component, then verify that it is part of this module.
2. If 'sb-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

					<!-- ORDERS -->
					[ERROR ->]<sb-item>
                        <sb-item-head><i class="fa fa-file-text-o"></i>Orders</sb-item-head"): ng:///SidebarModule/SidebarComponent.html@19:5
'sb-item-head' is not a known element:
1. If 'sb-item-head' is an Angular component, then verify that it is part of this module.
2. If 'sb-item-head' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
					<!-- PRODUCTS -->
					<sb-item>
                        [ERROR ->]<sb-item-head><i class="fa fa-shopping-cart"></i>Products</sb-item-head>
                        <sb-"): ng:///SidebarModule/SidebarComponent.html@49:24
'sb-item-body' is not a known element:
1. If 'sb-item-body' is an Angular component, then verify that it is part of this module.
2. If 'sb-item-body' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("   <sb-item-head><i class="fa fa-shopping-cart"></i>Products</sb-item-head>
                        [ERROR ->]<sb-item-body>
                            <ul>
								<li routerLinkActive="active">
"): ng:///SidebarModule/SidebarComponent.html@50:24
'sb-item' is not a known element:
1. If 'sb-item' is an Angular component, then verify that it is part of this module.
2. If 'sb-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

					<!-- PRODUCTS -->
					[ERROR ->]<sb-item>
                        <sb-item-head><i class="fa fa-shopping-cart"></i>Products</sb-item-"): ng:///SidebarModule/SidebarComponent.html@48:5
'sb-item-head' is not a known element:
1. If 'sb-item-head' is an Angular component, then verify that it is part of this module.
2. If 'sb-item-head' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
					<!-- REGIONS -->
					<sb-item>
                        [ERROR ->]<sb-item-head><i class="fa fa-map"></i>Regions</sb-item-head>
                        <sb-item-body>
"): ng:///SidebarModule/SidebarComponent.html@68:24
'sb-item-body' is not a known element:
1. If 'sb-item-body' is an Angular component, then verify that it is part of this module.
2. If 'sb-item-body' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("              <sb-item-head><i class="fa fa-map"></i>Regions</sb-item-head>
                        [ERROR ->]<sb-item-body>
                            <ul>
								<li routerLinkActive="active">
"): ng:///SidebarModule/SidebarComponent.html@69:24
'sb-item' is not a known element:
1. If 'sb-item' is an Angular component, then verify that it is part of this module.
2. If 'sb-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

					<!-- REGIONS -->
					[ERROR ->]<sb-item>
                        <sb-item-head><i class="fa fa-map"></i>Regions</sb-item-head>
     "): ng:///SidebarModule/SidebarComponent.html@67:5
'squeezebox' is not a known element:
1. If 'squeezebox' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
		<li>
			<ul class="collapsible collapsible-accordion">
				[ERROR ->]<squeezebox [multiple]="false" aria-multiselectable="false">

					<!-- ORDERS -->
"): ng:///SidebarModule/SidebarComponent.html@16:4
'SideNav' is not a known element:
1. If 'SideNav' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("edSideNav]="true" [navbarClass]="'fixed-top navbar-toggleable-md navbar-dark'" [scrolling]="true">
	[ERROR ->]<SideNav>
		<li>
			<div class="logo-wrapper waves-light">
"): ng:///SidebarModule/SidebarComponent.html@1:1
'breadcrumb' is not a known element:
1. If 'breadcrumb' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
		</li>
	</SideNav>
	 [ERROR ->]<breadcrumb>
        <p><a class="navbar-brand" href="{{getPath()}}"> {{getTitle()}} </a></p>
    </b"): ng:///SidebarModule/SidebarComponent.html@88:2
'links' is not a known element:
1. If 'links' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("     <p><a class="navbar-brand" href="{{getPath()}}"> {{getTitle()}} </a></p>
    </breadcrumb>
    [ERROR ->]<links>
        <!-- SideNav slide-out button -->
        <li class="nav-item">
"): ng:///SidebarModule/SidebarComponent.html@91:4
'DoubleNavBar' is not a known element:
1. If 'DoubleNavBar' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("[ERROR ->]<DoubleNavBar [fixedSideNav]="true" [navbarClass]="'fixed-top navbar-toggleable-md navbar-dark'" [scr"): ng:///SidebarModule/SidebarComponent.html@0:0
    at syntaxError (http://localhost:4200/vendor.bundle.js:68064:34) [<root>]
    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:79176:19) [<root>]
    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:93221:39) [<root>]
    at http://localhost:4200/vendor.bundle.js:93141:62 [<root>]
    at Set.forEach (native) [<root>]
    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:93141:19) [<root>]
    at http://localhost:4200/vendor.bundle.js:93028:19 [<root>]
    at Object.then (http://localhost:4200/vendor.bundle.js:68054:156) [<root>]
    at JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:93027:26) [<root>]
    at JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:92956:37) [<root>]
    at PlatformRef_._bootstrapModuleWithZone (http://localhost:4200/vendor.bundle.js:4803:25) [<root>]
    at PlatformRef_.bootstrapModule (http://localhost:4200/vendor.bundle.js:4789:21) [<root>]
    at Object.453 (http://localhost:4200/main.bundle.js:8655:124) [<root>]
    at __webpack_require__ (http://localhost:4200/inline.bundle.js:53:30) [<root>]
ZoneAwareError @ zone.js:917
syntaxError @ compiler.es5.js:1689
TemplateParser.parse @ compiler.es5.js:12801
JitCompiler._compileTemplate @ compiler.es5.js:26846
(anonymous) @ compiler.es5.js:26766
JitCompiler._compileComponents @ compiler.es5.js:26766
(anonymous) @ compiler.es5.js:26653
then @ compiler.es5.js:1679
JitCompiler._compileModuleAndComponents @ compiler.es5.js:26652
JitCompiler.compileModuleAsync @ compiler.es5.js:26581
PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4595
PlatformRef_.bootstrapModule @ core.es5.js:4581
453 @ main.ts:11
__webpack_require__ @ bootstrap 6a29c14…:52
854 @ timepickerModule.ts:17
__webpack_require__ @ bootstrap 6a29c14…:52
webpackJsonpCallback @ bootstrap 6a29c14…:23
(anonymous) @ main.bundle.js:1

Nope – I’m stuck…

I’m on android, but it is the same on iOS, I checked.

Alright, so i got it to the point where it compiled. First issue was i wasn’t importing the right files inside my app module. I was importing the compiled npm files when i really needed the /typescripts/

Secondly, the navbar component didnt seem to work, so i changed its selector to app-double-nav-bar and also changed it to that inside the html and that got that to work.

The SideNav would have worked by itself probably but inside the ts files its selector was Sidenav and not SideNav, i cahnged it to app-side-nav anyway and that got it working.

I have no clue where the breadcrumb and links selectors are though now and those are causing some problems.

Ok so the breadcrumb and links issue is solved. They were there for the ng-content inside of the doublenavbar component. A big issue was that i needed to include NO_ERRORS_SCHEMA inside of the module i was nesting these in. I decided to name the components back to their original because im pretty sure it affects styling. I still can’t get the ng-content on the SideNav to select properly though.

Hi,
I purchased mdb-angular-pro-4.0.1 today. It only gives instructions to install an new angular-cli with the library pre-installed.

I have my working angular-cli project already. Where can find instructions to integrate mdb-angular-pro-4.0.1 into my angular-cli project?

Also, I see the following as modules to be installed in the app.module:

MDBBootstrapModule.forRoot(),
MDBBootstrapModulePro.forRoot(),
AgmCoreModule.forRoot( {
apiKey: ‘you_api_key’
} )

If the apiKey is relevent to me and mdb-angular-pro-4.0.1, where do I get this key? No key was sent in the email confirming my purchase.

Thanks

• This topic was modified 3 hours, 4 minutes ago by  St Clair Clarke.