<!DOCTYPE html>
<html>
<head>
<base href="." />
<script type="text/javascript" charset="utf-8">
window.AngularVersionForThisPlunker = 'latest'
</script>
<title>angular playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
<!-- Bootstrap core CSS -->
<link href="http://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="http://getbootstrap.com/docs/3.3/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Bootstrap styles -->
<link href="http://getbootstrap.com/docs/3.3/examples/sticky-footer-navbar/sticky-footer-navbar.css" rel="stylesheet">
<!-- System specific Styles CSS -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<my-app>
loading...
</my-app>
<!-- Bootstrap core JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://getbootstrap.com/docs/3.3/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="http://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/docs/3.3/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
/* Styles go here */
### Angular Starter Plunker - Typescript
var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
angularVersion = ''; //picks up latest
}
else {
angularVersion = '@' + window.AngularVersionForThisPlunker;
}
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
'@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',
'@angular/compiler': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
'@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
'@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
'@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
'tslib': 'npm:tslib@1.6.1',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
//our root app component
import {Component, NgModule, ViewEncapsulation} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HashLocationStrategy, LocationStrategy} from '@angular/common';
//import {RouterModule} from '@angular/router';
//import {NavbarMapService} from "./NavbarMapService";
//import {NavbarComponent} from "./Navbar";
//import UnderConstruction from "./UnderConstruction";
import {SafeHtmlPipe, MyPostDirective, MyPostService, SidebarComponent, DynamicSidebarComponent} from "./SidebarComponent";
@Component({
selector: 'my-app',
templateUrl : 'main.html',
styleUrls: ['main.css'],
encapsulation: ViewEncapsulation.None
})
export class App {
}
@NgModule({
imports: [
BrowserModule
// ,RouterModule.forRoot(NavbarMapService.routes)
],
declarations: [
App
//,NavbarComponent
,SidebarComponent
,MyPostDirective
,DynamicSidebarComponent
,SafeHtmlPipe
//,UnderConstruction
]
,providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy }
//,NavbarMapService
,MyPostService
]
,bootstrap: [ App ]
,entryComponents: [
DynamicSidebarComponent
]
})
export class AppModule {}
<div class="wrapper">
<!-- Sidebar Container -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Test</h3>
<strong>Test</strong>
</div>
<!-- Problem is right here -->
<sidebars></sidebars>
<!-- Thie collapse and the jquery javascript corresponding to that works, but not when the below exact code is built witha component
<ul class="list-unstyled components">
<li class="active"><a href="#">Sidebar Item 1</a><i class="glyphicon "></i></li>
<li>
<a href="#subMenu1" data-toggle="collapse" aria-expanded="false">
<i class="glyphicon "></i> Sidebar Item 2
</a>
<ul class="collapse list-unstyled" id="subMenu1">
<li><a href="#">Sub Sidebar Item 1</a><i class="glyphicon "></i></li>
<li>
<a href="#subMenu2" data-toggle="collapse" aria-expanded="false">
<i class="glyphicon "></i> Sub Sidebar Item 2
</a>
<ul class="collapse list-unstyled" id="subMenu2">
<li><a href="#">SubS Sidebar Item 1</a><i class="glyphicon "></i></li>
<li><a href="http://www.yahoo.com">SubS Sidebar Item 2</a><i class="glyphicon "></i></li>
<li><a href="/somepath/someProcess">SubS Sidebar Item 3</a><i class="glyphicon "></i></li>
</ul>
</li>
<li>
<a href="#subMenu3" data-toggle="collapse" aria-expanded="false">
<i class="glyphicon "></i> Sub Sidebar Item 3
</a>
<ul class="collapse list-unstyled" id="subMenu3">
<li><a href="#">DD Item 1</a><i class="glyphicon "></i></li>
<li><a href="#">DD Item 2</a><i class="glyphicon "></i></li>
<li><a href="javascript:somecall()">DD Item 3</a><i class="glyphicon "></i></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Sidebar Item 3</a><i class="glyphicon "></i></li>
</ul>
-->
</nav>
<!-- Page Content Container -->
<div id="content">
<!--
<app-navbar></app-navbar>
<router-outlet></router-outlet>
-->
Something
</div>
</div>
<!--
<app-footer></app-footer>
-->
/*
body { padding-top: 0px; }
*/
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
/* ---------------------------------------------------
NAVBAR STYLE
----------------------------------------------------- */
/*
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
i, span {
display: inline-block;
}
*/
.navbar-default {
font-size: 1.15em;
font-weight: 400;
background-color: #7386D5;
/* background-color: #006b96;*/
/*padding: 10px;*/
border: 0px;
border-radius: 0px;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar-default .navbar-nav>li>a:hover {
color: #cbf0ff;
}
.navbar-default .navbar-brand {
color: #002433;
}
.navbar-default .navbar-brand:hover {
color: #ffffff;
text-shadow: 1px -1px 8px #b3e9ff;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
background-color: #004059;
color: white;
}
.navbar-default .navbar-toggle {
border: none;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border: none;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #002433;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.dropdown-menu {
background-color: #004059;
color: white;
border: 0px;
border-radius: 2px;
/* padding-top: 10px;
padding-bottom: 10px; */
}
.dropdown-menu>li>a {
background-color: #004059;
color: white;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
background-color: #004059;
color:white;
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #003246;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #ffffff;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
height: 100%;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3, #sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before {
top: auto;
bottom: 5px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
background: #7386D5;
/* #6d7fcc; */
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article, a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 0px;
width: 100%;
/*min-height: 100vh; */
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIA QUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important ;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
top: auto;
bottom: 5px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3, #sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
.dropdown-menu>li>a {
background-color: #006b96;
color: #ffffff;
}
.dropdown-menu>li>a:hover {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
color: #ffffff;
background-color: transparent;
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #005577;
}
}
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">MyCompany<span class="sr-only">(current)</span></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Support<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a [routerLink]="['underconstruction']">User Maintenance</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Toolbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a [routerLink]="['underconstruction']">Tool 1</a></li>
<li><a [routerLink]="['underconstruction']">Tool 2</a></li>
</ul>
</li>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Setup<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a [routerLink]="['underconstruction']"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span>Configuration</a></li>
<li><a [routerLink]="['underconstruction']"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span>Some other setup</a></li>
<li role="separator" class="divider"></li>
<li><a [routerLink]="['underconstruction']"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span>Files</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Me the user<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Logout</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div>
<div class="page-header">
<h3>This module is still under construction. Thanks for checking out. Please stop by again to see the progress......</h3>
</div>
</div>
import {Component, ViewEncapsulation} from '@angular/core';
@Component({
selector: 'config',
templateUrl: 'underconstruction.html',
encapsulation:ViewEncapsulation.None
})
export default class UnderConstruction {}
import {Component} from '@angular/core';
import {NavbarMapService} from "./NavbarMapService";
@Component({
selector: 'app-navbar',
templateUrl: 'navbar.html',
providers : [NavbarMapService]
})
export default class NavbarComponent {}
import {Injectable} from "@angular/core";
import {provideRoutes, Routes} from "@angular/router";
import UnderConstruction from "./UnderConstruction";
@Injectable()
export class NavbarMapService {
static routes: Routes = [
{path: 'underconstruction', component: UnderConstruction}
];
}
import {
AfterViewInit, Component, ComponentFactoryResolver, Directive, Injectable, Input, OnDestroy, OnInit, Pipe,
PipeTransform,
Type,
ViewChild,
ViewContainerRef, ViewEncapsulation
} from "@angular/core";
import {DomSanitizer} from "@angular/platform-browser";
/*****
* Using Dynamic Component Module
*/
export interface MyPost {
htmlText: any;
}
@Component({
template: `<div [innerHtml]="htmlText | safeHtml"></div>`
})
export class DynamicSidebarComponent {
@Input() htmlText: any;
}
// Directive
@Directive({
selector: '[sideBarPage]'
})
export class MyPostDirective {
constructor(public viewContainerRef: ViewContainerRef) {}
}
@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {}
transform(value : any) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
// Component declaration for dynamic items
export class PostItem {
constructor(public component: Type<any>, public data: any) {}
}
// Service to instantiate the component and populate with data
@Injectable()
export class MyPostService {
constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
loadComponent(viewContainerRef: ViewContainerRef, postItem: PostItem) {
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(postItem.component);
viewContainerRef.clear();
let componentRef = viewContainerRef.createComponent(componentFactory);
let myPost: MyPost = <MyPost>componentRef.instance;
console.log("MyPostService: Line 6a:" + postItem.data);
myPost.htmlText = postItem.data;
}
}
@Component({
selector: 'sidebars',
template: `
<ng-template sideBarPage></ng-template>
`
})
export class SidebarComponent implements OnInit, OnDestroy {
@ViewChild(MyPostDirective)
private myPostDirective: MyPostDirective;
postItem: PostItem;
constructor(private myPostService: MyPostService) {}
ngOnInit() {
this.postItem = {component: DynamicSidebarComponent, data: this.buildSideBar()};
this.myPostService.loadComponent(this.myPostDirective.viewContainerRef, this.postItem);
}
ngOnDestroy() {
}
buildSideBar() {
let retval : string = "<ul class=\"list-unstyled components\">\n" +
" <li class=\"active\"><a href=\"#\">Sidebar Item 1</a><i class=\"glyphicon \"></i></li>\n" +
" <li>\n" +
" <a href=\"#subMenu1\" data-toggle=\"collapse\" aria-expanded=\"false\">\n" +
" <i class=\"glyphicon \"></i> Sidebar Item 2\n" +
" </a>\n" +
" <ul class=\"collapse list-unstyled\" id=\"subMenu1\">\n" +
" <li><a href=\"#\">Sub Sidebar Item 1</a><i class=\"glyphicon \"></i></li>\n" +
" <li>\n" +
" <a href=\"#subMenu2\" data-toggle=\"collapse\" aria-expanded=\"false\">\n" +
" <i class=\"glyphicon \"></i> Sub Sidebar Item 2\n" +
" </a>\n" +
" <ul class=\"collapse list-unstyled\" id=\"subMenu2\">\n" +
" <li><a href=\"#\">SubS Sidebar Item 1</a><i class=\"glyphicon \"></i></li>\n" +
" <li><a href=\"http://www.yahoo.com\">SubS Sidebar Item 2</a><i class=\"glyphicon \"></i></li>\n" +
" <li><a href=\"/somepath/someProcess\">SubS Sidebar Item 3</a><i class=\"glyphicon \"></i></li>\n" +
" </ul>\n" +
" </li>\n" +
" <li>\n" +
" <a href=\"#subMenu3\" data-toggle=\"collapse\" aria-expanded=\"false\">\n" +
" <i class=\"glyphicon \"></i> Sub Sidebar Item 3\n" +
" </a>\n" +
" <ul class=\"collapse list-unstyled\" id=\"subMenu3\">\n" +
" <li><a href=\"#\">DD Item 1</a><i class=\"glyphicon \"></i></li>\n" +
" <li><a href=\"#\">DD Item 2</a><i class=\"glyphicon \"></i></li>\n" +
" <li><a href=\"javascript:somecall()\">DD Item 3</a><i class=\"glyphicon \"></i></li>\n" +
" </ul>\n" +
" </li>\n" +
" </ul>\n" +
" </li>\n" +
" <li><a href=\"#\">Sidebar Item 3</a><i class=\"glyphicon \"></i></li>\n" +
" </ul>";
return retval;
}
}