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…

--

--

--

--