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;
}
}