Difference between revisions of "Angular CheatSheet"

Latest revision as of 21:44, 13 September 2018

Command Line

if nvm (node version manager) is installed first check the current version of node

nvm ls

if it's smaller than 6.9 then install a higher version

nvm ls-remote 
nvm install v6.11.0

check node version

node --version

now install Angular

sudo npm install -g @angular/cli 
sudo npm uninstall -g angular-cli @angular/cli
sudo npm cache clean

sudo npm --save bootstrap

ng new myApp
ng generate component componentName
ng g c componentName
ng g service servicename

ng serve
ng serve --port 3000

Selectors

 selector : 'app-server'   -> <app-server>
 selector : '[app-server]   -> <div app-server>
 selector : '.app-server.   -> <div class='app-server'>

Directives

 <p *ngIf="serverCreated">            </p>

in the above sentence "*" means it's a structural directive which changes how it's displayed in DOM.

"serverCreated" must be true or false

 <a *ngFor="let server of servers">
     <p> {{ server.name }} </p>
     <img [src] = "server.Path" />
 </a>

 <option *ngFor="let server of servers" value="{{ server.id }}"> {{ server.name }} </option>

[ngClass="{online:serverStatus==='online'}"

online is the css class and serverStatus==='online' is boolean value for displaying the class

Environemnt Variables

Win

set ASPNET CORE_ENVIRONMENT = "Development"

Control Panel > System > Advanced Settings

Mac

export ASPNET CORE_ENVIRONMENT = "Development"

Chrome Extensions

Augury to analyze angular app in Chrome

Other Tools

npm install -g browser-sync