We tend to regard ourselves as puppets of the Past, driven along by something that is always behind us. — Alan Watts Do you ever “Feel” the temptation while working, even though you love what you do, to perhaps check the news, social media, etc. There’s this “Freedom” in just…

Scenario Our directive ElColorDirectivehas a config custom Angular @Input property that we need to set using a configuration object. The directive targets elements defined with the config property like this. button[config] Since the selector includes [config] we cannot pass the configuration object in like this. <button [config]="{ color: 'yellow' }">hello</button> Putting brackets around config ( [config] ) means that config will no longer be in the DOM and therefore not matched by the button[config] selector.

Scenario We wish send someone a link to Google Font Volume Material Icons. Approach Set query to volume in the Material Icons font URL. https://fonts.google.com/icons?icon.query=volume Demo Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design…fonts.google.com

Scenario We have created a function that returns a quadrant given a center and x and y coordinates. We want to unit test it in Stackblitz using Node’s assert function as a minimal testing framework. function quadrant(MC: MetaCoordinates): Quadrant { if (MC.x <= MC.c.x) { if (MC.y…

Scenario We need a Typescript type that restricts a Quadrant to the numbers 1,2,3,4. Approach type Quadrant = 1 | 2 | 3 | 4; Demo

Scenario We want the degree symbol not included in the characters of the Celcius rendering such that the text can be centered vertically within our Flexbox.

Scenario We are creating a power button component which is off by default. We want the declaration to support switching it on by simply adding on as an attribute to the component declaration like this. <power-button on></power-button> Approach Create a toBoolean utility function to convert the @Input on property. /** * If…

Scenario We have an Angular Material raised button and we want the within it to be left aligned rather than centered. Approach Since Angular Materials buttons use a flex layout, we need to add the justify-content: flex-start; style. [mat-raised-button] { justify-content: flex-start; } Demo

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.