I am having an issue with the Angular Material (NG4) SideNav and its attached overlay does not properly display over top any element in other components (My concern atm applies to my Registration Component in particular). It is like the sidenav does not know about the rest of the DOM? I am relatively new to front end work so any help would be appreciated. I am sure it is something stupidly simple.
Here is my example:
Here is my main.component (ts is not important for this component atm):
<main>
<md-sidenav-container fullscreen>
<layout-header></layout-header>
<router-outlet></router-outlet>
<md-sidenav-container fullscreen>
</main>
Here are my Header Component files:
html:
<header>
<md-sidenav #sidenav mode="push">
<img src="assets/png/xxxxxxxxxxxx_reversed_white_logo_web.png" alt="xxxxxxxxxxxx Logo" class="logo-wrapper"/>
<md-toolbar-row>
<mdb-squeezebox id="side-nav-accordion-wrapper" [multiple]="false" aria-multiselectable="false" class="text-right">
<mdb-item>
<mdb-item-head ripple-radius>Solutions & Services</mdb-item-head>
<mdb-item-body>
<ul>
<li class="active"><a href="https://www.xxxxxxxxxxxx.com/solutions-overview/" class="waves-effect" ripple-radius>Overview</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/strategic-growth-consulting/">For B2B</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/for-b2c/">For B2C</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/for-professional-services/">For Professional Services</a></li>
</ul>
</mdb-item-body>
</mdb-item>
<mdb-item>
<mdb-item-head ripple-radius>Talent Solutions</mdb-item-head>
<mdb-item-body>
<ul>
<li><a href="#">HRAssistant</a></li>
</ul>
</mdb-item-body>
</mdb-item>
<mdb-item>
<mdb-item-head ripple-radius>Resources</mdb-item-head>
<mdb-item-body>
<ul>
<li><a href="https://www.xxxxxxxxxxxx.com/sales-insights/">Sales Insights</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/professional-services-insights/">Professional Services Insights</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/case-studies/">Case Studies</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/podcasts/">Podcasts</a></li>
</ul>
</mdb-item-body>
</mdb-item>
<mdb-item>
<mdb-item-head ripple-radius>Our Company</mdb-item-head>
<mdb-item-body>
<ul>
<li><a href="https://www.xxxxxxxxxxxx.com/leadership/">Leadership</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/growth-play-board-of-directors/">Board of Directors</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/our-customers/">Our Customers</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/our-partners/">Our Partners</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/news-and-events/">News & Events</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/business-development-consultant-careers/">Careers</a></li>
</ul>
</mdb-item-body>
</mdb-item>
<mdb-item>
<mdb-item-head ripple-radius>Blogs</mdb-item-head>
<mdb-item-body>
<ul>
<li><a href="http://blog.xxxxxxxxxxxx.com/">Sales Blog</a></li>
<li><a href="http://blog.xxxxxxxxxxxx.com/practitioner">Professional Services Blog</a></li>
</ul>
</mdb-item-body>
</mdb-item>
<a href="https://www.xxxxxxxxxxxx.com/drive-revenue-growth/">Contact Us</a>
</mdb-squeezebox>
</md-toolbar-row>
</md-sidenav>
<md-toolbar color="primary">
<button md-button (click)="sidenav.toggle()">
<md-icon>menu</md-icon>
</button>
<span>{{title}}</span>
</md-toolbar>
</header>
typescript:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'layout-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
title = "GrowthPlay Authentication";
constructor() { }
ngOnInit() {
}
}
Here are my Registration Component files:
html
<section id="registrationComponent_old" class="container-fluid" role="document">
<div novalidate class="row">
<md-card class="card col-sm-6 mx-auto">
<md-card-header class="col-12 text-center">
<h2 class="skin-primary white-text col-12 text-center">
<i class="fa fa-lock"></i>Local Registration
</h2>
</md-card-header>
<div class="card-body">
<form novalidate [formGroup]="registrationForm">
<div class="error col-sm-12"></div>
<div class="md-form form-sm col-sm-12 row">
<div class="col-sm-12">
<i class="fa fa-envelope prefix"></i>
<input formControlName="email" id="email" class="form-control text-primary" type="text" placeholder="Email" name="email">
</div>
<div class="col-sm-12">
<i class="fa fa-lock prefix"></i>
<input formControlName="password" id="password" class="form-control text-primary" type="password" placeholder="Password" name="password">
</div>
<div class="col-sm-12">
<i class="fa fa-lock prefix"></i>
<input formControlName="confirmPassword" id="confirmPassword" class="form-control text-primary" type="password" placeholder=" Confirm Password" name="confirmPassword">
</div>
<div class="col-sm-12">
<i class="fa fa-user prefix"></i>
<input formControlName="firstName" id="firstName" class="form-control text-primary" type="text" placeholder="Enter your First Name" name="firstName">
</div>
<div class="col-sm-12">
<i class="fa fa-user prefix"></i>
<input formControlName="lastName" id="lastName" class="form-control text-primary" type="text" placeholder="Enter your Last Name" name="firstName" />
</div>
<div class="col-sm-12 row">
<div class="col">
<i class="fa fa-user prefix"></i>
</div>
<div class="col-12 row">
<mdb-ng-select class="col-4" [options]="optionsSelect" placeholder="Enter your language" ></mdb-ng-select>
</div>
</div>
<div class="col-sm-12 button-row">
<button md-raised-button color="accent" id="registerLink" class="col-lg-5 col-md-12" href="#" (click)="register()">Register</button>
<a md-raised-button color="primary" id="cancelLink" class="col-lg-5 col-md-12" [routerLink]="['/login']">Cancel</a>
</div>
<!--</div>-->
</div>
</form>
</div>
<!--<div>
<p>{{newUser.firstName}}</p>
<p>{{newUser.email}}</p>
<p>{{newUser.returnUrl}}</p>
</div>-->
</md-card>
</div>
</section>
typescript:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { IUserRegistration, IUser} from "../../../shared/interfaces";
import { UserRegistration, User } from "../../../shared/models";
import { Router, RouterModule, Routes, ActivatedRoute } from '@angular/router';
import { Http, Headers, Response } from "@angular/http";
import { UserResource } from "../../../shared/resources";
import { AuthenticationService } from "../../../shared/services";
@Component({
selector: 'app-registration',
templateUrl: './registration.component.html',
styleUrls: ['./registration.component.scss']
})
export class RegistrationComponent implements OnInit {
private newUser: IUserRegistration = new UserRegistration();
private registrationForm: FormGroup;
private optionsSelect: Array<any>;
private languages: Array<string>;
ngOnInit() {
this.registrationForm = new FormGroup({
firstName: new FormControl(),
lastName: new FormControl(),
email: new FormControl(),
password: new FormControl(),
confirmPassword: new FormControl(),
language: new FormControl()
});
this.optionsSelect = [
{ value: 'en-us', label: 'English' }
];
this.languages = ["eng"];
}
constructor(private user: UserResource, private route: ActivatedRoute, private router: Router, private http: Http, private authentication: AuthenticationService) {
}
register() {
this.newUser = this.user.save(this.newUser, (response) => {
var returnUrl;
this.authentication.getAuthorization(this.newUser.returnUrl).subscribe(data => {
window.location.href = data.url;
});//this.router.navigateByUrl(data.url));
});
}
}
