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