Scenario

We want to see how many milliseconds it takes to mutate a count index reference from one to a million.

Approach

Use console.time .

console.time('count performance');
for (let count = 0; count++; count <= 1000000) {
  //Profile how long this takes
}
console.timeEnd('count performance');

This will log.

count performance: 0.005126953125 ms

Demo

Note that the Stackblitz console on the right hand side currently does not show console.time , so to see the result open the Developer Tools in your browser and click on the console.

Scenario

We have an @Input property animationState and we want to log changes to the property.

Approach

Implement OnChanges to receive notifications of changes to the animationState input property.

export class HelloComponent implements OnChanges { ...

Now we can log changes to the animationState property inside the ngOnChanges method.

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes.animationState);
  }

Demo

Whenever the Toggle Animation button is clicked the HelloComponent will log the change to the animationState property.

Scenario

We have created a test library within our Angular workspace.

ng g library test

Now we wish to generate Compodoc documentation for the library.

Approach

Install Compodoc.

npm install -g @compodoc/compodoc

Create tsconfig.doc.json in the root folder with the following contents.

{
  "include": ["projects/test/src/**/*.ts"],
  "exclude": ["projects/test/src/test.ts", "projects/test/src/**/*.spec.ts", "projects/test/src/app/file-to-exclude.ts"]
}

Generate the documentation.

npm run compodoc

Serve the documentation.

compodoc -so

Scenario

We want the width and height of our div element to be whatever the width and height of the containing element is minus 1rem .

Approach

Use calc . The containing element will be a main element.

div {
  height: calc(100% - 1rem);
  width: calc(100% - 1rem);
  background-color: aqua;
} 

Demo

Scenario

We want a basic starting point for creating Leaflet demoes with Angular.

Approach

Install

First add the dependencies:

• leaflet
• @asymmetrik/ngx-leaflet
• @types/leaflet

Within app.component.ts import leaflet .

import * as L from 'leaflet';

Styling

Add the leaflet style sheet to the head of index.html .

<link
   rel="stylesheet"
   type="text/css"
   href="./node_modules/leaflet/dist/leaflet.css"
/>

Configuration

Create a basic leaflet configuration object.

  options: any = {
    zoomControl: false,
    layers: [
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 4,
        attribution: '...',
      }),
    ],
    zoom: 2,
    center: L.latLng({ lat: 38.991709, lng: -76.886109 }),
  };

Note that we switched off zoomControl and we will add it back in our mapReady method.

  mapReady(map: L.Map) {
    map.addControl(L.control.zoom({ position: 'bottomright' }));

    // Reset the map
    setTimeout(() => {
      map.invalidateSize();
    }, 0);
  }

View

With app.component.html declare a leaflet element.

<div
  style="height: 300px;"
  leaflet
  [leafletOptions]="options"
  (leafletMapReady)="mapReady($event)"
></div>

Demo

Scenario

We have an array of customer objects and we want to log them in a table format.

Approach

Use console.table .

const customers = [
  { id: 1, name: 'Cookie Monster' },
  { id: 2, name: 'Swedish Chef' },
];
console.table(customers);

Demo

If you open the console on the right of the Stackblitz demo you’ll notice the array index, the id and the name are all displayed in a table.

Scenario

We have a Customer property on our store instance that is always initialized and we want to skip the non null check in order to access the total function on each Customer instance.

const store:any = {};
if (store.customer) {
   const total = store.customer.total());
} 

Approach

With the Typescript Optional Chaining ( ? )Operator we can skip the if statement.

const total = store.customer?.total();

Demo

Scenario

We want to add one day to the current date.

Approach

First create a timestamp with the unary operator (+). Then add a day to it, and create a new date with the new timestamp as an argument.

const now: number = +new Date();
const ONE_DAY_MILLIS: number = 24 * 60 * 60 * 1000;
const tomorrow = new Date(now + ONE_DAY_MILLIS);
const date: Date = new Date(now);

As can be noted in the below demo doing +new Date() is the same thing as new Date().getTime() .

Demo

Scenario

We wish to fade in the Angular Router outlet.

Approach

Within styles.css or styles.scss add.

router-outlet + * {
  display: block;
  animation: outlet 1s;
}

@keyframes outlet {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Demo