Image by Wayne from Pixabay

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

--

--

Image by Slamet Budiono from Pixabay

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…

--

--

Image by Elsemargriet from Pixabay

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…

--

--

Image by annca from Pixabay

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…

--

--

Image by Stefan Parnet from Pixabay

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…

--

--

Image by Josch13 from Pixabay

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

--

--