Posts

Showing posts from 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" :

Programming paradigm

InterView Preparation - Log Day 1 - 1) Angular 2 + supports various javascript frameworks 2) Dart, Typescript,ES6 ,ES5 --> langulages used to develop applications in Angular 2 framework 3) Javascript modules are the collection of javascript objects using JS Module Pattern    a)  classic Pattern i.e    var sampleModule = (function() { //private variables var a=10; var b=20; //private functions var getSum = function(){ return (a+b); }; //private functions var getProduct = function(){ return  (a*b); }; //expose objects return{ sum: getSum, procduct: getProduct }    })();    Console.log(sampleModule.sum());    console.log(sampleModule.product());    ()--> is for exexuting the objects   b) CommonJs Pattern   var sampleModule = function() { //private variables var a = 10; var b = 20; this.sum = function(){ return (a+b); }; this.product = function(){ return (a*b); };   }   module.export= sampl