toogle sidebar button

Angular CLI

  • sudo npm install -g @angular/cli --unsafe-perm - install Angular CLI under Ubuntu

Creating components

  • <input [value]="firstName"> - Binds property value to the result of expression firstName.
  • <div [attr.role]="myAriaRole"> - Binds attribute role to the result of expression myAriaRole.
  • <div [class.extra-sparkle]="isDelightful"> - Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the expression isDelightful.
  • <div [style.width.px]="mySize"> - Binds style property width to the result of expression mySize in pixels. Units are optional.
  • <button (click)="readRainbow($event)"> - Calls method readRainbow when a click event is triggered on this button element (or its children) and passes in the event object.
  • <my-cmp [(title)]="name"> - Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">
  • <video #movieplayer ...><button (click)=""></video> - Creates a local variable movieplayer that provides access to the video element instance in data-binding and event-binding expressions in the current template.
  • <p *myUnless="myExpression">...</p> - The * symbol turns the current element into an embedded template. Equivalent to: <ng-template [myUnless]="myExpression"><p>...</p></ng-template>
  • <p>Employer: </p> - The safe navigation operator (?) means that the employer field is optional and if undefined, the rest of the expression should be ignored.


Internationalization (i18n)



Create own library with demo


export LIB_NAME=my-lib
ng new ${LIB_NAME} --style scss
cd ${LIB_NAME}
mv src demo
sed -i -- 's/src/demo/' .angular-cli.json
npm install ng-packagr --save-dev
cat <<EOT > ng-package.json
  "\$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "public_api.ts"
touch public_api.ts

Add core module

mkdir -p src/core
cat <<EOT > src/core/core.module.ts 
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

  imports: [
  declarations: [
  exports: [
export class CoreModule { }
echo "export * from './src/core/core.module'" >> public_api.ts