Posts

Showing posts from September, 2018

Angular 2 Side Nav Bar

app.component.html import { Component } from '@angular/core' ; @ Component ({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.scss' ] }) export class AppComponent { title = 'app' ; isExpanded = true ; toggleFunction (): void { console . log ( 'I was clicked' ); if ( this . isExpanded ) { document . getElementById ( 'sidebar-wrapper' ). style . width = '0px' ; document . getElementById ( 'page-content-wrapper' ). style . marginLeft = '0px' ; this . isExpanded = false ; } else { document . getElementById ( 'sidebar-wrapper' ). style . width = '250px' ; document . getElementById ( 'page-content-wrapper' ). style . marginLeft = '250px' ; document . getElementById ( 'page-content-wrapper' ). style . overflowX

Install Angular 4 without CLI

Step 1 : npm init -- This will create a package.json file Step 2 : Copy the content of the below package.json in the created file Step 3 : npm install Step 4: Create Controller , Module ,main.ts ,tsconfig.json,systemjs.config.js,files from the below link Step 5: install http-server --save-dev -- This will add an entry in the package.json file Step 6: http-server -p 8090 --  run the application -- Access the application http:localhost:8090/index.htm Git Link : https://github.com/mazuami/Angular4Structure.git tsconfig.js { "compilerOptions" : { "target" : "es5" , "module" : "commonjs" , "moduleResolution" : "node" , "sourceMap" : true , "emitDecoratorMetadata" : true , "experimentalDecorators" : true , "lib" : [ "es2015" , "dom" ], "noImplicitAny" :